How do you preserve element id's when editing an SVG in Adobe Illustrator?

Question

I am working on a process in which we will generate SVG's with id's on certain elements. I want to be able to edit the SVG in Adobe Illustrator. However, I found that when I edit the file in Illustrator, the id's are all changed.

Can Illustrator be made to keep my id's?

Answer 1

I've been trying to use Illustrator with svg for a few years now, with mixed success. It usually preserves the IDs, if you save in in the most permissive format (SVG 1.1); but it really loves to rewrite the various svg elements into it's own way of thinking about them. I strongly recommend not using Illustrator to edit svg files that you want to have clean and careful markup in. You might use Inkscape instead.

Answer 2

So I know this question was asked a long time ago. Since Inkscape is pretty slow through x11 on Mac, I decided to post my solution here in case it helps someone else.

If you have python installed on your mac, you can use this script to modify the svg before you open it in illustrator. Then after you're done editing, basically do the opposite to post the new attr back to the id field. Kind of wonky, but the performance of illustrator made it better than suffering with Inkscape for me -

from bs4 import BeautifulSoup

svg = open('myawesome.svg', 'r').read()

soup = BeautifulSoup(svg)

paths = soup.findAll('path')

for p in paths:
    p['inkscape:temp_id'] = p['id']

    html = p.prettify("utf-8")
    with open("output.svg", "a") as file:
        file.write(html)

The trick here is to open the original SVG in a text editor and replace the path's with the output of this script. When you're done in illustrator, copy this python script and copy 'inkscape:temp_id' back to p['id'] (the opposite of the first time) and then you're set.

Hope this helps someone out there. I wasted 4 hours today figuring out how to preserve element ID's in illustrator for a project I'm working on and this is the best I could come up with. Good luck!