Navigable SVG Workshop
Revision as of 11:18, 6 May 2014 by Michael Murtaugh (talk | contribs) (→Creating a drag + zoom-able SVG)
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 to very simply add gradual transition behaviours to page elements in a style similar to standard (static) CSS rules. 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.