DEV Community

Cover image for Benefits of SVG
Alexi Taylor 馃惗
Alexi Taylor 馃惗

Posted on • Updated on

Benefits of SVG

Background

What is an SVG? Well, SVG stands for Scalable Vector Graphics, and they are rendered in XML. This vector image format means that the file size is very small compared to other image types like JPEG, PNG, and GIF. This vector-based rendering also means that SVG can scale without losing any quality, which is great for responsive web design. So why should we use SVG?

Benefits

Smaller File Sizes

Since SVGs are rendered in XML, the file size is small compare to PNG and JPEG. With vector graphics, the data that determines and handles the image's rendering are XML tags with attributes to specify how the elements should be displayed. In comparison, without boring you how PNGs or JPEGs are composed, they are more complicated and more expensive: hence larger file size. Since SVGs have a smaller footprint than their counterparts, this means fewer bytes have to be sent over the wire. This will help boost load time and performance.

Alt Text

Scalability: Pixel-Perfect

SVGs are resolution-independent, meaning they retain the same, pixel-perfect quality no matter what screen size they are being rendered on. Unlike JPG or PNG, where if you try to scale them, they will start to become pixelated and blurry if the image is not large enough. It's possible to have different file sizes types for JPG and PNG, but this requires additional work, and it means sending more data over the wire. Bottom line: SVG's are responsive and look high-quality no matter how much they are scaled.

Alt Text

Stylizing

Since SVGs are just code you can customize and manipulate them with CSS and JavaScript. This ability opens the door to endless possibilities. A developer can easily change the colors by adding CSS classes or changing the SVG attributes to render different SVGs dynamically. One can also use JavaScript to animate the SVG elements. Below I have added a couple of links of animated SVGs to give you an idea of what is possible.

Examples of SVGs:

Performance

Using inline SVGs can help the performance of your app because it will eliminate the need for an HTTP request to load an image file. Since an inline SVG does not require a downloaded file, this will decrease the loading time of the page. This will help improve the user experience as it will allow your page to load faster.

More Than an Image

While an SVG can serve the same purpose as that of their pixel counterparts, they can provide a rich, interactive user experience. SVGs are composed of individual DOM nodes that we can think of as graphical elements that can create complex user interactions. For example, you can create dynamic charts with SVGs. One chart library that I have used in a production, client-facing app is Recharts, which is built on top of SVG elements. Since SVGs are scalable, there is minimal overhead to make the SVG chart responsive. With some JavaScript and CSS, you can create sophisticated features with SVG elements. Here is another example of a Clock with progress ring countdown built with SVGs and React:

Summary

Hopefully, by now, you have a better understanding of the benefits of SVG's and might think twice before using PNG, JPEG, or GIF. In short, SVGs will help with your app's performance, are responsive with their pixel-perfect scaling, and can be highly customized.


Happy Coding 馃殌


If you liked this content, follow me on Twitter @alexi_be3 馃挋


Updates:

07/23/2020: Thank you, Filip Biterski, for pointing out that SVGs are more than just an image.

07/24/2020: As noted by Jan K眉ster:

SVG can validly contain inline JavaScript and thus implies an XSS vulnerability if you allow your users to upload SVG that are then displayed to other users.

So it is vital to sanitize your SVGs whether a user uploads it or if you're importing an SVG from a 3rd party resource.

Top comments (28)

Collapse
 
filibit profile image
Filip Biterski

Nice post, I like that you mentioned CSS and JS manipulations on SVG because many developers aren't aware of that.

I also think that web dev community too strongly associates SVG with images (including you), and in the process neglect how the SVG actually contains individual DOM nodes (graphic elements) that can be dynamically manipulated. With that kind of thinking, there's basically nothing (regarding the UI) one couldn't build in a modern browser using SVG. There are some web apps that do use SVG dynamically to create unique user interactions, mind mapping apps are an example of that, and I've also built one. One could even reproduce the look of HTML of any web page with SVG, though I can't see a reason to do that.

Collapse
 
alexi_be3 profile image
Alexi Taylor 馃惗

Thank you for pointing this out. I updated the article and added a section, "More Than an Image", to address this concern.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Therefore a security risk?

I also realize that there is possibility for HTML inside SVG (inside IMG tag inside Markdown)

