I've been a big supporter of using SVGs on web. They give you nice and sharp graphics which can be scaled to any size and can be animated too, it's just great!
But while there are many upsides of using SVGs on web, there are few bad parts as well. Let's take a look at a few issues that you might face while using SVGs in production.
Code bloat
There's a lot of code bloat while using inline SVGs. A fairly simple SVG can contain a number of paths, and shapes which can take up many lines of code.
<svg xmlns="w3.org/2000/svg" viewBox="0 0 700 400" id="icon">
<path fill="#000" stroke="black" stroke-width="1" d="........." />
<path fill="#FFF" stroke="black" stroke-width="1" d="........." />
...
...
</svg>
Even when you're using some simple icons, the amount of code can be substantial as most SVG icons/illustrations are not optimized for web and contain a lot of unnecessary points and paths.
This makes your code look messy and causes trouble with code editors like atom which cannot handle the huge amount of code.
External referencing is an issue
One great thing with SVGs is that you can dump all your svg code into a single .svg file and reference them with the code using the <use> tag, it's like having an image sprite.
// referencing to icon-1 in icons.svg
<svg>
<use xlink:href="/icons.svg#icon-1"></use>
</svg>
I've written another story on this if you want to dive deep.
Now, referencing is pretty great feature, isn't it? There's a catch though: "You can only reference SVGs if they are on the same url".
This means that you cannot do something like this:
<svg>
<use xlink:href="some-cdn.com/icons.svg#icon-1"></use>
</svg>
This means that you cannot put your SVGs onto a CDN and load them externally. You can check the bug here.
Styling issues with Referenced SVGs
When using an inline SVG, you get to control the styles with CSS. So you can apply different fill and stroke properties to SVGs the inner path, shape, etc. However, when you reference an SVG using with a <use> tag, all the inner paths and shapes are hidden from the DOM.
This means, when you are referencing a complex SVG with many shapes and paths, you won't be able to style any of the inner path.
Absence of viewBox in CSS
viewBox attribute in SVG provides a region for our SVG content do display in, it basically sets the aspect ratio for the image.
You can set a region in the viewBox attribute and the SVG will show only that part of the image regardless of the other shapes present inside.
viewBox being an attribute, cannot be altered using CSS and there's a serious need of a viewBox property in CSS.
Here is an in-depth article by Sara Soueidan about Why We Need A viewBox Property in CSS.
Browser inconsistencies
"With SVGs you always need to cross browser test". The browser implementations of SVGs are not very consistent, so something that works in one browser might fail in some other one.
The inconsistencies aren't very well documented, and can cause a lot of trouble if you run into these bugs.
Una Kravets writes in detail about the browser inconsistencies she encountered during her work.
Conclusion
Now there definitely are more problems with SVGs, these were just a few ones that I've encountered till now. This however does not mean that they are any less powerful, all these problems can be solved and there's always room for enhancements.
Hope you enjoyed reading this, Do share your thoughts in the comments! 😊