An internet radio show about the internet starring Dave Rupert and Chris Coyier.

Subscribe on iTunes or RSS


129 With Sara Soueidan

01:06:19 Download


Sara Soueidan

Web // Twitter

Sara is freelance front end web developer, author and speaker.

Show Description

This week we were joined by Sara Soueidan. We take a deep dive into the world of SVG.

Show Sponsors

Interested in sponsoring?

Time Jumps


  • Pepijn Olivier

    In some of our web projects, we like to make an interactive SVG. We do this by manipulating SVG elements by ID. A big issue is that Adobe Illustrator oftentimes renames these ID’s upon saving the file. This is why we now find ourselves in need of using Inkscape rather than Illustrator. But of course we would prefer to do this in illustrator if it would not change ID’s randomly. Do any of you have any tips or insights on how to avoid this?

    • Renaming in Illustrator occurs in two case (afaik):
      – when ID with the same name already exists in the svg (since ID should be unique), then next ID gets underscore and number
      – when there are spaces in the ID name, then output is all words connected with underscore

      • Pepijn Olivier

        Hi @teodragovic:disqus, thanks for your reaction! In a previous project, all ID’s were unique and there were no spaces in them. They were numbers like 4455, 4456, 4457 and in one case, we had a hyphened ID (4500-4505). One source (can’t find it right now) also told us that Illustrator might also have issues with nested folders, but we still don’t have a clue what the problem in this case really was. Maybe Illustrator had troubles with numbers? Literally all our layer id’s were renamed upon saving the SVG.

        • In that case, reason is definitely that your ID’s are numbers. As per CSS spec. ID’s and class names can’t start with number so I guess same rules apply to XHTML. Try prefixing numbers with some letters, hopefully that will help.

          • Pepijn Olivier

            That makes sense, will keep this in mind! Thanks!

  • Sean Michael

    Glad you were able to get Sara on, it was a great episode. It would be cool to get Mary Lou on from codrops at some point. She’s been blowing my mind with awesome tutorials for awhile, but I don’t think I’ve ever heard her talk anywhere.

  • John J. Mills

    Hey guys, thanks for answering my question. Yes, that was a typo in there. I did mean viewBox. This was very helpful. I was encountering different issues, sometimes where the image would be cropped and not scale, and sometimes where the image would be way larger than it should be.

    Good to have an explanation of how SVGs are rendered. I’m bookmarking Sara’s site now.

  • Humbert

    Good show thanks guys

Job Mentions

Check out all jobs over on the Job Board. If you'd like to post a job, you can do that here, and have it mentioned on ShopTalk for a small additional charge.