Things missing when I export to .svg

[taropuffgirl]

Hi all,

So when I export files from illustrator to svg things end up missing. However, when I look at the icon of the file it looks like what it should look like. It's when I click on it things start to get messy.

what the icon should look like (and what the icon of the file looks like on the desktop):

what the icon ends up looking like when viewed in Illustrator:

The file can be downloaded at:

Dropbox - lock icon.svg

Thanks!!

[Mylenium]

None of that has any meaning if you don't show us and explain how you actually create the artwork. It simply seems you do not understand how SVGs work and what the limitations are and do not prepare your artwork accordingly like expanding strokes and reorganizing layers and groups.

Mylenium

[taropuffgirl]

Hi Mylenium, I thought by attaching the file you could see the process behind creating the artwork. But no matter. I originally created the artwork in Sketch, although the program is notorious for distorting SVG files when exporting. So, I copied the lock and pasted it in Illustrator, grouping it before exporting. The odd thing is that this method works for the majority of time when exporting - I usually do not run into a problem. If there are some tips you'd like to share about expanding strokes and reorganizing layers and groups I'll gladly hear it. Thanks!

[Monika Gause · Accepted solution]

The process of copying and pasting might already have ruined the structure.

As for expanding strokes: How to group and expand objects in Illustrator

As for the structure of the SVG: you need to talk with the web developer to check what they need. Then analyze the artwork in Illustrator's layer panel and create whatever it needs to be.