Info

SVG Immersion: The Anything and Everything SVG Podcast

SVG Immersion is a podcast that empowers you to passively learn SVG. Each episode is a deep dive in to one SVG concept, designed to supplement and reinforce difficult concepts. The podcast also features conversations with thought leaders in the SVG space discussing what tools and techniques they use, how they'd explain a particular SVG concept if they were teaching a friend, and one free, but valuable resource, they can offer to help you learn SVG.
RSS Feed Subscribe in iTunes
2016
August
April
February


2015
December
November
October
August
July
June
May
April
March


All Episodes
Archives
Now displaying: Page 1
Aug 11, 2016

In this conversation with Amelia Bellamy-Royds, we talk about all things SVG 2 and beyond.

 
Show Links
 
Here are the wiki pages summarizing big SVG 2 change (works in progress):
  • New features: https://github.com/w3c/svgwg/wiki/SVG-2-new-features
  • Breaking changes: https://github.com/w3c/svgwg/wiki/SVG-2-breaking-changes
 
If anyone's in the Boston area, Amelia will be talking about SVG 2 & the web standards process at CSS Conf, September 26/27: https://2016.cssconf.com/#speakers
 
Two places to see what she’s up to:
The Books:
 
 
 
SVG 2
Music Attributions:
 
Apr 12, 2016

In this conversation with Dustin Lee and Brad Woodard, we talk about the illustration process, making killer Photoshop and Illustrator brushes, and other good stuff.

Dustin Lee's Info:
 
http://www.passiveincomefordesigners.com/ (unfortunately, I forgot to bring this back up in our conversation (sorry Dustin!), but if you admire Dustin’s success with RetroSupply, and want to learn how he “makes things happen”, this is definitely something to check out. He’s also got a podcast on the topic: http://www.passiveincomefordesigners.com/podcast/
 
Brad Woodard's Info:
http://bravethewoods.com/
 
Space Ranger Brush Kit & Tutorials
 
Other Links
 
 
Music Attributions:
 
Feb 29, 2016

In this conversation with Fraser Davidson, we talk about After Effects and his general working process.

Fraser Davidson's Info:
 
Music Attributions:
 
Dec 29, 2015

In this conversation with Vincent Hardy & Dmitry Baranovskiy from Adobe, we talk about their work on Adobe Illustrator's SVG Export.

Site Links

Announcement of new AI Export Features
 
General Help for Adobe SVG
 
 
Animate SVG with the Flash Timeline
 
Dmitry's Info:
@DmitryBaranovsk
 
Vincent's Info:
 
Music Attributions:
 
Dec 3, 2015
Val Head is a Designer who loves web animation, offers training, speaking, and consults around these topics of web, design, and animation. She also curates the UI Animation Newsletter and hosts the All The Right Moves screencast & Motion and Meaning podcast. Last but not least, Val is also the author of The Pocket Guide to CSS Animations, and, the one talked a lot about on this episode, her upcoming book: Designing Interface Animations.
 
Motion and Meaning Podcast
 
UI Animation Newsletter
 
Designing Interface Animations
 
Storyboards article
 
Sarah Drasner's article (which has a section on storyboarding that we bring up in the show)
http://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/ 
 
tmrDevelops
 
Rachel Smith
 
Ana Tudor
http://codepen.io/thebabydino/
 
A beginner's guide to designing interface animations
 
Animation and RWD
 
lynda.com intro to CSS Animations course:
http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html
 
Flash Professional will be renamed Adobe Animate CC exports to SVG
 
 
Music Attributions:
 
Nov 27, 2015
Round table discussion around the topic of: "Getting Started in Web Animation (with a bias towards SVG!)”. And our esteemed guests are no less than Petr Tichy, Sarah Drasner (comes on a few minutes in), and Dudley Storey!
 
Motion and Meaning Podcast
 
UI Animation Newsletter
 
 
Fraser Davidson for Cub Studio
 
Ana Tudor
 
Gregor Adams
 
Rachel Nabors Web Animations Weekly Newsletter
 
 
Rachel Smith
 
Gerald Fernandez
 
Nathan Gordon
 
Sources of Inspiration: TV Commercials, anime transitions, street art, art galleries, js web newsletters, http://www.awwwards.com/, net mag gallery
 
Firefox Dev Tools Challenger (Rachel Nabors et al):
 
Sarah’s Flame Pen
 
 
Petr’s GreenSock Workshop
 
Sarah’s Frontend Master
Orioles book Writing a advanced svgs animations
SVG Summit, tbd. ForwardJS Summit, San Francisco, CA, February 10, 2015. O’Reilly Fluent Keynote, San Francisco, CA, March 8-10, 2015. Also, generate conf, css dev conf (slides going)
 
