Copy
SVG Weekly logo

This is edition 54 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

Mimic Relative Positioning Inside an SVG with Nested SVGs

Mimic Relative Positioning Inside an SVG with Nested SVGs

Positions in SVG are all absolute. Sara Soueidan demonstrates a very useful technique to simulate relative positioning by nesting SVGs and using the viewBox of each to provide 'relative' anchor points.

SVG Vector Effects

SVG Vector Effects

Nick Salloum explains how to use the <vector-effect> SVG attribute to scale a vector image without scaling the stroke widths.

Accessible SVGs

Accessible SVGs

Heather Migliorisi reviews best practice for keeping SVGs useful for users of assistive technology

Cloning SVG Elements: Using use

Cloning SVG Elements: Using use

Dudley Storey on <use>, the SVG’s clone tool: it allows you to duplicate and replicate existing or predefined elements, while also providing the possibility of applying changes to the cloned copies.

Item Reveal Animations with SVG

Item Reveal Animations with SVG

An experiment from Mary Lou where grid items get reveals and hides are animated with morphing SVG paths using anime.js.

Watch & Listen

Sarah Drasner: Functional Animation

Sarah Drasner: Functional Animation

Sarah Drasner speaking at Generate New York 2016 on the practical role animation can play in interface design. Lots of sample (SVG) code. (Video - 42 minutes)

Tools

anime.js

anime.js

Javascript animation engine from Julian Garnier that's been getting a bit of well-deserved attention lately.

Experiments

SVG Box Trying To Look Out Of The Window by Chris Gannon

SVG Box Trying To Look Out Of The Window by Chris Gannon

Examples using matrix transforms in SVG by Helder da Rocha

Examples using matrix transforms in SVG by Helder da Rocha

Pacman! (SVG + CSS transitions) by Elise Skaug Kjøndal

Pacman! (SVG + CSS transitions) by Elise Skaug Kjøndal

Simple SVG drawer by Lucas Bonomi

Simple SVG drawer by Lucas Bonomi

I design with code ❤ by Chris Gannon

I design with code ❤ by Chris Gannon

Food for thought

The Double-Edged Sword of the Web

The Double-Edged Sword of the Web

Nicolás Bevacqua ponders the trials and benefits of the web as a platform as he pursues a bunch of quirky bugs across his website. SVG included!

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