---

Search posts under HTML5:

---

Introduction in HTML5

How to use the SVG in HTML5?

Introduction of SVG

• SVG, Scalable Vector Graphics is an XML based language to define vector based graphics.

• SVG is intended to display images over the web.

• Being vector images, SVG image never loses quality no matter how they are zoomed out or resized.

• SVG images supports interactivity and animation.

• SVG is a W3C standard.

• Others image formats like raster images can also be clubbed with SVG images.

Advantages

• Use any text editor to create and edit SVG images.

• Being XML based, SVG images are searchable, indexable and can be scripted and compressed.

• SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized

• Good printing quality at any resolution

• SVG is an Open Standard

Disadvantages

• Being text format size is larger then compared to binary formatted raster images.

• Size can be big even for small image.

SVG with HTML

• svg element indicates the start of SVG image.

• svg element's width and height attributes defines the height and width of the SVG image.

• In above example, we've used a <circle> element to draw a circle.

• cx and cy attribute represents center of the circle. Default value is (0,0). r attribute represents radius of circle.

• Other attributes stroke and stroke-width controls the outlining of the circle.

• fill attribute defines the fill color of the circle.

• Closing</svg> tag indicates the end of SVG image.