Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PointC

SVG Quick Tip: Use a background rectangle

Recommended Posts

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. 

 

qjvyTyj.jpg

 

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. :)

  • Like 8
Link to comment
Share on other sites

  • 4 weeks later...

This just saved me. Thank you for sharing!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×