Collapse
 
lexlohr profile image
Alex Lohr

One thing that's missing in this list is accessibility: any SVG can have a title tag, nodes are selectable if the SVG is rendered in the DOM context and WAI ARIA annotation attributes will work in modern browsers, too.

One other thing missing here: gradients have a consistent syntax over all browsers supporting SVG. No vendor prefixes required. Only support for SVG filters is still a bit flaky.

Collapse
 
alexi_be3 profile image
Alexi Taylor 馃惗

Yes, a11y is important when it comes to SVG and I plan on creating another article in this SVG series to cover that.

Collapse
 
jankapunkt profile image
Jan K眉ster

Please add, that svg can validly contain inline JavaScript and thus implies a XSS vulnerability if you allow your users to upload svg that are then displayed to other users. All svg that can be uploaded should therefore strip the script tag.

Collapse
 
alexi_be3 profile image
Alexi Taylor 馃惗

Thank you for pointing this out. I added it to the "updates" section.

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Awesome post on it, I found the importance of it when I was required to create buttons for mobile apps. Which makes a lot of difference in your size using SVG as it adds up.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

SVGs can be great for showing complex graphics in an accessible way. I wrote about that recently showing how to create accessible graphs and charts: ashleysheridan.co.uk/blog/Accessib...

You can also do some pretty cool stuff with them. Another thing I created with SVGs was colour blindness simulation filters that can alter the colours across the content of a website: ashleysheridan.co.uk/blog/Testing+...

Collapse
 
jnareb profile image
Jakub Nar臋bski

About the size of images: if the image gets more complex, then SVG might get larger in size than other formats... and you could also get problems with the rendering time. So don't use SVG for photos and similar images.

Collapse
 
badcat profile image
BadCat Design

Speaking of responsive design, Inline SVG Adaptation is a nice benefit too. This post talks about logos specifically, but really any SVG might be a good candidate.
viget.com/articles/responsive-logo...

Collapse
 
wizardofarc profile image
Azi Crawford

I 鉂わ笍 SVGs

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

As SVG would be without doubt, pixel-perfect; it is still an XML. So it can be as bloated as a text file (with unnecessary closing tag). So, possible compression, and are there compressed formats for transport?

Also, is SVG the only supported form of vector graphics on the web?

Collapse
 
rhymes profile image
rhymes

Being text you can send a SVG file with whatever compression algorithm you send other text based formats with. Mainly gzip or Brotli I guess. They can also be cached like other resources over HTTP

Don't know about the other question.

Collapse
 
dualyticalchemy profile image
鈿笍 nothingness negates itself • Edited

include js scripts and use RequireJS/AMD in SVG and download a list of links of base64 converted mp3s to turn the SVG into an on-demand music player (winamp! web-based foobar2000? cmus?!), use the inception trick to process it at a URL without the file extension

Collapse
 
delta456 profile image
Swastik Baranwal

Probably a tutorial for making SVG icons? Nice tutorial btw

Collapse
 
dannyengelman profile image
Danny Engelman

iconmeister.github.io/ makes using Icons in a W3C CustomElement/WebComponent (as IMG or inline SVG) easy

Collapse
 
ashleyo profile image
Ashley Oliver

Implied, but could be explicitly stated - SVGs are just text, like HTML, and thus lend themselves to being programmatically created not just manipulated.

Collapse
 
wizardofarc profile image
Azi Crawford

I made the cover art for a song I released by using a python script to render svg spheres

Collapse
 
ben profile image
Ben Halpern

Really nice post

Collapse
 
skylee91 profile image
Sky Lee

Nice post. Do you know any tools to convert . png or jpg to svg?

Collapse
 
robertlugg profile image
Robert M Lugg

Generally, there aren鈥檛 any. Inkscape can display the image and then you trace it drawing vectors. That is the best way IMO. PNG and jpg typically store pixels so there is no concept of a circle, for instance.

Collapse
 
agredalex profile image
Alex 脕greda

Be careful though with converting .jpg or .png files to .svg, converting more complex images (like an actual picture) to .svg could result on a .svg file bigger than the original .jpg or .png file.

Collapse
 
bawbam profile image
Ivan L贸pez

Nice post!