SVG introduction

SVG standsforScalable VectorGraphicsand itis a language fordescribing2D-graphicsandgraphical
applicationsinXMLand
the XML isthenrenderedbyan SVGviewer.
SVG ismostlyuseful forvectortype diagramslike Piecharts,Two-dimensional graphsinanX,Y
coordinate systemetc.
SVG became a W3C Recommendation14.January2003
ViewingSVGFiles
Most of the webbrowserscandisplaySVGjustlike theycandisplayPNG,GIF,and JPG.
InternetExplorerusersmayhave toinstall the Adobe SVG Viewertobe able toview SVGinthe
browser.
EmbeddingSVGinHTML5
HTML5 allowsembeddingSVGdirectlyusing<svg>...</svg>tagwhichhas followingsimple syntax
<svg xmlns= "http://www.w3.org/2000/svg">
...
</svg>
HTML5 - SVGCircle
Followingisthe HTML5 versionof an SVGexample whichwoulddraw acircle using<circle>tag
<!DOCTYPE html>
<html>
<head>

}
</style>
<title>SVG</title>
<meta charset= "utf-8"/>
</head>
<body>
<h2 align= "center">HTML5 SVGRectangle</h2>
<svg id = "svgelem"height="200" xmlns="http://www.w3.org/2000/svg">
<rect id = "redrect"width= "300" height= "100" fill ="red"/>
</svg>
</body>
</html>

HTML5 - SVGLine
------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position:relative;
left:50%;
}
</style>
<title>SVG</title>
<metacharset = "utf-8" />
</head>
<body>
<h2 align= "center">HTML5 SVG Line</h2>
<line x1= "0" y1 = "0" x2 = "200" y2 = "100"

style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
HTML5 - SVGEllipse
------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position:relative;
left:50%;
}
</style>
<title>SVG</title>
</head>
<body>

<h2 align= "center">HTML5 SVG Ellipse</h2>
<ellipse cx ="100" cy = "50" rx = "100" ry = "50" fill ="red"/>
</svg>
</body>
</html>
HTML5 - SVGPolygon
--------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position:relative;
left:50%;
}
</style>
<title>SVG</title>

</head>
<body>
<h2 align= "center">HTML5 SVG Polygon</h2>
<polygon points= "20,10 300,20, 170,50" fill = "red"/>
</svg>
</body>
</html>
HTML5 - SVGPolyline
-----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem{
position:relative;
left:50%;
}

</style>
<title>SVG</title>
</head>
<body>
<h2 align= "center">HTML5 SVG Polyline</h2>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill ="red"/>
</svg>
</body>
</html>
HTML5 - SVGGradients
--------------------------------------------
<html>
<head>
<style>
#svgelem{
position:relative;
left:50%;
}
</style>

<title>SVG</title>
</head>
<body>
<h2 align= "center">HTML5 SVG GradientEllipse</h2>
<defs>
<radialGradientid="gradient"cx ="50%" cy = "50%" r = "50%" fx = "50%"
fy= "50%">
<stopoffset= "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
<stopoffset= "100%" style = "stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx ="100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)"/>
</svg>
</body>
</html>
HTML5 - SVGStar
-------------------------------------------
<html>
<head>

Canvasdraws 2D graphics,on the fly(witha JavaScript).
SVG isXML based,whichmeansthateveryelementisavailablewithinthe SVGDOM.
You can attach JavaScripteventhandlersforanelement.
In SVG,each drawnshape isrememberedasanobject.If attributesof anSVG objectare changed,
the browsercan automaticallyre-renderthe shape.
Canvasis renderedpixel bypixel.Incanvas,once the graphicis drawn,itis forgottenbythe browser.
If its positionshouldbe changed,the entire sceneneedstobe redrawn,includinganyobjectsthat
mighthave beencoveredbythe graphic.
SVG Circle
-----------------------------------
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"stroke-width="4"fill="yellow"/>
</svg>
</body>
</html>

SVG Rectangle
-----------------------------------
<rect width="400" height="100"style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg>
SVG RoundedRectangle
----------------------------------------
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
SVG Star
-------------------------------------------
<polygonpoints="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
SVG Logo
-----------------
<svg height="130" width="500">
<defs>

<linearGradientid="grad1"x1="0%"y1="0%" x2="100%" y2="0%">
<stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipsecx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<textfill="#ffffff"font-size="45"font-family="Verdana"x="50"y="86">SVG</text>
Sorry,yourbrowserdoesnot supportinline SVG.
</svg>

SVG introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to SVG introduction

Similar to SVG introduction (20)

Recently uploaded

Recently uploaded (20)

SVG introduction