This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.
Introduction:
SVG stand for Scalable Vector Graphics. This is a HTML5 tag to draw a vector graphics. You just have to define the XML properties and will get the corresponding graphics element.
To start with the SVG first add a tag in the HTML body. Just like other HTML tags, you can add an ID to SVG tag for example add id=”svgTutorial”. To add a border properties to SVG add a style attribute like border-style:solid;border-width:2px;”. The SVG have common properties like other HTML tags. You can add the height and width also by height=”100px” width=”200px”.
Now we added the SVG element in our HTML code, It’s time to add the some graphics into it. The SVG provide number of shapes like Line, Circle, and Polygon etc. Let’s start with the Line and then will cover all.
SVG Line:
The SVG line defined by tag. and inside this you can specify the other properties.
tag have properties like start coordinates (x1, y1) and end coordinates (x2, y2). Specify the line start and end position by assigning the values to x1, y1, x2, y2. After specifying the coordinates, lets add some style to line, Give line color by specifying the “stroke: Green;” inside the style property. You can also set the line width by stroke-width:2; property.
Listing 1: HTML Script to draw a SVG Line
<!DOCTYPE html> <head> <title>Mrbool.com - HTML5 Tutorials</title> </head> <body> <h2>HTML5 SVG Line Example</h2> <svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"> <!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>--> <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/> </svg> </body> </html>
Figure 1: A green color line is painted by specifying the XML tags
SVG Circle:
The SVG provide a different tag to draw a circle. As you can see in the code below, the circle has an id, in this case I given it “myCircle”. To define a circle you need a circle center and a radius. So let’s give circle center as cx=”55″ cy=”55″ and circle radius as r=”50″. It’s done. The circle is ready. Now fill the circle with some color, we are using here a hexadecimal color fill=”#219E3E”. You can define the circle outer line and width by stroke=”#17301D” stroke-width=”2″.
Listing 2: HTML Script to draw a Circle
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>
Figure 2: A green color circle is painted by specifying the above XML tag and properties
SVG Rectangle:
tag is used to draw the rectangle in SVG. Similar to other SVG tag the have id property. I gave it “myRectangle” in this case. Define the rectangle height and width by width=”300″ height=”100″. To fill the color in rectangle use ‘fills’ property and assign a color. You can define the border by giving the stroke. One more thing, I added here is opacity. You can give the opacity for stroke as well as for filling also.
Listing 3: HTML Script to draw a Rectangle
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
</body>
</html>
Figure 3: A rectangle is painted by specifying the above XML tag and properties
SVG Ellipse:
Now we will try to draw an ellipse using the SVG tag. tag is used to draw a ellipse in SVG. Give an id to this tag, id=”myEllipse”. Now to draw a ellipse you have to give center coordinates of ellipse (cx, cy) and x- radius and y- radius (rx, ry). Now you can add the style properties to add the stroke color and stroke width by “stroke:black;stroke-width:3”. You can also fill the ellipse by “fill:#3F5208;”.
Listing 4: HTML5 Script to draw an Ellipse
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
Figure 4: A Ellipse is painted by specifying the above XML tag and properties
SVG Polygon:
The HTML5-SVG provide different tag to draw a polygon. As you can see in below code, the tag is used here to draw it. The properties of this tag is similar to other tags as we discussed, except this tag have a property ‘points’, The points are the coordinates of the polygon. So you have to specify the coordinates in pair of (x, y), the two points should have a gap in between. for example – the below polygon have first point as (10,10), second point as (75,150) and third point as (150,60).
After running the below program you can see the output, its same as expected.
Similarly for polygon also you can define the stroke color, stroke width, fill color etc.
Listing 5: HTML5 Script to draw an Polygon
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
Figure 5: A Polygon is painted by specifying the above XML tag and properties
Conclusion:
I have covered the SVG-Line, SVG-Circle, SVG-Rectangle, SVG-Ellipse and SVG-Polygon, these are the basic shapes of SVG. In my next tutorial I will cover the more advance SVG topics.
As always, Please comment here to clear your doubts and ask your questions, we will be happy to assist you by answering the queries.
via Hacker News 20 http://mrbool.com/how-to-work-with-scalable-vector-graphics-svg-in-html-5/25183
Ameya Karve's Weblog 