With universal support across desktop and mobile, now is the time to discover the benefits of SVG graphics.
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.
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. (Save your images in cloud storage.)
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 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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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
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.
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?
SuperFriendly Director Dan Mall will share stories and perspectives to answer these questions and more in his talk at Generate New York from 25-27 April 2018.
This article originally appeared in Issue 267 of Web Designer, the creative magazine offering expert tutorials, cutting-edge features and essential resources. Subscribe today.
Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.
