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 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?

Sponsors:

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:

Sara Soueidan

Sara on Twitter

Understanding SVG Coordinate Systems & Transformations

SVG Optimiser by Peter Collingridge (non-command line, works right in browser)

Codrops

SVGmin Grunt

CSS-Tricks – A Compendium of SVG Information

Modernizr

SVG use with External Source

Chris Coyier – SVG is for Everyone (video)

Dmitry Baranovskiy – You Don’t Know SVG

Using CSS Regions With CSS Shapes For A Better Reading Experience

Guide to Responsive-Friendly CSS Columns