RDFWeb: Co-Depiction in SVG

In RDFWeb, we are experimenting with a distributed database of descriptions of people, images, movies, sound clips etc. The initial demos have a way of saying that a person has a foaf:depiction that is some media resource such as a JPEG image. We then began experimenting withe notion of "co-depiction", a made up phrase for circumstances where two people are both depicted in the same representation (photos etc). This document reports on some initial experiments with SVG, using SVG alongside more traditional photos so we can be clearer about the regions within an image that depict different things. In future work, we hope to extend this exploration to the use of SMIL with video content.


The example photo includes both Charles and DanBri. We wanted to represent this in SVG. Using W3C's Amaya browser, we can use graphical tools to create and edit an SVG file that provides the basis for this.

Notes: the fill="green" used here is purely for illustration.

Next: hooking this up to RDF descriptions of the image(s) and people

Quick SVG editing Amaya HOWTO

How to create an SVG overlay for an existing online JPEG, PNG etc., using Amaya SVG's SVG tool. Charles showed me how to do this, so I thought I'd write it down for others to try.

  1. File > New > New SVG Document (ctrl-x, ctrl-g)
  2. Type or paste full URI for where the new SVG document will live (eg. http://www.w3.org/2001/08/rdfweb/co-2.svg)
  3. Select your new SVG document, and then select the 'Insert Image' (picture) Image icon from the menu bar
  4. Paste the URI of your original image (photo etc) into the 'Insert Image' field in the dialog box, with a short description for 'Alt text'

    (bug workaround for Amaya 5.1 and earlier:

    1. Save your document (File Save / ctrl-x, ctrl-s / save button / ...), entering username/password if prompted
    2. Reload the SVG image (remember to make sure the Web server settings give you access to the file);
    3. The SVG should now display properly, including any referenced external image resources)
  5. Select the image, and, then activate the Amaya graphical toolbar by selecting the 'Graphics' icon from the menu bar
  6. Choose one of the graphical tools (screenshot) the smooth or jaggy curved shape, and click on a start point in the image
  7. Use the mouse to create new points in your outline path (eg. tracing a shape in a photo); esc, right-click or switch windows to finish shape
  8. Select id from tthe attributes menu, and give the outline a unique identifier (must start with a letter, and not have spaces in it, and be letters/numbers/dash/underscore). This is so you can make RDF statements about this particular piece - it has a URI now.
  9. Save the SVG document to record these changes in the Web
  10. Use Amaya's Views > Show Structure facility to see the how SVG is written in the XML infoset tree (Example screenshot)

Things to Explore

These are on the some-day pile. If you're a student or if you run a class with students who might be interested in a project based on this stuff, send me a note.

  1. How does this relate to the RDF Annotations tool in Amaya? (Annotea)
  2. How can we use the SVG structures with RDF to describe in RDF which things an image represents? ("this bit of the image represents the person whose home page is..."; this bit of the image represents a thing of rdf:type http://xmlns.com/wordnet/1.6/Beer ... etc)
  3. Improving the image cataloguing process, so people will do this for their own image archives: We could use Amaya to link a part of an image to the relevant codepiction page, and then run the resulting piece through a transformation. I don't know the Amaya Transformation language enough to do this, so we would have to make it an external XSLT for now, but I will investigate this more. (this would also help solve some of the previous things)
  4. Find or write a howto on making an HTTP-PUT friendly server for use with Amaya
  5. Amaya wishlist ideas: drag-and-drop editing of paths, polygon shapes etc. once created would be nice; as would a UI widget for adding <metadata> elements that RDF-describe parts of the image - Annotea sort of provides some of this.


chaals, danbri@w3.org
Last updated: $Id: svg-foaf.html,v 1.31 2002/02/08 14:59:21 ivatton Exp $