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


 

Ver todos los episodios