SVG Quick Tip: Use a background rectangle

[PointC]

I’ve talked about this in other threads, but I think it’s worth making a standalone tip for it so here we go.

 

There are three things that will eliminate coordinate surprises and weird transforms with your SVG exports.

1. A background rectangle
2. A background rectangle
3. A background rectangle

 

Yes, it’s that important.

Take this simple 600 x 200 SVG. Nothing but a circle, rectangle and a blobby path. Here’s how it looks in Adobe Illustrator. You’ll see that I also have a background layer with a 600 x 200 white rectangle in it. 

 

 

Exporting that SVG produces this result:

 

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
  <g id="Background">
    <rect width="600" height="200" fill="#fff" />
  </g>
  <g id="Children">
    <circle cx="100" cy="100" r="75" fill="#75131a" />
    <rect x="225" y="25" width="150" height="150" fill="#136036" />
    <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" fill="#0071bc" />
  </g>
</svg>

Exactly as I’d like. A 600 x 200 viewBox and everything is positioned where I expected it.

Now, what if I didn’t use the background rectangle? Here’s the export result after removing it:

 

<svg xmlns="http://www.w3.org/2000/svg" width="554.65" height="178" viewBox="0 0 554.65 178">
  <circle cx="75" cy="88" r="75" fill="#75131a" />
  <rect x="200" y="13" width="150" height="150" fill="#136036" />
  <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" transform="translate(-25 -12)" fill="#0071bc" />
</svg>

You can see the viewBox has now changed to 554.65 x 178 instead of my artboard size of 600 x 200. The circle and the rectangle no longer have the coordinates I expected, and the blobby path has some weird transform applied to it. This is only three simple elements and it’s a bit difficult to animate with precision. Now think about complex SVGs with multiple paths and how this could cause problems with your animations.

 
Bottom line: use a background rectangle the same size as your SVG, export your code and then delete the rectangle if you don’t need it.

 

Hopefully this info helps with your SVG projects. Happy tweening.

[TommyDunn]

This just saved me. Thank you for sharing!