Use a background rectangle with SVG exports

You’ve created the ultimate super cool vector graphic with a whole bunch of precisely placed elements. Time to animate this baby! You export only to find out all of your coordinates are not what you expected. There are also transforms on some elements. What happened???

A background rectangle saves the day

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. 

Exported code with a helper rectangle

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.

Exporting without a rectangle: uh-oh

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.

Make it a habit to start with a rectangle

Start each project by adding a background rectangle using the same size as your desired SVG output. You can put it in its own layer and lock it until it’s time to export. If you don’t need the rectangle for anything, you can delete it when you’re done with your SVG exports.

Hopefully this info helps with future SVG projects. Until next time, keep your pixels movin’.