SVG in pagina HTML

I file SVG possono essere integrati nel documento HTML con i seguenti tag: <embed>, <object> o <iframe>.

SVG in pagina HTML

Di seguito, vedrai tre metodi diversi per integrare i file SVG in una pagina HTML.

Utilizzo del tag <embed>

Il tag <embed> è supportato da tutti i browser mainstream e permette l'uso di script.

Nota:Quando si integra un SVG in una pagina HTML, utilizzare il tag <embed> è il metodo raccomandato da Adobe SVG Viewer! Tuttavia, se si deve creare un XHTML legittimo, non si può utilizzare <embed>. Nessun tag <embed> è specificato in nessuna specifica HTML.

Sintassi:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Nota:L'attributo pluginspage punta all'URL di download degli plugin.

Utilizzo del tag <object>

Il tag <object> è un tag standard di HTML 4, supportato da tutti i browser più recenti. Il suo svantaggio è che non permette l'uso di script.

Nota:Se hai installato la versione più recente di Adobe SVG Viewer, quando utilizzi il tag <object>, i file SVG non funzionano (almeno non in IE)!

Sintassi:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Nota:L'attributo codebase punta all'URL di download dell'estensione.

Usare il tag <iframe>

Il tag <iframe> funziona su quasi tutti i browser.

Sintassi:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Mi aspetto...

Se potessimo aggiungere elementi SVG tra loro tramite il riferimento dello spazio dei nomi SVG, sarebbe fantastico, ecco come:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>