Overview of Scalable Vector Graphics (SVG)

Gopi Chand
Jul 12, 2015
5.5k
0
0
Article

Scalable Vector Graphics (SVG) is a standard from World Wide Web Consortium (W3C). SVG is a graphics format in which images or shapes are specified in XML and then rendered by an SVG viewer. It describes the ways so that images or vector graphics can be drawn for use on the web. It is used to draw two-dimensional vector graphics.

SVG

As already said, it is a recommended standard from the W3C that describes how to create vector graphics using a markup language because since it can interpret XML, it can also interpret SVG and helps to check the structures of a SVG document or read it to bring out useful information. Since it is built on XML it also makes it simpler to produce SVG programmatically.

Since it is a “Vector Graphics”, the shapes to be displayed are stored as vectors or vector-like structures or we can say as numbers not as pixels.

Since it is “Scalable”, the viewer can scale the SVG image up and down in size without losing its quality because graphics are defined as numbers instead of pixels. Scaling the image means just multiplying or dividing numbers to define the SVG shapes.

The following are points to remember about SVG:

SVG stands for Scalable Vector Graphics.
SVG is a standard from W3C.
SVG defines vector based graphics in XML format.
SVG is intended to display graphics or images over the web.
SVG supports interactivity and animation.
SVG images never lose quality, whether it is zoomed out or zoomed in because it is vector based graphics.
SVG also integrates well with other W3C standards like DOM and XSLT.

SVG Uses

As it is a vector graphics format, it is most commonly used for the following:

X, Y coordinate system, in other words two-dimensional graphics.
Pie charts, column charts and other charts.
Architecture and design diagrams.
Logos and scalable icons for web.

SVG Viewer

SVG is best viewed in Firefox and opera web browsers, but Internet Explorer needs an SVG viewer plugin installation for viewing SVG.

SVG Advantages

SVG can be created and edited with any editor like Notepad, Notepad++, but it is more often convenient to use a drawing program like Inkscape to create SVG images.
As it is XML based, SVG images can be searched, indexed, scripted and compressed.
SVG images are highly scalable and it never loses its quality.
SVG images can be printed with high quality at any resolution.
SVG images are zoomable.
SVG is an open standard.
SVG files are pure XML.
SVG can also integrate with other W3C standards.

SVG disadvantages

Size can be big even for smaller images.
Is not supported in all browsers.
Size of text format is larger than binary formatted raster images.

SVG Example
1. <svg width="200" height="200">
2. <circle cx="70" cy="70" r="50" stroke="blue" stroke-width="5" fill="orange" />
3. </svg>

Embed your SVG XML directly into HTML pages:

The <svg> tag is used to indicate the start of a SVG image.
The <svg> tag's width and height defines the width and height of the SVG image.
The <circle>, <rect>, <ellipse> and so on tags are used to draw various shapes.
X and Y represents the centre of the shapes and the default value is (0, 0) and also use the “r” attribute for radius in case of a circle.
Stroke and stroke-width controls the outlining of shapes.
Fill attribute defines the fill colour of the shapes.
The </svg> indicates closing or ending of SVG image.
Since there are XML files, all the elements should be properly closed.

SVG Example: Rectangle

<html>
<body>
<h1>SVG IMAGE</h1>
<svg width="300" height="110">
<rect width="200" height="100" style="fill:#c80000;stroke-width:3;stroke:#000001">
</svg>
</body>
</html>

Output

output image

SVG Example: Circle

<html>
<body>
<h1>SVG IMAGE</h1>
<svg width="200" height="200">
<circle cx="70" cy="70" r="50" stroke="blue" stroke-width="5" fill="orange" />
</svg>
</body>
</html>

Output

Output

SVG Example: Ellipse

<html>
<body>
<h1>SVG IMAGE</h1>
<svg height="150" width="400">
<ellipse cx="130" cy="60" rx="100" ry="50" style="fill:lightgreen;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>