Skip to main content
T
TheNomadicAspie
Participant
August 11, 2021
Question

Exporting each layer of Illustrator file as SVG maintaining relative position and size

  • August 11, 2021
  • 1 reply
  • 669 views

I have an AI file with three layers (Head, MagnifyingGlass, and ProgressTracker (The circle).

 

I'm trying to export each of them as SVGs so I can use them in a web app without having to manually adjust the CSS stylings of each layer (So they can be moved and resized together).

 

To do this I reduced the size of the artboard to the size of the largest layer, deleted each layer except the one I wanted, then did File > Export As > Saved as SVG > Unchecked Responsive. Then I undid the delete layers, and repeated the process with the other two.

 

I thought this would work, but when laying them together with the same CSS styling, this is what happens (Left is the original image with the three layers in Illustrator).

 

What am I doing wrong?

This topic has been closed for replies.

1 reply

Joely10623436
Community Expert
Joely10623436Community Expert
Community Expert
August 12, 2021

Why deleting layers?

I suggest using 3 artboards with your 3 objects (and then export artboards as svg with one click)

or just hide/show the layers (click on the eye Symbol).

 

Try to place an empty/transparant shape with the size of your largest symbol/icon.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices