Scalable Vector Graphics (SVGs) are image types that are universally supported across all desktop and mobile browsers. The benefits of using them for web and app design are huge – let us talk you through the six biggest reasons.
01. It’s resolution independent and responsive
Images can be scaled the same way we scale all other elements in responsive web design. 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 smartphones, 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. SVG images can also be scaled the same way we scale all other elements in responsive design.
02. It’s got a navigable DOM
03. It’s animatable
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.
04. 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 that 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.
05. It’s interactive
06. Small file sizes
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 SVG’s 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.
Designers - stay relevant and effective
It’s no longer enough to be a Photoshop master. Designers need to grow their skills in order to stay relevant and effective, but which are worth focusing on? Should designers learn to code and, if so, can limited code knowledge really make a difference working with talented engineers? How can designers fit into Agile workflows? Does project methodology even matter anyway? What role does a designer have in creating, using, and maintaining design systems?
This article originally appeared in Issue 267 of Web Designer, the creative magazine offering expert tutorials, cutting-edge features and essential resources. Subscribe today.