SVG neat hacks and quick writeup (fwd from ilrt tech list)

Todo: credit to the cast of thousands from #rdfig who helped brainstorm
and code all this... Jim, MaxF, Dean, Libby, Charles, Bert and others...

Fwd'd here as a start towards a writeup of
http://www.w3.org/2001/08/rdfweb/foafwho/

see also:
http://rdfig.xmlhack.com/2002/03/13/2002-03-13.html#1016046017.854958

---------- Forwarded message ----------


Notes on SVG's coolness for photo metadata, authoring tools etc.

You can use SVG for image metadata, to overlay an image with information
about who is in which bit of a photo, for example:

Adobe plugin needed, http://www.adobe.com/svg/viewer/install/ or for
Linux/Moz, http://www.adobe.com/svg/viewer/install/old.html


This is a photo overlay with me highlighted:

	http://www.w3.org/2001/08/rdfweb/foafwho/danbri-highlight-opacitydemo.svg

Here's the same picture turned back into a JPEG, with Charles highlighted.
We used the Apache Batik tools to do this.

	http://www.w3.org/2001/08/rdfweb/foafwho/_chaals.jpg

Here's the 'beer' region of the picture, with all non-beer blanked out:

	http://www.w3.org/2001/08/rdfweb/foafwho/_smallbeer_clipart.svg

...from which we can generate JPEGs or PNGs of various kinds, eg:

	http://www.w3.org/2001/08/rdfweb/foafwho/_beer.jpg
	http://www.w3.org/2001/08/rdfweb/foafwho/_smallbeer_clipart.png


Here's an RDF file that embeds the main bits of the SVG path structures as
metadata about the image:

	http://www.w3.org/2001/08/rdfweb/foafwho/svg-in-rdf.rdf

So this is nice. We can use SVG to talk about bits of photos, and
associate them with other things we know about the photos and the things
in them. All we need are authoring tools. Fortunately, there are two
straightforward ways of building authoring tools for this kind of SVG/RDF
metadata. Right now there are no polished tools, but we have all the raw
materials we need HTML imagemaps (100s of tools exist) and SVG itself.


Authoring SVG metadata via HTML:

Here's an old fashioned HTML imagemap (with regions associated with
mailto: URLs):
	http://www.w3.org/2001/08/rdfweb/foafwho/imagemap/gimp-w34.imagemap.html


Here's an XML stylesheet that turns the (X)HTML imagep into SVG:

	http://www.w3.org/2001/08/rdfweb/foafwho/imagemap/imagemap2svg.xslt

And here's the resulting SVG:
	http://www.w3.org/2001/08/rdfweb/foafwho/imagemap/_imagemap2svg-output.svg


Authoring SVG metadata via SVG:

It turns out that SVG with scripting is ideal for creating an SVG editor.
Here's one Jim from #rdfig IRC wrote. It runs in the Adobe plugin, so all
the usual SVG features are available in the editor (eg. zooming in :)

This is an imagemap / path editor for SVG, written in SVG (prototype):

	http://jibbering.com/2002/3/imgmap.svg



Hope this makes sense :)

ps. http://www.w3.org/2001/08/rdfweb/foafwho/Makefile shows how we hacked
together some of these demos

Received on Wednesday, 13 March 2002 14:05:10 UTC