1

I am trying to create a svg for a website, this svg will later be animated (with css & a plugin that removes the hassle).

The artboard is the size of the view for the user, there are other elements in the .ai that will be animated and later on be visible.

How do I save my illustration as svg using Illustrator without losing objects that are outside of my artboard?

A visual representation of what the artboard looks like: A visual representation of what the artboard looks like

A visual representation of what the current export looks like: A visual representation of what the current export looks like

the desired outcome is an .svg that has the same content as the .ai

  • What if you try File > Export... or File > Export selection...? – Joonas Sep 19 '16 at 9:33
  • The artwork boundaries are removed, this means I have no window for what the user is supposed to see. I could solve this by having a wrapper in the website but then calculation of element size has to be done with either calc() or js, this will reduce browser support. (Plus there is no fallback) – Mike Duister Sep 19 '16 at 9:44
  • Is the artwork that's getting clipped a single shape or multiple? If it's multiple shapes are they grouped? – Mysterfxit Sep 19 '16 at 10:37
  • Multiple shapes (hundreds), they are grouped as one object, per piece and per object – Mike Duister Sep 19 '16 at 10:53
  • The bounds are not removed if you use Export selection. It's just adjusted to the selected object(s). – Joonas Sep 19 '16 at 12:00
1

The solution was unchecking Use Artboards when saving, this was confusing because nearly every tutorial teaches you to enable it for use in web.

  • Use artboards works as if you were using the art board as a background i.e. if you want the image to be exported with a particular ratio. This makes it great for Web design but can be a pain sometime I generally export from AI and touch up in Photoshop – Michael Smith Sep 20 '16 at 2:39
0

You don't need to export the user view, you need to export the entire .svg object.

The code will deal with what the user will see, even with animation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.