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

[TheNomadicAspie]

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?

[Joely]

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.