Navigable SVG Workshop: Difference between revisions

Revision as of 11:13, 6 May 2014

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
Add the link tag to the SVG
Ensure that the "xlink" namespace is in the XML file

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

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.

@@ Line 18: / Line 18: @@
 * [[Inkscape]] http://inkscape.org
 * [http://code.google.com/p/svgpan/ SVG pan]
-* https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
+* [http://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL SMIL] is another was to animate SVG
 * http://codepen.io/1Marc/pen/FJbtj
 == Examples ==
 * The [http://archipels.be 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.