The use of Scalable Vector Graphics (SVG) are among the most important web design trends for 2014. It is recommended by W3C (World Wide Web Consortium) since 2003, but it was underused due to partial support on Internet Explorer (IE). But things are changing today…
In my article I will briefly present the SVG concept and discuss the practical benefits of using SVG in web design.
SVG stands for Scalable Vector Graphics, and is an XML-based vector image format for 2D graphics which support interactivity and animation. For more than a decade, SVG has been underused, not being fully supported by Internet Explorer.
But things have changed since then, and SVG elements are now used more and more, especially on browsers that support HTML5.
Today, the major internet browsers support SVG:
SVGs are declared using eXtensible Markup Language (XML), which uses tags like HTML.
For example, the following code draws a white circle with a black border:
It is important to know that XML is stricter than HTML, so omitting a closing tag could make the file invalid and the SVG not to be rendered.
The W3C SVG1.1 specification defines 14 main features:
Another way to create SVGs is to draw them using a vector graphics editor, which is preferable for those who don"t know XML, or for those who want to create more complex graphics. We"ll refer to these tools briefly in the following lines.
But now let"s see the main reasons why every web designer should consider using SVGs.
The greatest advantage of vector graphics is the possibility to scale them to whatever size we want without losing quality. This is mainly the reason why they are ideal for designing company logos and other designs that are most often resized. Every designer should pay attention in assuring a good scalability to their work.
Also, resolution independence of scalable graphics is a really hot topic these days because high resolution devices are more and more often used and delivering a responsive content is desirable.
Creating simple graphics with XML is quite easy. But what if we want to create more complex graphics? There are plenty user friendly vector graphics editors that could be used to create SVG graphics, like Adobe Illustrator, Macromedia Freehand, Corel Draw. There are also some nice free tools like Inkscape, OpenOffice, LibreOffice Draw and svg-edit (online tool).
SVG are easy to edit, which represents a huge advantage over rasterized graphics. If you want to make changes to your vector graphics, all you need is a text editor, or even easier, use a vector graphic editing tool. Important to know, components in a vector graphic can be individually manipulated, so when editing, there"s no need to build anything from scratch. Changing basic appearance attributes like color, outline and fill can be done very easily and quickly.
Having a smaller file size makes transferring and loading graphics much faster on the web. That"s the reason why many people prefer to use vector graphics, for you could easily view them on the web without needing to wait for a long time in order to see the entire image. Even if you"ll make a huge image, it will still have a smaller file size compared to a similar raster image.
Since vectors uses lines, it is easier to create very detailed graphics. Also, illustrations will look sharper than high resolution photographs no matter what you"ll use them for. They are a lot clearer and easier to understand. Vector graphics also look better in print and are sharper, too.
Vector images are small files. They are based on how complex or difficult the image is, how intricate the lines are and how complicated the points are. The size of these graphics is not based on the size or color depth.
SVGs have a DOM, which opens lots of possibilities to control the graphics" appearance and behavior. It"s really easy to attach event handlers and manipulate elements like you would for other HTML blocks. That"s why, you can inspect SVG elements in the browser like any other HTML element.
The DOM node-based API of SVG also gives you the possibility to create SVG document-based images on the server-side.
There are multiple JS libraries created to assist you in this world, like D3.js, Raphael, Snap.svg, Processing.js, JSDrawing, PlotKit, SVGWeb and Paper.js.
It wouldn"t be fair to omit to speak about some of the downsides of SVG. Fortunately there are few to mention. They are:
SVG code which is structured XML, can be quite lengthy and complex, difficult to troubleshoot for errors.
In case of over-used and complex animations the WebKit engine could be noticeably slower.
There are still some good workarounds to extend browser support, like Raphael.js or using the technique of replacing SVGs with static images in older browsers.
Let"s look at a few practical applications for SVG.
by Ovidiu Mățan
by Dan Suciu
by Ovidiu Mățan
by Sorina Mone
by Ovidiu Mățan
by Dan Danciu
by Mihnea Lazăr
by Liviu Boar