58: Scalable Vector Graphics

The Web Platform Podcast

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 embedding - http://sarasoueidan.com/blog/art-directing-svg-object/

• All about viewBox :: http://sarasoueidan.com/blog/svg-coordinate-systems/

• The State of SVG Animation - http://blogs.adobe.com/dreamweaver/2015/06/the-state-of-svg-animation.html#.VXGQW1yqqkq

• Some SVG Tools - http://sarasoueidan.com/tools.html

• Sara on Github - https://github.com/SaraSoueidan

• Codrops on Github - https://github.com/codrops

• Smashing Book 5 http://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/

• complete guide to SMIL https://css-tricks.com/guide-svg-animations-smil/

• CSS Motion Path module http://www.w3.org/TR/motion-1/

• d3.js http://d3js.org

• Weighing SVG Animation Techniques (with Benchmarks) https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/

• The GreenSock Animation Platform (GSAP) http://greensock.com

• Snap.svg http://snapsvg.io/

• Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=891074 (UPDATE: Fixed by @jwatt)

Angular Remote Conf

Do you want to attend a conference with top level Angular speakers but can afford the cost and inconvenience in travelling? Angular Remote Conf is an online conference Sept. 24th through the 25th with live interactions, a dedicated forum, respected leaders in Angular, and best of all you never have to leave the comfort of your own home to attend.

The Web Platform Podcast listeners receive a 20% discount for https://angularremoteconf.com/. All you have to do is use "webplatform" as the coupon code at checkout to get your 20% off. This works for group tickets, standard tickets, and early bird as well. Head over to angularremoteconf.com and sign up ASAP to get the maximum savings

DevFestDC 2015

The Web Platform Podcast is a proud media sponsor of DevFest 2015. DevFest is a conference with Great Sessions and Code Labs on Android, Wearables, Polymer, AngularJS, Google Cloud Platform, Meteor and many others.

Show hosts Danny Blue & Erik Isaksen will be speakers and the event will be held at AOL Headquarters in Dulles VA Friday Sept 11th 2015 & Saturday Sept 12th 2015. For event registration details check out devfestdc.org and click on the eventbrite link. www.eventbrite.com/e/devfestdc-2015-google-developer-group-dc-tickets-17538373748 now!

Panelists

• Danny Blue (@dee_bloo) - Senior Front End Engineer at Deloitte Digital

• Erik Isaksen (@eisaksen) - Front End Development Lead at Deloitte Digital & Google Developer Expert in Web Technologies

• Justin Ribeiro (@justinribeiro) - Wearables & HTML5 Google Developer Expert & Partner at Stickman Ventures