129: With Sara Soueidan

01:06:19   Download

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

We talked about (roughly in order):

Q & A:

  • 17:45 Why do you think it took us so long to start using SVG images in web development?
  • 27:36 I just started fiddling with SVG sprites a bit and the things that I haven’t figured out yet in my SVG workflow are: removing inline styles from paths, polylines, lines etc, so that I can easily override them in my CSS file, cleaning up empty <g> tags, and in general cleaning up unused stuff, so that the resulted file is as light as possible. Do you know of any resources, grunt plugins online tools that can do that automatically?
  • 36:47 I’d like to use cacheable SVG sprites for icons; what’s the best way to achieve this, and can you highlight the pros and cons of the different techniques? Also, I’m currently testing an external symbol SVG file – what’s the most solid method of testing for browser support of SVG symbol? Does the ‘hasFeature’ test work robustly?
  • 43:18 Can you give us a rundown of how SVGs actually render on a page and the best way to size/scale them?
  • 51:10 Is there any simple way to work with SVG, and is working with SVGs going to be the next trend?
  • 54:34 I have just used “CSS3 columns”, do you think would that be enough in future to create magazine site?


  • 35:03 E4H: Front End Summit Environments for Humans brings together some of the Web’s most notable experts in Frontend for an all-new, one-day only online conference, the FrontEnd Summit 2014! Bring the experts to your desktop August 21st from 9AM to 5PM (CT).
  • As the web changes for the better, so do our tools. While keeping on top of industry changes is part of the job, fighting our tools that can help us do our job faster and better shouldn’t be. In this special FrontEnd Summit, we deep dive into tools–some common like text editors and some relatively new to the scene like Grunt and Sketch–to see how they can help stay on top of cutting edge.
  • Use coupon code SHOPTALK, and grab your tickets now!

  • 48:52 lynda.com – The best online learning resource. Check out great courses like:

  • SVG
  • JavaScript for Web Designers
  • Designing a Logo for a Band
  • Writing Press Releases
  • Monday Productivity Pointers, and so much more.
  • Get a free 7 day trial now!

Show Links:

  • 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