58: Scalable Vector Graphics

Summary

Sara Soueidan (@SaraSoueidan) has been traveling the world talking about SVG (Scalable Vector Graphics) over the past year. Since then, we’ve learned a lot more about the power of this declarative graphical language. Now that many projects have dropped support for Internet Explorer 8 (IE8) and older mobile browsers, SVG has become a staple for non-bitmap art, visualization, and other graphical web development. Sara has recently shared many of the ‘gotchas’ and best practices in talks at Beyond Tellerand in Düsseldorf & Microsoft Edge Web Summit. Together, we take a closer look at how developers can leverage her advice in our web projects today.

Resources

• SVG W3C Working Group - http://www.w3.org/Graphics/SVG/

• MDN documentation - https://developer.mozilla.org/en-US/docs/Web/SVG

• SVG 1.1 - http://www.w3.org/TR/SVG/

• SVG 2 - http://www.w3.org/TR/SVG2/

• browser support - http://caniuse.com/#feat=svg

• SVG Effects Taskforce - http://www.w3.org/Graphics/fx/

• Scaling check for IE9-IE11 - http://codepen.io/tomByrer/pen/qEBbzw?editors=110

• Sara Soueidan – SVG Lessons I Learned The Hard Way – beyond tellerrand DÜSSELDORF 2015 - https://vimeo.com/135466848

• MS Edge Web Summit  2015 - https://channel9.msdn.com/Events/WebPlatformSummit/2015/On-the-Edge-with-SVG

• CSS Conf AU 2015 - https://www.youtube.com/watch?v=lMFfTRiipOQ

• Overview of SVG Sprite Creation Techniques: https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/

• Inline SVG vs Icon Fonts [CAGEMATCH] http://css-tricks.com/icon-fonts-vs-svg/?utm_content=buffer2b75f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

• Structuring, Grouping and Referencing in SVG: The , , and Elements http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

• clipping in svg - https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/

• styling content with CSS - http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

• art direction for