Navigable SVG Workshop
Revision as of 12:24, 6 May 2014 by Michael Murtaugh (talk | contribs)
The goal of this workshop is to gain some familarity with using SVG as a sketching tool and to think about actively using zooming (and panning) in the construction of a (navigable) image.
Creating a drag + zoom-able SVG
The SVG pan library is a javascript file that can be added to any SVG format image to make it drag and zoomable when viewed in a web browser.
- Create an SVG using Inkscape, or download one form a source like Open Clip Art.
- Add the link tag to the SVG
- Ensure that the "xlink" namespace is in the XML file
- Link to Example
SVG Animation with CSS Transitions
CSS Transitions are an extension to the CSS language that allows animation to be added very simply in the form of automatically generated "tweening" to changes to other CSS properties. These rules work with SVG elements as well.
- Link to example with buttons to navigate to specific control points
- Link to example with transitions enabled (via stylesheet)
- Link to example
Links
- Inkscape http://inkscape.org
- SVG pan
- SMIL is another was to animate SVG
- http://codepen.io/1Marc/pen/FJbtj
Examples
- The Archipel website is an example of a hybrid HTML + SVG interface to a music collection. The SVG is generated based on a (changable) "backend" catalogue of music from the music lending library of Belgium.