coding

New take on the old line drawing animation using stroke dash-array with D3 interpolation.

How to coordinate multiple views using dispatch events.

Python library called pLAySVG helps facilitate the script-based generation of SVG.

Basic text wrapping features may finally be included in SVG 2.

Brief article on how to Create Adaptive SVG with CSS.

Layout and interactivity with Hexagons GridsWraparound Maps

How to file browser bug reports for SVG.

Example for visualizing OpenStreetMap Vector Tiles with D3.

Infographic using geographic hexagon binning to represent Worldwide Manufacturing Decisions on NYTimes.

The Koalas to the max case study.Koalas to the max

Interactive infographic Oscar Contender, Connections on NYTimes.

Variable stroke-width is being considered again in some depth. Variable Stroke Width

Recent discussion on improving Web animations with the W3C’s CSS-SVG Effects animation group.

One of Jason Davies inspired D3.js visualization examples, SVG Tree-Layout. Tree Layout

Thoughts on the new smooth curves feature in SVG2.

SVG 2.0 enhancements that are under serious consideration can be found here SVG 2.0 Requirements along with the SVG Roadmap.

Suggest a link

learning

Interactive Data Visualization for the Web is a well-written book on getting started with D3.js.

A solid starting point for learning SVG is in the latest SVG book which will quickly ramp up your working knowledge.

Two free SVG books are available:
I Love To Doodle by Taylor Beres and Learn SVG Interactively by Jay Nick

Get started playing with SVG today by running through some Inkscape tutorials.

Share your SVG creations with the community SVG Elves.

New free Intro to D3.js course.

The Dashing JS newsletter has updates on the D3.js community.

Interactive and fairly comprehensive SVG Tutorials which cover the Basics, Scripting, and Mathematics, all of which incorporate animations.

For programming, consult the elves at SVG Consulting.

Suggest a link

resources

two.js
A two-dimensional drawing api that is renderer agnostic – enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Drawing SVG
A new brand of drawing editor.

SVGenie
Converts SVG as PNG all client-side (without round-trip to server).

GPDK
Game development kit based on D3.js.

BonsaiJS
Graphics API and an SVG renderer that attempts to help abstract and simply some of the more intricate aspects of SVG.

Inkscape
Free vector graphics editor with “community-oriented development” – supports many advanced SVG features yet makes it easy to perform complex path operations, and much more…

D3.js
Version 3 of the D3 JavaScript Visualization Library is now available. With minimal overhead, D3 is a fast library that supports large datasets and dynamic behaviors for interaction and animation.

Pergola
A JavaScript SVG framework with libraries, designed to provide developers with a powerful tool for building web applications, User Interfaces, presentations and more.

Open Clip Art
Freely shared high-quaulity vector graphics for the community.

NVIDIA’s GPU Path Rendering
path rendering provides full GPU-acceleration of a style of 2D graphics which powers important 2D graphics standards such as Scalable Vector Graphics (SVG)…

Svable
is a service to generate your vector images in the cloud.

Pac-n-Zoom
converts photos into Scalable Vector Graphics (SVG) in high quality.

Sponsor: eUK Web Hosting
11 years of web hosting excellence.

Suggest a link