What is SVG and Why You Should Be Using It
25th March 2018
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.
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
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.
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.
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.
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.