The complete guide to SVG

Scalable Vector Graphics are now universally supported across all browsers (desktop and mobile). Here's our guide to what they are, and how to design and implement them in your web design work.

First, here are eight reasons why you should be using SVG as part of your workflow and for responsive web design. Want to build a site simply? Use a website builder.

01. Vectors are crisp

SVG uses a coordinate plotting system to plot points and connect them to draw lines, shapes or paths. Vector graphics are drawn using mathematics, meaning they're sharp and crisp, not pixelating like other image formats, making them great for logos, icons and illustrations.

SVG has a number of other features, too – with filters, patterns, gradients and masking and the 'viewBox' property for framing the scene – and they're all animatable. SVG is extremely versatile and supported by all browsers going all the way back to IE9.

02. It's got a navigable DOM

SVG inside the browser has its own DOM. SVG is treated as a separate document by the browser and then positioned inside the normal DOM of the page. This is important for the 'viewBox' property as we can draw our image on a canvas of any size, but then display it in browser at another, all without updating the properties inside the SVG. This separate, navigable DOM is also how we interact with elements inside SVG using CSS and Javascript.

03. It's accessible

SVG has tags built specifically for accessibility, the main one being the <title> tag. The title tag along with the <desc> tag should be used to provide fallback content for screen readers. 

The contents of these tags won't be displayed by the browser but they will be exposed to the browsers accessibility API. You can (and should) also use the correct ARIA properties where applicable, for example if you're hiding an SVG element. Remember, to keep your site running smoothly, you'll need to get your web hosting up to scratch.

04. It's resolution independent and responsive

Due to the vector nature of SVG, the image is resolution independent. The image looks crisp on any display from the beautiful ~285 ppi pixel density displays found on new smart phones to the ~85 ppi of standard monitors. 

Using SVG we can stop creating @2x.png images (unless you need to support IE8) and create one file for all of our icons (more on this later). SVG images can also be scaled the same way we scale all other elements in responsive design. (You can keep your image files safe for later in one of these cloud storage options.)

05. It's animatable

Elements inside SVG can be animated to create some truly amazing interactive experiences or the animation can be used to add nice little touches to an interface, image or icon. 

Animation can be created using CSS, the Web Animations API in Javascript or using the SVG's '<animate>' tag. SVG animation is at an interesting point in development. Google deprecated SMIL – SVG's animate tag – in Chrome 45 in favour of CSS animations and the Web Animations API but has since suspended the deprecation. 

06. It's style-able 

Using class names or IDs you can style elements inside of SVG only using slightly different properties to those we would normally use; instead of color we use fill, and instead of border we use stroke. There are some limits to styling SVG and these come from how you're using SVG in the page. If you use an SVG as an image tag you will not be able to style the elements inside in Internet Explorer, there is, however, a polyfill – svg4everybody – which will fix this problem.

07. It's interactive 

Using Javascript we can interact with elements inside of SVG, thanks to the navigable DOM. This allows us to create interactive elements using SVG the same way we would with HTML and CSS. 

We can also apply animations through Javascript using the new Web Animations API allowing both simple and complex interactions and animations to be programmed. There's also a number of Javascript libraries we can use, which have been created to speed up SVG workflows.

08. Its file sizes can be small

Due to the vector nature of SVG (being an image drawn from a set of coordinates) their file sizes when optimised are small when compared to almost any other image file type. 

There are a number of ways to optimise SVG from command line tools to manually removing points and groups but SVGOMG has a GUI and plenty of options to tweak – showing you visually the changes being made during optimisation.

Since SVGs can be responsive, animated and complex, there's no reason you shouldn't use them for big hero images or images on a blog post or other online media.

Next: How to use SVG