Please size your inline SVGs

Digital art. A blueberry with arms and legs like a person. It’s sitting on the ground with its back to the viewer and is clearly crying. The tears are pooling around it on the ground.
Credit: Aaron Gustafson × DALL·E

While it is a bit of an edge case, every now and then I’ll hit a site—yes, even a high profile one—and the CSS will fail to load for some reason. When this happens, inevitably every inline SVG resource on the page will grow to fill the entire width of my viewport, making for a really awkward experience.

What’s the issue?

Not to pick on anyone in particular, but consider this example from a recent talk I gave:

The U.S. Transportation Safety Administration’s TSA PreCheck® landing page, with CSS applied.

When CSS fails to load, however, check out what happens:

The U.S. Transportation Safety Administration’s TSA PreCheck® landing page, without CSS applied. Note the **huge** SVG.

Yeah, that’s an inline SVG. You see, without any explicit dimensions set, the SVG will naturally grow to become as large as possible. Chances are you’re constraining that growth in CSS somewhere, but when your CSS fails to apply for any reason, every inline SVG on your site will swell like Violet Beauregarde after eating Willy Wonka’s “three-course dinner” chewing gum.

How do we solve this?

Thankfully, this is a pretty easy situation to avoid: just set an explicit width and height. To use an example from this site, instead of saying

<svg viewBox="0 0 38 48"

You can explicitly set the width and height in the svg element like this:

<svg width="38" height="48"
viewBox="0 0 38 48"

What you set these values to will likely vary depending on how the icon is being used. In a pinch, you could also pull the values directly from the viewbox value. And using that value, you could even make the inline values dynamic within your template, reading in the viewbox values and tweaking them to a ratio specific to the context.

Setting the SVG’s dimensions inline like this doesn’t restrict their flexibility either. You can still use CSS to override these inline values and set the SVG to whatever size you wish:

svg {
inline-size: 200px;
block-size: 200px;

I’ve thrown together a quick comparison over on CodePen so you can see the three different states:

And now that you know, please, please, please take a few minutes to make this small, simple change to your websites. While not a catastrophic issue, taking care to control how your sites render in the worst of circumstances goes a long way to demonstrating thoughtful consideration of your users.

Update: For more in-depth info on this topic (and scenarios where CSS isn’t applied to your SVGs), be sure to check out this piece from Sara Soueidan.


  1. @Aaron +1 I have been burned by this on one too many occasions.

  2. @Aaron this is extremely and perfectly useful, thank you for the tip!! i have definitely struggled with this exact problem but didn't have the energy to look into what exactly was causing it :)

  3. @Aaron, thank you for writing about this! I thought I was the only person to use @jaffathecake 's Svg Optimizer and then put more code at the result!


  1. Dan Ryan :dryan:
  2. Brett Kosinski
  3. Angela "Ge" Ricci
  4. Stéphane Deschamps
  5. ffoodd
  6. Jean-Pierre Vincent
  7. Axel Rauschmayer
  8. sombriks
  9. Zach Leatherman
  10. Tyler Sticka
  11. Assaf
  12. Pelle Wessman
  13. Vesa Piittinen
  14. Ivan Herman
  15. Sobral
  16. Christian Niklas