Skip to content

Latest commit

 

History

History
64 lines (32 loc) · 2.67 KB

predictable-svg-xml.md

File metadata and controls

64 lines (32 loc) · 2.67 KB
Raw

Predictable SVGs: Knowing just enough XML

I do a lot of work with SVGs at IBM.

We make them available to be used in very simply because they're used as icons in the product we build. There's only a small subset of things that these SVG icons need to do but here are the two important ones:

Our SVG icons need to be able to change their size and color with CSS. That's it.

So when it comes down to modifying SVG icons, there are only 4 XML attributes I wanted to understand first: fill, viewBox, width and height.

The only way I've been able to get consistent, predictable results is when I ensure that viewBox, width and height attributes are always together on the <svg> wrapping element.

Forget everything you know

Okay, well, not everything but just here me out...

I know you know these attributes work together in a coordinate system...but I've had to tell myself, "Hey, forget about that for now. You're not doing anything too fancy with these SVGs."

Here's what seems to happen...

Let's start with the <svg> wrapping element.

<svg width="24" height="24" viewBox="0 0 24 24">
  ...
</svg>

Get ready for some air quotes.

We can control "sizing" with width and height.

  • You can override these attribtue values with CSS
  • The SVG will keep its aspect ratio intact, so you won't see any weird stretching or shrinking when you do weird size changes.

We can control the "parts of the SVG you actually see" with viewBox.

  • viewBox is like defining the size and position of a "window" to view the SVG icon. For example:
    • A "window" that is too small will show a small part of the SVG.
    • A "window" that is too big will show the entire SVG and some of the background it's on.
    • A "window" that is sized and positioned just right...well, it shows the entire SVG; no more and no less.

Bottom line: Make sure these attributes are always present and they should always match.

But, what's actually happening?

Okay...now for the truthy bits.

Width and height control the viewport of the SVG. You can see what I mean when the viewBox is removed. Notice how increasing the width and height of the SVG doesn't actually make the SVG bigger?

See the Pen Inline SVG width and height by Brian Han (@brianhan) on CodePen.

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>