html5 svg
HTML5 SVG

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, text 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 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 200. We can change width and height of svg element using width and height attributes.

SVG View

This is SVG Element. Default width of svg is 300, height is 200 and fill (background color) is transparent.

SVG Code


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

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. Circle tag can have cx ( center from x), cy ( center from y) and r ( radius).

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.