SVG Tips and Tricks for Inline

In this post I just want to share a couple of SVG tips regarding inline SVG. My inspiration for this series of articles is that I was trying to update a web site with a bunch of inline SVG, and I ran into a couple of issues. Some of the SVGs I found looked fine as stand-alone images, but looked pretty crappy when inlined in the HTML. In the past when I’ve hit such issues, I usually just found a different SVG or created my own, but I was using a lot of SGV for images like the Microsoft PowerApps logo. I didn’t want to use a different images, and I don’t really want to produce my own version of the image, so I needed to learn a bit more about SVG under the hood, and it turns out it wasn’t that hard to figure out.

SVG Tips #1: Beware of Display None

I’m going to start with an HTML page to display four SVGs. I’m expecting the result to look like:

Now I didn’t actually create these SVGs from scratch. I downloaded them from various sources. Then I put them inline in my HTML, without necessarily understanding all of the internal details of these SVGs. Which is wherein the problem lies. Here is my initial code:

And here is what that initially looks like:

Yeah…well…that’s not right, nor is it pretty! There are actually numerous issues with this code, all of which are highlighted in the above source. It looks like a lot, but there are really only 2 classes of errors in this HTML. I’m going to address only the first one right now. Like in my previous post, I defined all of the SVGs as symbols in a single SVG at the bottom of the HTML, and then I just reference those symbols where I want the individual SVGs to appear.

The SVG at the bottom doesn’t actually contain anything that is visible to the user. It only has symbols, it doesn’t also use those symbols. But left to it’s own devices, the browser will reserve space for this SVG (chrome makes it 300×150 because I didn’t specify a viewBox). I don’t really want that, so I’ve set the display to none in the style for the SVG. I did the same thing in my last blog post, but didn’t explain it. Turns out, that’s not such a bad thing, because it’s a bad idea.

The problem is that some elements within an SVG are not displayed if the symbol is display none, even if the SVG that is using the symbol is displayed. Why it’s just some parts is what’s confusing to me, but it is what it is. In this case, the primary culprit is the linear gradient filter elements. To fix it, I just change style=”display:none;“ to style=”display:flex;height:0;“ and that fixes it. Now I’ve got:

And of course, that’s not what I was expecting either, but that’s because I haven’t fixed all of the other highlighted issues above. I’ll deal with those in the next section, but first of my SVG tips: don’t use display none to hide an SVG of symbols that you intend to use elsewhere. Instead, set the height to 0 and the display to flex (without setting display to flex, there is still a little height reserved for the SVG).

Beware of Duplicate Ids

All of the other errors in the above HTML are the same issue, duplicate element ids, which makes the HTML invalid. The problem is that SVGs are generally drawn in an editor like Adobe Illustrator, and it has a lot of choices how to represent what you draw in XML. It can assign ids to elements and then reference them elsewhere. But it is creating a standalone SVG file, so it can create simple ids like clip0 without worrying about conflicts.

But that’s not the case when you lift and shift the entire SVG into an HTML page. There are now a bunch of other elements with ids, including possibly a bunch of other SVGs, and if any of those also use clip0 as an id, you’re leaving it up to the browser to resolve the conflict and you probably won’t love the result. So second of my SVG tips: make sure all ids are unique within a given HTML file. That’s just straight up HTML, not really specific to SVG, duplicate ids are illegal in HMTL.

To resolve this, I’m going to:

1. In the HTML source, do a search and substitute for clip0.
2. Inside the PowerAutomate SVG, I’ll add a prefix to change clip0 to powerautomate_clip0.
3. Inside the PowerApps SVG, I’ll do the same, but change to powerapps_clip0.

Ok, one down, a bunch more to go. I just search for id=, and in VSCode it highlights all hits so I can quickly scan through the SVGs and look for ids that look pretty generic, and then change them to something more specific to the SVG. Don’t just replace the ids that conflict right now, do them all. It will potentially save you some trouble down the road if you add more inline SVG.

After making these changes, my HTML looks like this in the browser:

Much better!

Note that the only issue I had remaining was duplicate ids, but you can have the same sort of issues with duplicate class names. SVG editors will sometimes put classes on paths, and add some inline CSS to define the fill, stroke, or linear gradient of the path. Again, they generally produce very generic class names like S0, which they ensure are unique within the SVG, but once you copy it inline that could be a problem. The solution is the same, search for class=, look for generic names, and add an SVG specific prefix for each class name within each SVG.

Sum Up

Armed with a bit of knowledge about the internals of SVG, they are a powerful tool for spicing up a web site or GUI. Here is the final code: