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