Get your SVGs out of your HTML

After this holiday season many of us would like to lose a little weight, page weight that is. In my app CodeTriage I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire” bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.

On the main page I have a “warning” icon that is SVG. It looks like this:

I had it defined as a Rails “helper” that would be rendered directly into the HTML. This element was repeated many times on the page, each time we had to send the exact same SVG string which added the same number of bytes to the page size. To fix the issue I moved the SVG code to my image directory and then I used Sprockets to “inline” the image via a data-url.

How does a data url work? Normally a url in the background of a CSS element would say “go out and grab this asset at a different URL. A “data” url instead encodes all the data needed to render the image without making a new network request. Here’s an example of what one might look like:

The asset-data-url is interpreted as a directive, it takes the contents of the warning.svg image and “inlines” them so that no extra HTTP request needs to be made. If you’re using ERB then it might look like this:

Now when you visit the page, the SVG element is only sent once over the wire via application.css, and is then re-used many times via the warning-svg class. This means that it takes less time to download the HTML for end users, and since the assets are served with far future cache headers, they will only be downloaded once by the browser. Even better, the site is being served behind the cloudflare CDN, so there is no additional burden on the app server for the slightly larger CSS files.

Are there any downsides? The biggest issue of this approach (for me) is that I lost the ability to control the fill (color) for the SVG element via CSS. Previously with the SVG in the HTML, if I wanted to change the color of an element, it was very simple, I did it in CSS. Here’s an example of changing fill color to red on hover using CSS:

Once I moved the SVG element out of the page I wasn’t able to make this type of modification through pure CSS. For this case I settled on transforming the element to make the hover state apparent instead:

If the color change was absolutely needed, then I could have generated two SVG elements with different fill values and changed the background element on hover. You can see a stack overflow thread on alternatives.

In addition to using the “warning” SVG on the main page I also use it on the “repo show” page, but it had a different fill. It was gray instead of white. In this case it wasn’t appropriate to get rid of the color change; however I was able to approximate a color change by using the opacity CSS property which will affect the SVG element.

If you don’t want to use a data url in CSS, you can also render it as a normal image via <img > tag. You can also leverage the use tag which lets you send the element once via HTML but then re-use and manipulate as if it were directly in the HTML.

In my case all of the elements being rendered were present in the vast majority of my pages, so it makes sense to put them in places that will be globally cached by browsers and my CDN.

Some notes on converting a SVG element into an inline CSS element: You’ll need to make sure you’re setting a height and width to your element since the SVG is only the “background”. You’ll also need to make sure that the SVG is being formatted and served properly. For me I had one SVG element that was missing the xml declaration:

<?xml version="1.0" encoding="UTF-8"?>

And the same one was missing the xmlns="http://www.w3.org/2000/svg" property. If you click on the image url via the CSS inspector in your browser, it should show you if there are errors. You’ll also need to explicitly set a fill property in the image, otherwise they will default to black.

While there are still reasons you might want to put your SVG elements directly in your HTML, consider the page weight implications and costs first.

Update 1: Looks like you can use the <use> with an external source meaning that you get the benefits of HTTP caching and a re-usable element along with the ability to style it as if it were inline. Here’s more info on External SVG with the use tag. The only downside is it’s not supported natively with IE, but there is a polyfill. Thank’s to this comment on lobste.rs.

Update 2: On Reddit it was mentioned not to use “background” for an icon. Here’s a good explanation of why, and an example of what you could use instead Comments on Reddit.

BTW you may have noticed that I haven’t posted anything in awhile. I had a baby (my second) and I’m taking 2 months off for paternity leave. I may post a bit about fatherhood or other thoughts, but don’t count on any kind of a regular schedule. My priority right now is my family (I wrote this post before the little one came along).

Subscribe to my Newsletter 😻 🤠

Keep Reading 🚀

Today I have an unusual proposition for you. I’m spending a bunch of time to try to get Beto elected to Texas Senate, so I’ve not been able to write as much technical content. Rather than slow down on my door knocking, I’m looking to pick up the pace, and I want you to do it with me. Starting today, I’m offering anyone who phone banks or “block walks” (knocks on doors) the opportunity to win some of my technical time. Here’s how it’s going to work.

You might know rubocop as the linter that helps enforce your code styles, but did you know you can use it to make your code faster? In this post, we’ll look at static performance analysis and then at the end there’s a video of me live coding a PR that introduces a new performance cop to rubocop.

Rails 5.2 was just released last month with a major new feature: Active Storage. Active Storage provides file uploads and attachments for Active Record models with a variety of backing services (like AWS S3). While libraries like Paperclip exist to do similar work, this is the first time that such a feature has been shipped with Rails. At Heroku, we consider cloud storage a best practice, so we’ve ensured that it works on our platform. In this post, we’ll share how we prepared for the release of Rails 5.2, and how you can deploy an app today using the new Active Storage functionality.