129: With Sara Soueidan
This week we were joined by Sara Soueidan. We take a deep dive into the world of SVG.
Time Jump Links
- 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?
Links
- 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