Segnalazione importante
http://code.google.com/p/svg-edit/

Un editor di Google per fare grafica vettoriale SVG...
SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser
ma credo che restino utili anche i seguenti suggerimenti...

Grafica vettoriale sovrapposta ad una immagine interna...

L'immagine, essendo trattata con la grafica vettoriale SVG può non essere ben visualizzata dal browser... Provare a ricopiare questo documento in una qualche cartella e tentare con un browser moderno quale Firefox 6 o Chrome 13 o Opera 11 o Internet Explorer 9...etc.
Uso l'immagine di un bassorilievo esposto a Pietrasanta raffigurante il Cavalier Gorilla omaggiato da un ragazzo sottomesso e conciliante....

Frase che cambia a seconda dell'azione fatta:

Cliccare sulle zone indicate da tenui ellissi rosse per fare comparire qui un commento appropriato...

Il Cavalier Gorilla con una aureola d'oro accetterà il ramoscello d'olivo del ragazzo ???

Scherzi a parte questo è un esempio di immagine contenuta in una marca SVG. Sovrappongo all'immagine, a puro scopo esemplificativo, qualche ellisse....
Ovviamente la grafica vettoriale sovrapposta alle immagini bitmap potrebbe essere molto più ricca e interessante per servire da commento al messaggio veicolato dall'immagine...

Come applicazione di carattere pratico immaginiamoci un modulo da compilare ( un bonifico o un bollettino postale etc...).
Invece di realizzare una versione ad hoc in HTML o con altro linguaggio basterebbe scannerare l'immagine del modulo e rendere cliccabili le zone che contengono campi riempibili nella versione cartacea.

Dunque l'utilizzatore avrebbe in mano, in versione cartacea, ESATTAMENTE quello che vede sullo schermo e il PC potrebbe aiutarlo nel fare, per esempio, la somma dei dati immessi, tipo la somma del carrello della spesa o la tassa totale da pagare se il modulo da compilare fosse la dichiarazione dell' IRPEF o altro pizzo statale...

Come prima idea che avevo è realmente mettere in pratica questi miei suggerimenti applicati alla dichiarazione dei redditi ma... guardandola vedo che è piuttosto complicata e piena di campi per cui l'esempio da realizzare mi richiederebbe un po' troppo tempo speso GRATUITAMENTE e magari tra la totale indifferenza delle persone a cui suggerisco questa idea... ( Brunetta, [Tre]Monti, etc... )
Mi accontento dunque soltanto di suggerire l'idea. Per applicarla ciascuno si arrangi... Basta intendersi un po' di grafica vettoriale SVG e di HTML 5...
Provate a vedere se in questo esempio tutto funziona bene...

Ho usato qui le seguenti function Javascript:

Trascrivo qui anche il sorgente SVG da usare come suggerimento per come ottenere questi effetti...

<svg width="520" height="380" 
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink">
   <script type="text/javascript"><![CDATA[
   var xcommento=["Nessuno","Questo è LUI","Questo sono io"];
   var xbattuta=["Nessuna spiritosaggine","Scrivere qui il nome di LUI, il Capo",
                 "Scrivere qui chi è il ragazzo..." ]
   function faqualcosa(){
      var ob=document.getElementById("didascalia");
      ob.innerHTML=xbattuta[0];
      alert("Mi hai cliccato !");
      }
   function frasecommento(n){
      var ob=document.getElementById("didascalia");
      ob.innerHTML=xbattuta[n];
      alert("Commento:\n"+xcommento[n]);
      }
   // ]]></script>
  <desc>Immagine del cavalier Gorilla </desc>
<image id="unimmagine" x="10" y="10" width="500" height="370" 
  xlink:href="http://www.elegio.it/doc/albert_einstein_allegrissimo.jpg" >
    <title>Ecco un bel bassorilievo esposto a Pietrasanta</title>
</image>
<g onclick="faqualcosa()" style="cursor:pointer" >
<ellipse id="aureola" cx="115" cy="50" rx="20" ry="10"
           style="fill:black; fill-opacity:0.01; stroke:gold; stroke-width:3;
           stroke-opacity:0.95 " />
</g>
<g onclick="frasecommento(1)" style="cursor:pointer" >
<ellipse id="aureola" cx="118" cy="100" rx="20" ry="30"
           style="fill:yellow; fill-opacity: 0.01; stroke:red; stroke-width:3;
           stroke-opacity:0.25" />
</g>
<g onclick="frasecommento(2)" style="cursor:pointer" >
<ellipse id="aureola" cx="378" cy="160" rx="20" ry="30"
           style="fill:yellow; fill-opacity: 0.01; stroke:red; stroke-width:3;
           stroke-opacity:0.25 " />
</g>
</svg>

Ecco l'immagine che ho trasferito nel disegno SVG. Notare che questa immagine è contenuta nel documento stesso per cui il documento è totalmente AUTONOMO ossia indipendente da dati esterni. Se avessi usato una immagine esterna, come è consuetudine, ci sarebbe stato il rischio che, spedendo per posta elettronica il documento, l'immagine non sarebbe stata accessibile, almeno temporaneamente.
Viceversa, avendo inserito l'immagine nel documento, il documento è robustissimo perché... monolitico.

Giampaolo Bottoni
gpbottoni@gmail.com