Copy
SVG Weekly logo

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

More About SVG Clipping Paths

More About SVG Clipping Paths

Steven Bradley extends his introduction to SVG Clipping Paths with a discussion of initial clipping paths, clipPathUnits and the clip-rule property for better control.

Creating real-life motion effects in D3 visuals

Creating real-life motion effects in D3 visuals

In this tutorial from her SVG beyond mere shapes series Nadieh Bremer , explains how to create a motion blur effect in data visualizations by applying an SVG Gaussian blur filter. Exquisite!

Math as SVG for fast webpages

Math as SVG for fast webpages

Tom MacWright describes his workflow for presenting Math formulas on the web using SVG (via LaTeX!)

How VectorDrawable works

How VectorDrawable works

Colt McAnlis investigates how to use vector images in Android apps with VectorDrawable, the Android SDK's answer to SVG.

A smooth color legend in D3

A smooth color legend in D3

Another tutorial from Nadieh Bremer's excellent series: SVG beyond mere shapes series. This time it's about using SVG gradients to create 'smooth colour legends'. Really useful for constructing heatmap or trend visualisations.

Distorted Button Effects with SVG Filters

Distorted Button Effects with SVG Filters

Adrien Denat experiments with applying SVG filters to HTML elements: specifically buttons

A pocket-sized guide to using SVG icon sprites in web apps

A pocket-sized guide to using SVG icon sprites in web apps

Ben Schwarz has the TL;DR version of how to use SVG icons on the web. Short and simple to get you started.

Masking in the Browser with CSS and SVG

Masking in the Browser with CSS and SVG

Maria Antonietta Perna looks at the various in-browser methods available for masking images with CSS and SVG.

Watch & Listen

Masking Part 1: Intro - Photoshop, Illustrator & After Effects

Masking Part 1: Intro - Photoshop, Illustrator & After Effects

CJ Gammon has started a screencast series on masking. This is the introductory episode and covers what masks are, common types of masks, as well as how to create them in the most common design applications. There's nothing SVG specific here, but this provides a good coverage of the concepts around masking and meshes well with Steven Bradley's current tutorial series on SVG clipping and masking. (Video - 9 minutes)

Tools

Read the Specs!

Experiments

Interactive responsive SVG Camera 📷 by Jhey Tompkins

Interactive responsive SVG Camera 📷 by Jhey Tompkins

Spinning star by Takane Ichinose

Spinning star by Takane Ichinose

SVG Pod Slider by Chris Gannon

SVG Pod Slider by Chris Gannon

SVG elements change on mouseover by Sarah Drasner

SVG elements change on mouseover by Sarah Drasner

Food for Thought

Optimizing for Large-Scale Displays

Optimizing for Large-Scale Displays

Lots of the RWD effort has been focussed on ensuring content is presented sensibly on small screens. Jon Yablonsk takes a look at the other end of the spectrum: how to make your designs work on very large screens.

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