In my recent article, we discussed 7 Reasons to Consider SVGs Instead of Canvas. SVGs are ideal if you require a scalable diagram such as a chart or logo which can be altered or animated using JavaScript DOM methods.

So … what are SVGs and how do we use them? This is the first part in a series articles about the vector image format.

What Are SVGs?

SVGs are vector graphics. Rather than defining the color of each pixel like you would in a bitmap (JPEG, PNG, GIF, BMP etc.), vector graphics define lines and shapes, e.g. draw a black line from co-ordinate 0,0 to 100,100. This has a number of advantages: vectors are easy to modify, generally require smaller files and are scalable to any dimension without losing quality — which makes them ideal for responsive web design. Bitmaps remain the best choice for photographs or very complex images (note that SVGs can include embedded bitmaps).

SVG is a royalty-free web standard maintained by the W3C SVG Working Group. Version 1.0 of the technology was originally proposed in 1999. Version 1.1 is the most recent standard with version 2.0 expected in 2013.

There are a couple of other flavors: SVG Tiny and SVG Mobile. These are simplified profiles or subsets of the full SVG specification which target devices with reduced computational and display capabilities. These standards largely relate to how rendering engines parse the image; an SVG 1.1 file can be rendered on a device which supports SVG Tiny but some effects such as gradients and opacities would not be applied.

How are SVGs Defined?

SVGs are declared using eXtensible Markup Language (XML). It uses tags like HTML — the following code draws a white circle with a black border:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Be aware that XML is stricter than HTML. You cannot, for example, omit a closing tag since this will make the file invalid and the SVG will not 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.

Cascading Stylesheets in SVGs

SVGs also support embedded or external CSS rules. Like HTML, the selectors can target tag types or IDs and classes assigned to specific elements. CSS properties and values generally follow element attributes. For example, this CSS renders every circle in the SVG with the same white fill and black border color:

circle
{
	stroke: #000;
	fill: #fff;
}

SVG Creation Tools

Creating SVGs in a text editor is possible but it’s a slow process, error-prone and not much fun. Fortunately, there are several open source and commercial tools which allow designers and non-programmers to easily create SVG images:

• Inkscape
• OpenOffice or LibreOffice Draw
• svg-edit

Therefore, a design team could create a great-looking chart which a programmer can modify by applying real data to specific elements.

However, note that some graphics packages may not create the most optimal code or apply their own XML extensions.

SVG Browser Support

Although the technology has been available for more than a decade, SVG use within browsers was held back by Internet Explorer which first provided support in IE9. Today, most desktop and mobile browsers can handle SVGs and it is a recognized HTML5 standard.

Browser implementations vary, but SVGs can either be:

• viewed as a separate file directly in a web browser.
• embedded as an XML section within an HTML page.
• defined as an external page resource within img, object or the old embed tags (or as an iframe, although that’s effectively viewing the SVG file)
• set as background image in CSS.

There are a number of plug-in and shim options if you require SVG support in Internet Explorer 8.0 and below. Several fallback to Vector Markup Language (VML); a technology used in Microsoft products which influenced the SVG standard:

• Raphaël — JavaScript/VML
• AmpleSDK — JavaScript/VML
• svgweb — JavaScript/Flash
• Batik — Java toolkit

SVG Performance in Browsers

SVG XML must be parsed to render images on-screen and represented in memory as a Document Object Model. As with HTML pages, performance will be affected if you attempt to move or manipulate SVGs containing a large number of elements. In extreme cases, the redraw will be noticeable.

For this reason, it’s often preferable to use the HTML5 canvas tag for fast action games with hundreds of animated items. However, you may be able to adopt SVGs for some aspects, e.g. a player’s spaceship could be a simple SVG which can be moved, rotated, scaled and warped over a canvas-generated background.

SVGs and Accessibility

Owing to their XML data structure, SVGs provide better accessibility than bitmap images. At a basic level, meta data, short text and long text alternatives can be applied to any SVG image.

That said, screen reader support is poor. SVGs were not considered a viable browser technology until the release of IE9 so vendors did not consider them a priority. The situation will undoubtedly improve.

In the short term, you could consider transforming SVG XML into a text-based alternative using XSLT.

SVGs and Search Engine Optimization

Unlike bitmaps, XML is inherently machine-readable so static SVG files can be read, parsed and indexed by search engine bots. Google has been indexing SVG content since August 2010 and results can be found in the standard and image search systems.

Replacing a few PNGs with SVGs is unlikely to improve your rankings. However, if you’re displaying data as images without textual fall-backs, switching to SVGs could offer an SEO boost.

In my next SVG article we’ll create our first images without the use of a graphics package!