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/

In this episode, we look at some of SVG's most compelling benefits, explain the difference between raster and vector, and finally provide a bit of SVG history.

 

WHAT IS SVG AND WHY DO YOU CARE? 

If you've been keeping an eye on the "pulse of the web" these days, you've undoubtedly notice that SVG–spelled out: Scalable Vector Graphics–is experiencing an amazing resurgence on the web. Let's examine what exactly this SVG thing is, and why you need to start learning more about it now.

 

SVG BENEFITS

Perhaps you've already played around a bit with SVG–or, perhaps not–but, either way, it's useful to know exactly what benefits a technology brings to understand exactly how much time is appropriate to invest in it to get maximum ROI. Here are some of the more compelling ones you may be interested in:

• Resolution Independence and Scalability–unlike their Rastercounterparts, Vector images don't have to resort to anti-aliasingand the edges remain crisp as you zoom in and out
• Dynamic–SVGs are interactive and can be manipulated at run-time via scripting or CSS
• Backed by a proper DOM-based API (this relates to the last benefit, but explains why SVG is so amenable to scripting)
• SVG supports the inclusion of text and raster images within a given SVG document so you get the best of both worlds if you need it
• Availability of client-side raster filter effects such as drop shadows, gradients, etc.
• Inline SVG is styleable via CSS (excluding some pesky browsers edge cases of course!)
• W3C Open Standard with excellent import/export capabilities ex. you can export an Adobe Illustrator file; import it in to Sketch or Inkspace, tweak some more, and then render it in a web browser
• Designer Friendly–designers can use tools they love like AI and simply export graphics to SVG
• SEO and Accessibility wins since the graphic image is semantically described by an underlying XML text-based structure
• Text–searchable, selectable, and translatable
• Reusability–any shape or group of shapes can be instantantiated multiple times
• These are just some of the benefits, but let's get in to explaining exactly what IS SVG next…

 

RASTER VS. VECTOR 

To understand the Scalable Vector part of SVG, we need to understand what vector is, and contrast it to raster (the more common image counterpart in use).

 

Raster 

A simple definition of a raster image is: a rectangular series of pixels, where each pixel defines an RGB color value. This is a simplified (if not dumbed down) definition, but will suffice for our purposes.

The series of pixels described above, is also known as a bitmap. Bitmaps are generally compressed for storage, and then decompressed by a viewing program as needed. 

Some popular raster image formats are: JPG (or JPEG), PNG, and GIF. These image formats are prolific and, thus, support for raster images is ubiquitous. This wide-spread usage explains the excellent back support for raster images, and supporting legacy browsers/systems is pretty much a non-issue. However, raster images have some disadvantages:

• Static–raster images are generally not self-aware, so you can't easily change them at run-time
• Pixelation–when zoomed, edges start to exhibit a "stair-stepping", or "jagged" effect. This is generally circumnavigated by means of anti-aliasing, a process which, essentially, detects and blurs an image's edges creating the optical illusion of smooth edges. But, as you zoom in, these sorts of techniques become less and less effective, and the eye is distracted by the rather ugly visual artifacts in the zoomed raster image.

 

Vector

A vector image is: a series of instructions that describe to a viewing program how to draw shapes comprised of lines and curves. These instructions map to a series of grid points (aka coordinates) where the lines or curves are to be drawn.

 

Rendering

Interestingly, the actual rendered vector image, is rendered as a raster image by the viewing program, since: all modern displays are raster-oriented 

However, due to the way vector graphics are defined (as a series of commands or instructions at geometric points), the rendering engine can achieve feats such as zooming via some simple multiplication and a redraw. This fact, makes SVG wonderful when it comes to, ahem, scalability.

While vector-based graphics are not as ubiquitous as raster, they have some definite advantages:

• vector graphics are object-based and thus self-aware (so a circle "knows" it's a circle and, as such, can be altered or morphed at run-time)
• resolution independence and scalability (Are we repeating ourselves!? Fine, but here's another compelling example for you: a printer can utilize its full resolution resulting in a sharper printed page).

 

Read the corresponding blog post at:

http://unicorn-ui.com/blog/what-is-svg-and-why-do-you-care.html

The short SVG "history lesson" was drawn from Doug Scheper's SVG workshop at frontendmasters that I recently attended:

https://frontendmasters.com/workshops/svg/

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/