Copy
SVG Weekly logo

This is edition 58 of SVG Weekly, a selection of interesting links to SVG tutorials, tools, experiments and talks curated by Jachin Sheehy. I also keep an eye on the wider world of data visualisation, and share compelling visualisations or projects, even if these aren't directly related to SVG.

View this email in your browser

Tutorials

“Put On The Sunglasses, Frank”: An Interactive with SVG Masks

“Put On The Sunglasses, Frank”: An Interactive with SVG Masks

Dudley Storey recreates the effect of the sunglasses used in the classic John Carpenter film They Live: putting on the sunglasses would reveal the subliminal messages encoded in all forms of media by a secret alien conspiracy. SVG masks and mouse tracking to the rescue.

High Performance SVGs

High Performance SVGs

Sarah Drasner dives into the minutia of squeezing the most out of your SVG assets: path and gradient simplification, judicious use of filters, and getting the most out of your design tools.

3 Weird SVG Browser Inconsistencies

3 Weird SVG Browser Inconsistencies

Una Kravets looks at the cross-browser oddities in SVG gradient fills, clipping masks and transform origins ... and how to work around them.

SVG uploads in WordPress (the Inconvenient Truth)

SVG uploads in WordPress (the Inconvenient Truth)

If you ever wondered why SVG support isn't on by default in WordPress ... this articles explains the security considerations that the WordPress team have to deal with: in short, when you're providing a CMS for non-technical users, 3rd-party SVG documents are an attack vector.

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

In case you missed this the first time around in May, David Rousset has republished his excellent tutorial to using SVG and the web audio APIs to create a drum machine.

Watch & Listen

SVG in Motion

SVG in Motion

Sara Soueidan's talk from Render 2016, in which she cover everything we need to know before attempting to animate SVGs, including animation gotchas, how-tos and pre-animation requisites such as optimisation and embedding, and how each of those affects the animation process. (Video - 35 minutes)

SVG: So Very Good

SVG: So Very Good

Slides for an excellent, wide-ranging introduction to SVG talk given by Tyler Sticka. A good introduction if you need one, or have a peak under the covers at the slide code if the material is familiar to you.

Resources

I Wrote a Book: Practical SVG

I Wrote a Book: Practical SVG

Chris Coyier has written an SVG book! It's been published by A Book Apart and is pitched at web designers and devs who already know their way around the web but would like a bit more confidence wit SVG.

Experiments

Soldiers of Fortune by Chris Gannon

Soldiers of Fortune by Chris Gannon

Beating Heart - CSS and SVG animation - low poly by Morkett

Beating Heart - CSS and SVG animation - low poly by Morkett

SnookSVG w/Polycleaner by Gray Ghost

SnookSVG w/Polycleaner by Gray Ghost

Distorted SVG (animated) by W20

Distorted SVG (animated) by W20

Inspiration

Design a location-based game map with Mapbox Studio

Design a location-based game map with Mapbox Studio

Saman Benrud walks through how to make a customised web map in the style of Pokemon Go using Mapbox. (Yes, there's some SVG involved!)

That's all for this week. Please send suggestions and links to curator@svgweekly.com or @SVGWeekly.
Copyright © 2016 SVG Weekly, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by MailChimp