Scalable Vector Graphics (opens in new tab) 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.
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
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.
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 (opens in new tab) – which will fix this problem.
07. It's interactive
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 (opens in new tab) 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