HTML5 - SVG




HTML5 SVG

SVG stands for "scalar vector graphics" which is used for creating the 2D-graphics and graphical applications.

It is mostly used by creating the pie charts, x, y coodinates etc, SVG is an XML based format which is used to draw the vector images. SVG has many methods to create the boxes, rectangles, circles, graphics images etc.

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

SVG images supports interactivity and animation.

SVG is a W3C standard.

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

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

  • Fill attribute defines the fill color of the circle.

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

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

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

Advantages

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

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

  • 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

  • Size can be big even for small image.

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