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.
Fun with Inline SVG
Fun with Inline SVG
Inline SVG is one of those things that I’ve used for years, but never quite taken the time to understand. It’s easy enough to just copy it into an HTML page and hack it to bend it to my will. I’m very fond of inline SVG for icons in web applications for a few reasons
- It is relatively inexpensive, meaning you can create some pretty icons for image buttons without a heavy download and it compresses well.
- It scales to any size (except tiny, and what qualifies as tiny depends on how complex your image is, as in you’re not going to have a lot of detail in a pixel?).
- You can modify it dynamically with CSS or JavaScript.
I’ve seen some alternatives proposed by developers over the years to scratch some of the same itch, but not anything I like as much as inline SVG, for instance:
- Custom font-based solutions like Font Awesome: the problem with these, for me, is that many enterprises block custom font downloads in group policy, because of very real security concerns.
- Emoticons – size-wise, these are certainly appealing, you get some nice images for only a character each, and they’re built into the browser, no image download required. But you have a limited set of icons to choose from, and if they don’t have what you need, you find yourself using an image that doesn’t quite match the action of your button, and that can understandably confuse your users. And historically, different browsers used different characters for the same icon, as in they got ahead of the spec. And ultimately, to make everybody happy, the spec often ended up using either character for that image, which is messy.
So I’ll stick with inline SVG, and given that it’s well past time I dug a little deeper into understanding them. This blog post is my attempt to get started with that.
So now that we’re settled on SVG, let’s take a look at some: