TSM - The advantages of using SVG (Scalable Vector Graphics)

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.

What is SVG?

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:

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

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:

Code explanation:

• The SVG graphic is declared by using the tags
  Height and width attributes of the
• The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle"s center is set to (0,0)
• The r attribute defines the radius of the circle
• The stroke and stroke-width attributes control how the outline of a shape appears
• The fill attribute refers to the color inside the circle

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:

1. Basic shapes: straight lines, polygons, circles, ellipses, and rectangles with or without rounded corners.
2. Paths: outlined or filled paths containing curved or straight lines.
3. Text: on straight or curved paths in any direction.
4. Painting: fills and outlines using solid colors, gradients, patterns, transparency, and markers (line terminators such as arrow heads).
5. Color: fill and stroke properties defined using standard 3 or 6-digit hex or rgb values.
6. Gradients and patterns: CSS3-like gradient declarations or bitmap backgrounds.
7. Clipping, masking and compositing: using elements to outline regions which can be painted.
8. Filters: effects applied to all elements within a container, e.g. blurring, lighting, color adjustments, etc.
9. Linking: hyperlinks to other documents.
10. Interactivity: attaching event handlers using JavaScript.
11. DOM Scripting: accessing and manipulating SVG elements using the Document Object Model.
12. Animation: built-in animations using Synchronized Multimedia Integration Language (SMIL).
13. Fonts: text glyphs defined in an SVG file which can be used as a standard font.
14. Metadata: titles, descriptions, subjects, creators and other properties about the SVG image.

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.

Advantages of using SVG

Vector graphics are scalable

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.

Easy to create.

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

Easy to edit

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.

Smaller file sizes

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.

Ideal for details

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.

File size based on complexity

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.

Accessible DOM Node-Based API

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.
Thanks to DOM accessibility, you can actually style shapes in CSS, and make them interactive with JavaScript.
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.

And a few disadvantages…

It wouldn"t be fair to omit to speak about some of the downsides of SVG. Fortunately there are few to mention. They are:

Complex development

SVG code which is structured XML, can be quite lengthy and complex, difficult to troubleshoot for errors.

Performance issues

In case of over-used and complex animations the WebKit engine could be noticeably slower.

Not fully supported by older browsers (Internet Explorer 8 and lower versions.)

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.

Some practical uses of SVG

Let"s look at a few practical applications for SVG.

• Graphs - Because SVG"s number 1 strength is basic vector shapes, it works very well for creating graphs and infographics. Not only is it great for creating static graphs from given numbers, but it is also well suited for "live" graphs, fed dynamically by AJAX requests, user input, or randomly generated data.
• Road Map - Road maps are built of hard lines and exact shapes. These shapes can be represented easily with vector graphics, and lend themselves to zooming into the map for further detail.
• Complex UI elements - Sometimes we may need to create a more complex UI element which consists of a number of shapes, keeping in mind the responsiveness in the mean time. Creating them using HTML and CSS would usually raise many problems. (i.e positioning, masking, layering and styling issues)
• A much better solution would be to draw the element in a graphic editor and save it out as an SVG file. This would allow us to have a single, scalable element without worrying about managing multiple divs.
• Logos - Most logos are vector-based graphics. So why not define an SVG document as your logo, and drop it anywhere, scaling it on the fly to whatever size it needs to be without compromising quality and saving bandwidth in the same time?
• Simple Games - Even if CANVAS is better for game rendering (games that use pixel-based art and animation), SVG could be a great alternative for simple games that require less character animation and more information display(for example Sudoku).
• Responsive ADS (the ad content would occupy the space given to it by the document, and considering that CSS and JavaScript are allowed, most of the action would be contained to a single SVG file per ad);

Useful links:

• The basics of using SVG : http://www.w3schools.com/svg/svg_intro.asp
• Using SVG, a practical guide: http://css-tricks.com/using-svg/
• SVG workflow: http://danielmall.com/articles/svg-workflow-for-designers/
• A compendium of SVG information: http://css-tricks.com/mega-list-svg-information/
• About animating SVG: http://24ways.org/2013/animating-vectors-with-svg/
• Making responsive SVG :http://demosthenes.info/blog/744/Make-SVG-Responsive
• SVG Vs Canvas: http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/
• SVG and SEO: http://www.rocketmill.co.uk/exploiting-svg-images-for-seo
• Some nice SVG examples: http://www.creativebloq.com/design/examples-svg-7112785