Aaron Gustafson: Content tagged SVGThe latest 20 posts and links tagged SVG.https://www.aaron-gustafson.comAaron Gustafsonhttps://www.aaron-gustafson.com2023-08-21T21:11:09Zhttps://www.aaron-gustafson.com/notebook/please-size-your-inline-svgs/<![CDATA[✍🏻 Please size your inline SVGs]]>2023-08-21T21:11:09ZWhile 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

<svgviewBox=“0 0 38 48”version=“1.1”xmlns=“http://www.w3.org/2000/svg”></svg>

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

<svgwidth=“38”height=“48”viewBox=“0 0 38 48”version=“1.1”xmlns=“http://www.w3.org/2000/svg”></svg>

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.

]]>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.

]]>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.

]]>https://www.aaron-gustafson.com/notebook/links/svg-can-do-that/<![CDATA[🔗 SVG can do THAT?!]]>2017-08-25T19:03:11ZThis is an incredible presentation by Sarah Drasner on many of the very cool things you can do with SVG. So much inspiration!

]]>