Scalable Vector Graphics: A Guide to SVG

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.

Conclusion

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.

Useful Resources

SVG Pocket Guide
SVG Tutorial

Our Latest Posts

The Digital Den provides you with the latest tools, trends and tutorials that can be added to your digital toolkit. We discuss a range of digital topics such as web development, digital design and search engine optimisation.

August 2024
5 Mobile UX Principles for Responsive Websites
View Post
February 2024
How to Add an Instagram Feed to Your Website
View Post
November 2023
Improve the Page Speed of Your Website Checklist
View Post

Do You Prefer Shorthand Content? Try The Digital Den Scrapbook.

Feel free to check out The Digital Den Scrapbook for quick-fire posts about design, development and SEO.

We provide a range of digital offerings in the form of guided tutorials, tool reviews and the latest news updates.

View Blog