Dudley Storey
2016 a book will be coming out and will involve svg and animation but that’s all we can say :)
 
 
Face Morphing
 
 
 
Music Attributions:
 
Oct 3, 2015

Interview with Dennis Gaebel, a Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development and Pattern Based Design. We talk about how he got in to web development and design, PolyLion, learning through an online school, a bit about freelancing as a web dev/designer, and, of course, our mutual fondness of https://css-tricks.com :-)

 
Show Links 
https://twitter.com/droidpinkman
 
SVG Workers
 
Polylion Article
https://css-tricks.com/polylion/
 
https://github.com/jakealbaugh
 
Dudley Storey http://thenewcode.com/
 
 
Music Attributions:
 
Aug 21, 2015

Part Two of conversation with Jack Doyle and Carl Schoof of the company Greensock discuss SVG and their GSAP library. 

Show Links
 
Greensock
http://greensock.com/
 
Animation Engine Timing Comparison
http://codepen.io/GreenSock/full/e3ac33404937de0eb77c789323367da8/
 
Sequence Video
http://greensock.com/sequence-video
 
transformOrigin article by Jack on css tricks
https://css-tricks.com/svg-animation-on-css-transforms/
 
http://greensock.com/learning/
http://greensock.com/jump-start-js 
(on Codeine the collection: http://codepen.io/collection/ifybJ/)
 
Source Code
https://github.com/greensock/GreenSock-JS
 

SVG Power Tips (includes transformOrigin and svgOrigin demos + other awesome svg tips)
 
Solutions for Banner Ads in the Post-Flash World
 
Self-promotion 
 
GreenSock Animation Platform eBook
 
2-day class at Noble Desktop
 
Reference to the SVG challenge – how making 2 gears spin was basically impossible with anything else.

 

 
Questions about licensing, or custom training: http://greensock.com/contact-us/ 
 
Music Attributions:
 
Aug 20, 2015

Jack Doyle and Carl Schoof of the company Greensock discuss SVG and their GSAP library. 

 

Show Links
 
Greensock
http://greensock.com/
 
Animation Engine Timing Comparison
http://codepen.io/GreenSock/full/e3ac33404937de0eb77c789323367da8/
 
Sequence Video
http://greensock.com/sequence-video
 
transformOrigin article by Jack on css tricks
https://css-tricks.com/svg-animation-on-css-transforms/
 
http://greensock.com/learning/
http://greensock.com/jump-start-js 
(on Codeine the collection: http://codepen.io/collection/ifybJ/)
 
Source Code
https://github.com/greensock/GreenSock-JS
 

SVG Power Tips (includes transformOrigin and svgOrigin demos + other awesome svg tips)
 
Solutions for Banner Ads in the Post-Flash World
 
Self-promotion 
 
GreenSock Animation Platform eBook
 
2-day class at Noble Desktop
 
Reference to the SVG challenge – how making 2 gears spin was basically impossible with anything else.

 
Questions about licensing, or custom training: http://greensock.com/contact-us/ 
 
Music Attributions:
 
Aug 4, 2015

Interview with Rachel Nabors. Rachel is an ambassador for web animation, curating the wonderful weekly newsletterwebanimationweekly.com and regularly speaking about the topic at web development conferences. In a past life, Rachel won awards for here web comics and graphic novels for teenage girls… Today, you can see some of this influence in Rachel’s more interactive projects and demos such as Alice in Videoland, the black brick road to OZ, the Cat in Byakoyya.

Show Links
 
http://webanimationweekly.com Web Animation Weekly
 
http://rachelnabors.com/waapi/ Web Animation API resources
  
 
 
Rober Penner Easing Functions: http://robertpenner.com/easing/
 
Cat Walk Cycles (showing of web animations api): http://codepen.io/rachelnabors/pen/zxYexJ
 
 
Scott Hudson Quote: Animation: From Cartoons to the User Interface, UIST’93: Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology, pp. 45-55 
 
  
Music Attributions:
 
Jul 20, 2015

Interview with Amelia Bellamy-Royds. Amelia is a professional freelance writer specializing in scientific and technical communication. She’s the coauthor of the SVG Essentials 2nd Edition book, an “invited expert” on the W3C’s SVG working group, involved in the SVG Accessibility Task Force, and has extensive experience using SVG for data visualizations. With a masters degree in journalism, Amelia is an amazing technical writer.

 
Show Links
 
She recommended to following two places to see what she’s up to:

The Books:
 
Responsive SVG:

Accessible SVG:
 
SVG 2 development:
 
Also, we referenced Transforms on SVG Elements–Ana Tudor https://css-tricks.com/transforms-on-svg-elements/

 
 
Music Attributions:
Jul 1, 2015

Conversation with Chris Gannon...

Chris specializes in animation, UI, video and interactive design and runs the site gannon.tv as well as the company FrameSpark Interactive–which specializes in HTML5 apps, interactive video and animation, interfaces & games, for all form factors from mobile to tablet to desktop. Chris can also be found on CodePen where his work sometimes ends up in the Top Picks or Popular sections.

 

Show Links
 
 
The animation announcement for SVG Immersion Podcast was made by, Chris Gannon, himself. Here's my fork of his pen: http://codepen.io/roblevin/pen/bdLGqg ... thanks Chris!
 

Music Attributions:
Jun 15, 2015

Conversation with Rachel Smith...

Rachel started building for the web just 5 years ago, when she started out by making Flash banners for an advertising agency. Now she animates interfaces with CSS and JavaScript and also builds APIs and backend applications with Node.js. She currently builds all the websites for the good folks at Active Theory

 
Show Links
 
Rachel Smith’s Blogs & Twitter
 
2013 the year of javascript article
 
Sarah Drasner–Weighing SVG Animation Techniques (with Benchmarks)
 
Cubic Bezier animation rubber band effect
http://panda.network/
 
Active Theory
http://activetheory.net/work 
 
PenguinCurling - multi-device curling game part of the Coca-Cola AHH campaign

 
http://www.ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.com/
 

Music Attributions:
Jun 3, 2015

Conversation with Dudley Storey, a. A teacher of more than 15 years, Dudley is the author of the book: Pro CSS3 Animation, an editor for Smashing Magazine, and the author of the blog http://demosthenes.info/ where he talks about web design and development with HTML, CSS, JavaScript, and–our favorite–SVG.

 

Show Links
 
Dudley’s WEB Developer Reading List–Intro To SVG
 
Pro CSS3 Animation
 
Jen Simmons–Web Ahead Podcast Interview w/Doug Schepers

 

Music Attributions:

Loop Freesky–dEbE: http://www.freesound.org/people/bebeto/sounds/554/

frankum: http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums: http://www.freesound.org/people/notembug/sounds/264284/

 

May 9, 2015

Interview with  the founders of http://ambercreative.co/ , a mobile and web design agency headed up by Claudia Romano & Sebastiano Guerriero.

Claudia & Sebastiano are the dynamic duo behind sites like codyhouse.co–a treasure cove of organized html/css/js recipes, and more recently, Nucleo, a library of 1100+ vector icons accompanied by a web app to manage and customize them. The icons are available in several formats, but since we’re an SVG show, we’re going to dive deep on that aspect of the icon set and application.

 

Show Links
 
http://ambercreative.co/ -a mobile and web design agency headed up by Claudia Romano & Sebastiano Guerriero
 
Nucleo Icons
https://nucleoapp.com/
 
Codyhouse
http://codyhouse.co/
 

 

Sebastiano’s Dribble
 
Pixel Grid Alignment Example (courtesy of Sebastiano Guerriero)
 
 
Joni Trythall–SVG Pocket Guide
 
Music Attributions:

Loop Freesky–dEbE: http://www.freesound.org/people/bebeto/sounds/554/

frankum: http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums: http://www.freesound.org/people/notembug/sounds/264284/

 

May 6, 2015

Interview with Creative Technologist at Adobe–CJ Gammon

Animation Experience

In high school/college built animations in Flash mostly using the timeline, fed off the love for sites like Homestar Runner that created quality episodic animations that could be built relatively fast in flash and shared on the web.

Design Experience

First fell in love with vector art doing graphic design logos and illustrations in illustrator on brand concepts for companies like Miller & SC Johnson

Interactive Experience

Would bring illustrations to life with animation and interactivity through flash games and rich websites and banner ads. Adobe -Built a lot of web demos showing off adobe's work, now contributing to tools and experimental projects.

 

Show Links
 
 
sometimes CJ tweets about this stuff or other stuff I'm interested in:
@cjgammon
 
here's his branch of greensock with the Snap plug-in:
 
Snap demos discussed:
 
Petr Tichy’s SVG Christmas
 

 

Music Attributions:
Apr 26, 2015
Ryan Brownhill is an Motion and User Experience  Designer at IBM Watson with a general background in Interaction Design. He also moonlights in photography, animation, and is a bit of a typography nut. Ryan is contributing designer to The Letter Society–a collaborative and challenge-based design blog, as well as designopen.org
 
 
 
Show Links
 
http://ryanbrownhill.com/
 
The Letter Society
 
http://designopen.org
 
 
https://medium.com/@ryan_brownhill/svg-animation-d7d5486103bb
 
 
 
Music Attributions:
Apr 17, 2015

Rob talks about the SVG transform attribute and how it creates a new current coordinate system, scale, rotate, translate, scewX and scewY…

Show Links 

 
Jakob Jenkov
 
SVG Essentials–2 edition
http://www.amazon.com/SVG-Essentials-J-David-Eisenberg/dp/1449374352
 
Spec
http://www.w3.org/TR/SVG/coords.html#TransformAttribute
 
Music Attributions:
 
Apr 16, 2015
In this, part 2, of interview with Sarah Drasner–Senior Interaction Designer at Fauna DB and general front end developer who wields her magic wand over the Greensock GSAP animation library–we discuss:
  • Sarah’s background as both a front end developer and scientific illustrator
  • SVG Animation Benchmarks for GSAP, CSS3 @keyframes, SMIL, and Velocity.js
  • Sarah’s process for storyboarding the scenes in to animated timelines, from creation to animation implementation
  • “step animation” (animating by drawing a series of images) versus animation via interpolation
  • Working solo vs. working with a team; and also animations that are practical for business vs. those that are “weekend art pieces” and why both are important
Show Links
 
SVG Animation Benchmarks: https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/
 
 
 
Sarah’s Contact Form Pen: http://codepen.io/sdras/pen/LEorev
 
Sime Vidas' Web Platform Daily: http://webplatformdaily.org/
 
Sara Soueidan: SaraSoueidan.com
 
Html5 Weekly: http://html5weekly.com/
 
Web Animation Weekly: http://rachelnabors.us1.list-manage.com/subscribe?u=0a8f219cf8284562f91a26ee9&id=d60f6683d2
 
JavaScript Weekly: http://javascriptweekly.com/
 
Web Operations Weekly: http://webopsweekly.com/
 
Music Attributions:
Apr 16, 2015
In this interview with Sarah Drasner–Senior Interaction Designer at Fauna DB and general front end developer who wields her magic wand over the Greensock GSAP animation library–we discuss:
  • Sarah’s background as both a front end developer and scientific illustrator
  • SVG Animation Benchmarks for GSAP, CSS3 @keyframes, SMIL, and Velocity.js
  • Sarah’s process for storyboarding the scenes in to animated timelines, from creation to animation implementation
  • “step animation” (animating by drawing a series of images) versus animation via interpolation
  • Working solo vs. working with a team; and also animations that are practical for business vs. those that are “weekend art pieces” and why both are important
Show Links
 
 
 
Sarah’s Contact Form Pen: http://codepen.io/sdras/pen/LEorev
 
Sime Vidas' Web Platform Daily: http://webplatformdaily.org/
 
Sara Soueidan: SaraSoueidan.com
 
 
 
JavaScript Weekly: http://javascriptweekly.com/
 
Web Operations Weekly: http://webopsweekly.com/
 
Music Attributions:
Apr 7, 2015
Interview with Dmitry Baranovskiy author of Raphael & Snap.svg
 
Dmitri is the author of Raphaël, the most popular SVG library on the web with support back to IE6. Dmitry is also the author of Snap.svg, a newer successor to Raphael, designed for modern browsers, meaning it can support newer SVG features like masking, clipping, patterns, gradients, and more. Dmitry is currently a Senior Computer Scientist at Adobe. 
 
Show Links
http://dmitry.baranovskiy.com/
 
Dmitry’s Icon Set:
https://thenounproject.com/DmitryBaranovskiy/
 
https://instagram.com/p/0oXUUpGGwo/
 
Snap.svg
https://github.com/adobe-webplatform/Snap.svg
 
Bump to 0.4.0:
 
Raphael
http://raphaeljs.com/
 
Dmitry’s associate (friend?) Lachlan Hardy http://lachstock.com.au/
CJ Gammon
http://www.cjgammon.com/
CJ's Snap Plugin:
https://github.com/cjgammon/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js
 
CJ's original PR with example calling client code to the plugin:
https://github.com/greensock/GreenSock-JS/pull/79
 
 
Backbone Plugin Wiki Page:
https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
 
Sketch SVG output tweet
 
Chris Coyier’s: A Compendium of SVG Information
 
Music Attributions:

 

Apr 7, 2015
Interview with Dmitry Baranovskiy author of Raphael & Snap.svg
 
Dmitri is the author of Raphaël, the most popular SVG library on the web with support back to IE6. Dmitry is also the author of Snap.svg, a newer successor to Raphael, designed for modern browsers, meaning it can support newer SVG features like masking, clipping, patterns, gradients, and more. Dmitry is currently a Senior Computer Scientist at Adobe. 
 
Show Links
http://dmitry.baranovskiy.com/
 
Dmitry’s Icon Set:
https://thenounproject.com/DmitryBaranovskiy/
 
https://instagram.com/p/0oXUUpGGwo/
 
Snap.svg
https://github.com/adobe-webplatform/Snap.svg
 
Bump to 0.4.0:
 
Raphael
http://raphaeljs.com/
 
Dmitry’s associate (friend?) Lachlan Hardy http://lachstock.com.au/
CJ Gammon
http://www.cjgammon.com/
 
Backbone Plugin Wiki Page:
https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
 
Sketch SVG output tweet
 
Chris Coyier’s: A Compendium of SVG Information
 
Music Attributions:
 
Mar 28, 2015

In this Part 2 of 2 episode we look at Coordinate Systems. Specifically, Rob talks about SVG's preserveAspectRatio, and also discusses how you can make your SVGs responsive using the padding hack (IE).

Music Attributions:
Mar 24, 2015

In this two-part'er, we talk w/Chris about SVGs, icon systems, the tech considerations we need to keep in mind when using SVG Icons, Grunticon, Grumpicon, svg4everybody, grunt-svgstore, and Chris's SVG Is For Everybody prez and his SVG course at The Lodge.

 

Resources discussed:

Autoprefixer
 
Grunticon & Grumpicon
 
Chris’s UI Patterns Pen
 
SVG Filter Support Detection
http://stackoverflow.com/questions/9739955/feature-detecting-support-for-svg-filters
 
Chris’d SVG Course
https://css-tricks.com/lodge/svg/table-of-contents/
 
SVG Is For Everybody Presentation
https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/ (the 2014 version)
 
Rob’s Article on css-tricks.com on getting inline SVGs in to production:
https://css-tricks.com/gotchas-on-getting-svg-into-production/
 
https://css-tricks.com/mega-list-svg-information/
 
You Don’t Know SVG–Dmitry Baranovskiy
https://www.youtube.com/watch?v=SeLOt_BRAqc
https://github.com/FWeinb/grunt-svgstore
 
Lucas Bebber Article–Rob sort of misinterpreted article asking about what feature detection techniques was Lucas alluding to, but, what Lucas actually mentioned in the article, was that you may need to use vendor prefixes for the filter property…anyway, here’s the article:
https://css-tricks.com/gooey-effect/
 
SVG Essentials 2nd Edition (no affiliate) 
http://shop.oreilly.com/product/0636920032335.do
 
More Resources Discussed
https://github.com/jonathantneal/svg4everybody
https://github.com/FWeinb/grunt-svgstore 
https://github.com/iconic/SVGInjector
 

Rob's SVG Playground:

http://unicorn-ui.com/demo/svg.html 

Music Attributions:

Read more at http://svgimmersion.com/#ij8CwBU3mfP3ztr5.99
Mar 24, 2015

In this two-part'er, we talk w/Chris about SVGs, icon systems, the tech considerations we need to keep in mind when using SVG Icons, Grunticon, Grumpicon, svg4everybody, grunt-svgstore, and Chris's SVG Is For Everybody prez and his SVG course at The Lodge.

 

Resources discussed:

http://stackoverflow.com/questions/9739955/feature-detecting-support-for-svg-filters
 
Chris’d SVG Course
https://css-tricks.com/lodge/svg/table-of-contents/
 
SVG Is For Everybody Presentation
https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/ (the 2014 version)
 
Rob’s Article on css-tricks.com on getting inline SVGs in to production:
https://css-tricks.com/gotchas-on-getting-svg-into-production/
 
https://css-tricks.com/mega-list-svg-information/
 
You Don’t Know SVG–Dmitry Baranovskiy
https://www.youtube.com/watch?v=SeLOt_BRAqc
https://github.com/FWeinb/grunt-svgstore
 
Lucas Bebber Article–Rob sort of misinterpreted article asking about what feature detection techniques was Lucas alluding to, but, what Lucas actually mentioned in the article, was that you may need to use vendor prefixes for the filter property…anyway, here’s the article:
https://css-tricks.com/gooey-effect/
 
SVG Essentials 2nd Edition (no affiliate) 
http://shop.oreilly.com/product/0636920032335.do
 
More Resources Discussed
 
Rob's SVG Playground:

http://unicorn-ui.com/demo/svg.html 

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

 

1 2 Next »