In SVG è possibile visualizzare immagini raster all'interno della nostro documento.
L'elemento SVG che permette di inserire un'immagine è <image> ed il suo funzionamento è molto simile a quello del tag <img> utilizzato in HTML.
I formati grafici raster supportati, secondo le specifiche SVG, sono PNG e JPEG ma, a seconda del visualizzatore che utilizzate, è possibile che siano supportati altri formati grafici (ad esempio il plugin della Adobe visualizza anche immagini GIF).
tramite l'elemento <image> è possibile inserire anche altre immagini SVG all'interno della nostra.
Vediamo un esempio di utilizzo di <image>:
<svg width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" >
<image x="10" y="10" width="200" height="200" xlink:href="quadri.jpg"/>
</svg>
Questo esempio (visualizzato in figura) permette di inserire l'immagine chiamata quadri.jpg all'interno del nostro file SVG.
L'immagine sarà posizionata con il vertice superiore sinistro nel punto di coordinate indicate dagli attributi x e y dell'elemento <image>. Gli attributi width ed height indicano la dimensione dello spazio di visualizzazione dell'immagine mentre xlink:href indica l'URI dell'immagine linkata. In questo caso l'immagine sarà visualizzata in uno spazio di visualizzazione grande quanto l'immagine stessa (200x200 pixel).
Nel caso in cui le dimensioni reali dell'immagine risultino diverse da quelle indicate negli attributi width ed height, l'immagine verrà scalata in modo da essere visualizzata all'interno dello spazio di visualizzazione determinato dagli attributi dell'elemento <image>.
Ad esempio:
<svg width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink" >
<image x="10" y="10" width="100" height="100" xlink:href="quadri.jpg"/>
</svg>
Come si vede dalla figura, l'immagine è stata scalata in modo da essere interamente contenuta all'interno dello spazio di visualizzazione specificato dagli attributi width ed height (100x100 pixel).
Qualora venisse inserita un'immagine SVG all'interno di uno spazio di visualizzazione con dimensione differente rispetto alle dimensioni dell'immagine, anch'essa risulterebbe scalata.
In questo caso, le modalità secondo le quali l'immagine verrebbe scalata dipenderebbero del valore dell'attributo preserveAspecRatio dell'elemento <svg>, come spiegato nel capitolo 3.
Consideriamo adesso un esempio più complesso in cui sono presenti elementi grafici SVG ed un'immagine raster.
<svg width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink" >
<rect x="5" y="5" width="290" height="290" style="fill:yellow;stroke:blue;stroke-width:2"/>
<image x="50" y="50" width="200" height="200" xlink:href="quadri.jpg"/>
<text x="120" y="140" style="font-size:30;font-weight:bold;fill:yellow">SVG!!</text>
</svg>
Come si vede chiaramente dalla figura, è possibile integrare facilmente le immagini raster con gli elementi grafici presenti nella nostra immagine SVG.
Dall'esempio viene anche messo in evidenza come viene gestita la sovrapposizione degli elementi presenti all'interno della nostra immagine.
SVG disegna gli elementi grafici seguendo l'ordine di inserimento all'interno del file, quindi nel caso di elementi sovrapposti, risulterà in "primo piano" l'ultimo in ordine di inserimento all'interno del file.
Nel nostro esempio il rettangolo verrà disegnato per primo, poi verrà inserita l'immagine e successivamente verrà mostrata la scritta. Appare quindi evidente perché l'immagine raster "copra" in parte il rettangolo e perché il testo sia sovrapposto a tutti gli elementi presenti nel file.
