SVG Scalable Vector Graphics

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, so on.

Unlike bitmap images( jpg, png and gif), they never stretch up or shrink down. They are even light weighted as compared to bitmap images.

How to create SVG in html


	<svg width="400" height="300" style="border:1px solid #ccc">
	
	</svg>
		

svg
HTML5 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, but can't be filled as it is not a shape like rectangle and circle.

Attribute Value
x1 first point on x axis
y1 first point on y axis
x2 second point on x axis
y2 second point on y axis
stroke color of outline. ( Default color is black)
stroke-width width of stroke. ( Default width is 1px)

		<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>
		

How SVG Line look on browser

SVG Line 1

SVG Line 2

Multiple Lines



SVG Rectangle

SVG Rect can create rectangle inside an SVG tag.

Attribute Value
x Distance from x axis
y Distance from y axis
width Width of rectangle
height Height of rectangle
fill Fill background of rectangle
stroke color of outline. ( Default color is black)
stroke-width width of stroke. ( Default width is 1px)


	<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 Rectangle on Browser

SVG Square

SVG Rectangle

SVG Rectangle with Border


SVG Circle

SVG Circle can create circle inside an SVG tag.

Attribute Value
cx Centre from x axis
cy Centre from y axis
r Radius of circle
fill Fill background of Circle
stroke color of outline. ( Default color is black)
stroke-width width of stroke. ( Default width is 1px)


	<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 Circle on Browser

SVG Circle

SVG Circle with Stroke

SVG Circle with hover



SVG Ellipse

SVG ellipse can create ellipse inside an SVG tag.

Attribute Value
rx Radius on x-axis
ry Radius on y-axis
cx Center Position from left
cy Center Position from Top
stroke Outline width


	<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 ellipse on Browser

SVG ellipse

SVG ellipse with Stroke

SVG ellipse with hover

SVG Umbrella

Here is an example of umbrella using svg.