SVG is becoming more and more popular in the digital world. With such a dramatic increase in usage, there are many driving factors that are causing designers and developers alike to start using SVG.
SVG stands for Scalable Vector Graphic and is an XML language and format. SVG is normally used in web design for images and animations. From a technical point of view, SVGs are created by plotting a list of coordinates on an X and Y Axis. When the SVG is generated in the browser, a list of instructions is sent that joins the plotted coordinates together. As a result, we are able to create lines and shapes that piece together to create the desired graphic.
So that all sounds fine and well, but there is a list of compelling arguments that boosts the profile of SVG and can offer an explanation as to why so many designers and developers are now turning to SVG as opposed to the more regular JPEG, PNG and GIF formats.
1. Scalability
One of the key luring factors is the what the “S” stands for in the name – Scalable. SVG can be set to any width you require and it will scale without any loss of quality. This a massive timesaver for designers who are used to creating mobile, tablet and desktop versions of images for various screen sizes.
The other key benefit is that SVG is resolution independent, meaning that it will appear exactly the same in a design that is 72 DPI as it would in a 300 DPI alternative. As a result, SVG can be used in both print and web media.
2. Faster Loading Times
One of the big misconceptions about SVG is that the file sizes are much larger than the common image file types – this is a myth. SVG is often much smaller than the bitmapped alternatives as it does not have to map any unnecessary dots in the background of images.
When large dimension PNGs are produced for retina displays, SVG simply does not require such special attention. This is because it scales regardless of resolution and creating larger images for retina displays is simply not a requirement. As a result, page loading times are slashed and the performance of your website is enhanced. SVG has a slew of tools that allow them to be optimised such as SVG OMG and SVG Minifier.
Another fact about SVG that often is overlooked is that they are embedded into the HTML of a webpage, rather than using an external location. For instance, SVG appears as XML that fits in with the markup of the page, whereas a JPEG would require a reference to an external image file. The key improvement being that the number of HTTP requests are reduced and the page can load even more quickly.
3. Separate DOM
Similar to an iframe, SVG effectively is a DOM (Document Object Model) that is positioned within the regular DOM when the browser renders the page. The SVG can be created on a canvas at a certain size and then be displayed in the browser at a different size, which is handy for responsive content. The additional DOM also opens up potential manipulation via CSS and JavaScript.
Furthermore, the potential for editing SVG on the DOM is significantly improved when you consider that you can use SVG images multiple times on the one page and display each one at different sizes in order to fulfil a specific purpose
4. Add Custom Styles
It is possible to add classes and IDs to an SVG. From there, it is possible to edit the colour, height, width and opacity of elements of the SVG using CSS. Use the Inspect Element on any modern browser and it will show the properties that can be edited for each SVG.
More often than not, the property will be Fill, rather than Colour and Stroke rather than Border. The styles can be edited on all modern browsers, however if you need legacy support on Internet Explorer, you can use SVG4EveryBody.
5. Interactive
Now that you know what styles that we can change with SVG, now let’s take a look at what events we can hook onto in order for those changes to take place. By leveraging JavaScript, we can allow our custom styles to take place to our SVGs when the user hovers over the object, when a button is clicked or a key is pressed as well as on page load or page resize.
The ability to use JavaScript to alter SVGs provides our web applications with an added dimension of interaction and can greatly improve the UX of the application as a whole.
6. Animation
Recent developments in CSS have allowed us to create custom animations of page elements and SVG is no different. We can create basic animations such as fade in / fade out, colour transitions, growing and shrinking content as well as adding rotations.
More complex animations allow for visually appealing effects, such as blowing bubbles, flying content such as birds or planes as well as preloading animations. SVG animations are becoming more and more common in web design, such as navicon on click animations, a scroll-down mouse animation and animated loading of text.
Most of the above animations can be created using CSS, however JavaScript can be leveraged using the tag that is found within the code of an SVG. Common JavaScript libraries that use SVG are Chartist.js and D3.
7. Improved Browser Support
As of March 2018, SVG works in all major browsers, which is a big plus for those of us with followers using a diverse range of browsers. The main legacy issue lies with older versions of Internet Explorer, with current support levels going back to IE9. For those who are unfortunate enough to be using such as outdated browser, there are some fall backs available such as SVG4EveryBody.
It could also be an idea to use feature detection tool, Modernizr to detect when an older version of IE is being used and then using JavaScript to switch to a PNG equivalent whenever required.
8. Accessible and Search Engine Friendly
SVG can be used in <img> format and therefore be given a descriptive filename and ALT text that will allow search engines to crawl the page and improve overall rankings.
Aside from the conventional methods of SEO, additional options are available with inline SVG. With SVG being in XML format, it is possible to add in meta data such as titles and descriptions that provide further support for search engines and provides you with another method of improving your SEO overall.
What Conclusions Can We Make?
In respects to balance, it is only fair that a few drawbacks of SVG are mentioned: the browser legacy issues can put some people off due to the extra effort required to making sure they work properly on all the user’s devices. Further to that, large, complex banner images can be a resource hog when SVG is used and it may be better to stick to JPEG for those types of images. That said, SVG is better suited to low intensity graphics such as logos, icons and simple banner graphics.
Overall, it is clear that SVG has many benefits and with some of its capabilities being invented only recently, it is only the beginning in terms of innovation and realising the full potential of SVG.