Scalable Vector Graphics (SVG) | Overview
SVG – Scalable Vector Graphics 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 ways that images or vector graphics can be drawn for use on the web. It is used to draw two-dimensional vector graphics.
Scalable Vector Graphics?
As already said that it is a standard recommended from W3C which describes how to create vector graphics using a markup language because as it can interpret XML, it can also interpret SVG and helps to check the structures of SVG document or read it to bring out useful information. Being built on XML also makes it simpler to produce SVG programmatically.
As it is a “Vector Graphics”, format the shapes to be displayed are stored as vectors or vector-like structures or we can say as numbers, not as pixels.
As 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.
Points to remember about SVG
- SVG stands for Scalable Vector Graphics.
- It is a standard from W3C.
- It defines vector-based graphics in XML format.
- It is intended to display graphics or images over the web.
- It supports interactivity and animation.
- Its images never lose quality whether it is zoomed out or zoomed in because it is vector based graphics.
- It also integrates well with other W3C standards like DOM and XSLT.
As it is a vector graphics format, it is mostly used for the following:
- X, Y coordinate system i.e. two-dimensional graphics.
- Pie charts, column charts and other charts.
- Architecture and design diagrams.
- Logos and scalable icons for the web.
Scalable Vector Graphics (SVG) is best viewed in Firefox and opera web browsers. But internet explorer needs an SVG viewer plugin installation for viewing SVG.
- SVG can be created and edited with any editor like notepad, notepad++, etc. 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.
- Size can be big even for small images.
- Do not Support all browsers.
- The Size of text format is larger than binary formatted raster images.
<svg width="200" height="200"> <circle cx="70" cy="70" r="50" stroke="blue" stroke-width="5" fill="orange" /> </svg>
Embed your SVG XML directly into HTML pages
- The <svg> tag is used to indicate the starting of SVG image.
- The <svg> tag’s width and height define the width and height of SVG image.
- The <circle>, <rect>, <ellipse> etc. tags are used to draw different shapes.
- X and Y represent the center of the shapes and default value is (0, 0) and also use “r” attribute for radius in case of circle.
- Stroke and stroke-width controls the outlining of shapes.
- Fill attribute defines the fill color of the shapes.
- The </svg> indicates closing or ending of SVG image.
- Being XML file, 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:rgb(00,150,0);stroke-width:3;stroke:rgb(0,0,1)"> </svg> </body> </html>
SVG Example: Square
<html> <body> <h1>SVG IMAGE</h1> <svg width="300" height="170"> <rect width="150" height="150" style="fill:tomato;stroke-width:3;stroke:green"> </svg> </body> </html>
SVG Example: Circle
<html> <body> <h1>SVG IMAGE</h1> <svg width="200" height="200"> <circle cx="90" cy="90" r="70" stroke="blue" stroke-width="5" fill="skyblue" /> </svg> </body> </html>
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:#ffff0f;stroke:red;stroke-width:3" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>
That’s all for introduction phase. We’ll continue this tutorial further in the next upcoming post. Till then, Keep visiting for more tutorials like this. 😉