SVG Scalable Vector Graphics

SVG

HTML5 SVG( Scalable Vector Graphics) is the new way to add graphics on your Webpage. SVG can create Vector based drawing and objects like lines, rectangle,circle, polygons, text so on.

Unlike bitmap images( jpg, png and gif), they can increase width and height without blur. They are even light weighted as compared to bitmap images.

HTML5 SVG

SVG is a tag in html5 to create svg elements. SVG is an inline-block level element. Inside svg element, child tag of svg like rect, circle, polygon, text, g( group ), ellipse are created. Default width of svg element is 300 and default height is 150. We can change width and height of svg element using width and height attributes.

<svg style="border:1px solid #ccc">
    
</svg>
		

SVG Line.

How to create a line in SVG element. A line consist of two points. Thus we need one x1, one y1, one x2, and one y2. A line can have stroke and stroke-width, but can't be filled as it is not a shape like rectangle and circle.

SVG Line Attributes

<svg width="200" height="200" style="border:1px solid #ccc">
    <line x1="0" y1="0" x2="200" y2="200" > </line>
</svg>

<svg width="200" height="200" style="border:1px solid #ccc">
    <line x1="200" y1="0" x2="0" y2="200" stroke="black"> </line>
</svg>

<svg width="200" height="200" style="border:1px solid #ccc">
	<line x1="100" y1="0" x2="100" y2="200" stroke="red" stroke-width="5"> </line>
	<line x1="0" y1="100" x2="200" y2="100" stroke="blue" stroke-width="3"></line>
</svg>
		

SVG Rectangle

SVG Rect can create rectangle inside an SVG tag. A rectangle can have x ( horizontal distance from left-top corner ), y ( vertical distance from left-top corner ), width and height. Default fill ( background-color) of rectangle is black.

	<svg width="200" height="200" style="border:1px solid #ccc; margin-right:5px">
		<rect x="10" y="10" width="100" height="100" fill="aqua" ></rect>
	</svg>

	<svg width="200" height="200" style="border:1px solid #ccc">
		<rect x="10" y="10" width="150" height="100" fill="#ccc" stroke="red" ></rect>
	</svg>

	<svg width="200" height="200" style="border:1px solid #ccc">
		<rect x="10" y="10" width="150" height="100" fill="#444" 
			stroke="#0ff"  stroke-width="10px" ></rect>
	</svg>
			

SVG Circle

SVG Circle can create circle inside an SVG tag. Circle tag can have cx ( center from x), cy ( center from y) and r ( radius).

<style>
	#cir:hover{ fill:red}    // Will change background of svg on hover.
</style>	
	
<svg width="200" height="200" style="border:1px solid #ccc; margin-right:5px">
	<circle cx="100" cy="100" r="50" fill="aqua" />
</svg>

<svg width="200" height="200" style="border:1px solid #ccc">
    <circle cx="100" cy="100" r="50" fill="silver" stroke="red" stroke-width='3' />
</svg>

<svg width="200" height="200" style="border:1px solid #ccc">
    <circle id="cir" cx="100" cy="100" r="50" fill="silver" stroke="blue" stroke-width='3' />
</svg>
		

SVG Ellipse

SVG ellipse can create ellipse inside an SVG tag.

	<style>
	#svg-3:hover{ fill:aqua}    // Will change background of svg on hover.
	</style>	
	
	<svg width="200" height="200" style="border:1px solid #ccc; ">
			<ellipse ry="41" rx="76" id="svg-1" cy="78" cx="121"  fill="#F00"/>
	</svg>

	<svg  width="200" height="200" style="border:1px solid #ccc">
			<ellipse ry="41" rx="76" id="svg-2" cy="78" cx="121" stroke-width="5" stroke="#000000" fill="#F00"/>
	</svg>

	<svg width="200" height="200" style="border:1px solid #ccc">
			<ellipse ry="41" rx="76" id="svg-3" cy="78" cx="121" stroke-width="5" stroke="#000000" fill="#F00"/>
	</svg>	
		

SVG Text

SVG Text is used using <text> tag in svg. Default position for text is x="0" and y="0".

SVG Text Attributes

SVG Text Example

<svg>	                    
    <text x="10" y="20">This is text 1</text>
</svg>	                    
	                

<svg>	                    
    <text x="100" y="120" fill="red" font-size="20px">This is text 2</text>
</svg>

SVG Polygon

SVG Polygon is used to build a polygon with minimum 3 sides. A ploygon can be used to build a triangle, rectangle, square, pentagon, star etc.

SVG Polygon Attributes

SVG Polygon Example

<polygon points="60,20 260,20 300,120 20,120" fill="#fd5f5f" stroke="black"></polygon>

<polygon points="150,20 200,60 180,110 120,110 100,60" fill="aqua" stroke="black"></polygon>

<polygon points="150,25 120,110 200,60 100,60 180,110" fill="aqua" stroke="black"></polygon>

<polygon points="150,25 120,110 200,60 100,60 180,110" fill="blue" fill-rule="evenodd" stroke="black"></polygon>

SVG Animation

To add animation in svg, <animateMotion> tag is used in svg element. Path, dur and repeatCount are attributes of animateMotion tag.

SVG animateMotion attributes

SVG Animation Example

<svg>    
<g>
<circle cx="250" cy="90" r="10" fill="red"></circle>
<animateMotion path="M 0 0 V 0 H 100 Z" dur="2s" repeatCount="indefinite" />
</g>
</svg>    

<svg>    
<g>
<circle cx="10" cy="10" r="10" fill="blue"></circle>
<animateMotion path="M 0 0 V 130 H 280 Z" dur="4s" repeatCount="indefinite" />
</g>
</svg>