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

Site Links

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

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

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

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.

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.

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.

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

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.

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.

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.

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

Show Links 

• 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

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

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:

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

In this Part 1 of 2 episode we look at Coordinate Systems. Specifically, Rob talks about SVG's viewport, the viewBox attribute, and both viewport space and user space coordinate systems.

The following blog post link has a section on the SVG viewport with examples for viewBox "displacement" and scaling units:

http://unicorn-ui.com/blog/svg-for-beginners.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/

SVG DOCUMENT STRUCTURE

A look at how to achieve reusabability with SVG's semantic grouping and referencing elements. We additionally look at SVG's root element too.

For most web developers, SVG (or Scalable Vector Graphics), should bring some familiarity in terms of syntax. This is due to the fact, that SVG is a dialect of XML and quite similar to HTML. However, many "SVG noobs" hit a stumbling block with a couple of concepts that are unique to SVG. My advice to folks new to SVG, is to push through these challenges, since the ROI that SVG brings is well worth the effort. With that said, I hope that this article clarifies one of the more challenging areas…SVG Document Structure.

We look at:

* SVG's Root Element

* Grouping Elements

* Referencing Elements 

View corresponding blog post at:

http://unicorn-ui.com/blog/svg-document-structure.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/

Interview with Petr Tichy a.k.a. ihatetomatoes.

We discuss:

* how Petr got in to web development

* the Greensock SVG animation libraries (http://greensock.com/gsap)–Petr currently prefers to use the TweenMax plugin for his animations

* Greensock gsap easings

* his impressive SVG Christmas animation (https://ihatetomatoes.net/svg-christmas/)

* how he approaches the process of code "deconstructions" (https://ihatetomatoes.net/tags/deconstruction/)

* the difficulties involved with going back and forth between Adobe Illustrator and the browser when tweaking SVG animations 

Resources

https://ihatetomatoes.net/svg has a list of SVG related resources to get started

 also has some useful resources for learning SVG from scratch 

Promos

Petr graciously provided the SVG Immersion Podcast listeners with a 20% discount to his Skrollr Workshop. You'll have to listen to the show to get the promo code, but then you can go to: https://ihatetomatoes.net/product/skrollr-workshop/ and enter it when you purchase the course!

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/