Annotate .svg with html5 visually?

July 20, 2012 7:24 PM

Annotate .svg with html5 visually?

I want to make this image interactive:
http://simple.wikipedia.org/wiki/File:Plutchik-wheel.svg

But I'm not a web developer so I don't want to learn to have to code to do it.

Before I would have used Flash and Macromedia to quickly knock something up. What's the way to do it now?

I only want something basic, just the ability to mouse over and show and image would be a start.

Any tips on how to Google for this info better? I would have though there's something there already and I'm a bit annoyed to have to ask. I only found things like Rendera and Maquetta in my search.

posted by jago25_98 to Technology (5 answers total)

Well, the old school way to do this is with client-side image maps. You work out the coordinates of some (polygonal, in this case) shapes you want to make active, and you specify those areas in a series of area tags inside a map tag, then tell the image to use that map with the usemap attribute. If you're an amateur that will get simple functionality (clickable areas, mouseover text) without you needing to learn scripting.
posted by axiom at 8:34 PM on July 20, 2012

Annote the various svg elements with unique id's. Then use the d3.js framework to manipulate those elements by id. You can attach mouseover events, for example, that behave conditionally, based on the id.
posted by Blazecock Pileon at 9:47 PM on July 20, 2012

Your mouseover event, for example, would trigger an Ajax call to lazy-load an image on demand - that sort of thing.
posted by Blazecock Pileon at 9:48 PM on July 20, 2012

Best answer: d3.js is the way I'd do this if you want to write code. But you've said you explicitly don't want to learn to code. I'm not aware of a good editor that produces interactive SVG like you are asking for. Some less ideal options:

If you're willing to do just a little code, something like this popup technique is straightforward.

A quick way would be to pull it into Illustrator or Inkscape and add the annotations to the image. That doesn't give you interaction though, just static text overlays. It would be a very trivial bit of programming to have an overlay that only showed up on mouseover or something.

A third, hacky but very easy way to do simple text popups in SVG is to embed <title> elements inside elements. I use this technique in my D3 site WindHistory; try holding the mouse over one of the arc wedges for a bit to see the popup. The way that works is each arc is defined as a <path>, and inside the <path> tag is a <title> tag with the text contents. You could do this easily by loading your SVG diagram in a text editor and adding it to the SVG document, or maybe one of the SVG editors mentioned above can add titles to things. You get very little control over how titles appear, but they are simple to add to an SVG image.
posted by Nelson at 3:18 PM on July 21, 2012

Response by poster: A shame there's no editor to help get the more advanced features of SVG available to the non coder. That's so much that can be done with it, it's a wish come true for me as a flash hater:

http://www.netmagazine.com/features/20-svg-uses-will-make-your-jaw-drop

^ not much need for html5 itself. A lot possible with just svg, and compressible too.
posted by jago25_98 at 3:39 PM on September 21, 2012