A Scalable Vector Graphics is a technology used for creating vector graphics in a browser.

The SVG technology is based on the XML file format and it is a language for describing 2D-graphics and graphical applications in XML files which than are being rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, two-dimensional graphs in an X,Y coordinate system and similar presentational tools. This "technology" is an open standard that has been actively developed by the W3C since 1999.

NOTE: Although HTML5 does support embedding SVG based objects, the SVG is actually not a part of the HTML5.

Syntax:

<svg></svg>

The SVG element accepts width and height attributes that define the width and height of the SVG object to be embedded.

Drawing methods and types with SVG

SVG integrates methods that allow drawing paths (polygons), boxes, circles, text, and images. Following examples show how to embed all of those methods.

Example

Example of SVG rectangle, rounded rectangle, circle, star and embedded text:

 

›› go to examples ››