DEV Community

loading...
Cover image for Benefits of SVG

Benefits of SVG

Alexi Taylor 🐶 on July 22, 2020

Background What is an SVG? Well, SVG stands for Scalable Vector Graphics, and they are rendered in XML. This vector image format means t...
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 🐶 Author

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 🐶 Author

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 🐶 Author

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
jfbrennan profile image
Jordan Brennan

That’s a good point. SVG is no replacement for JPEG if the content is a photograph

Collapse
hseritt profile image
Harlin Seritt

Thanks for posting. Sounds like SVGs are the way to go with web images. I am wondering though, what would be the benefit of using more static images like jpg and png's over SVGs (if any)? Just curious.

Collapse
jfbrennan profile image
Jordan Brennan

For some use cases, yes. But JPEGs are best for photographs (product catalog, social feed, etc.). SVG should not be used for those kinds of images.

Collapse
hseritt profile image
Harlin Seritt

"But JPEGs are best for photographs (product catalog, social feed, etc.). SVG should not be used for those kinds of images." -- Why and how come?

Thread Thread
jfbrennan profile image
Jordan Brennan • Edited

Because there are no silver bullets.

SVGs are a vector format, which means the image data is a bunch of geometry stored as text. This makes them great for shapes and logos and even detailed illustrations because that’s what those images are - geometric shapes filled with color.

JPEGs are bitmap, which means they store image data as a map of colors to pixel locations. The kind of detail real life images require is best represented at the pixel level, so JPEG which is a bitmap format with a really good compression algo are best for real life images. Getting the same quality from an SVG, which for some photos may not even be possible, would result in an insanely large file.

Another misconception about SVGs is they’re the best for icons. I don’t think that’s true either: dev.to/jfbrennan/svg-icons-are-not...

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
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
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
wizardofarc profile image
Azi Crawford

I ❤️ SVGs

Collapse
ciego_ profile image
J-Ciego

Hi, nice post!, but i have a question, you can create a floor plan/map with svg and manipulate the properties like room, etc....? (If you know any example, i will apreciate)

Collapse
alexi_be3 profile image
Alexi Taylor 🐶 Author

I updated the article with a "More Than an Image" section with an example of how to do this.

Collapse
bawbam profile image
Ivan López

Nice post!

Collapse
idoshamun profile image
Ido Shamun

One thing to note is that inline svg can increase your bundle size so you have to think about lazy loading the svg. Depends on the exact use case.

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
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’t 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
airmind 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
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
hassan_a1991b profile image
Hassan

absolutely svg is the nice tool for image. but you know i think svg is a little complex and I never make one of them easily. because its code is so comlicated.
anyway
thanks