SVG in HTML
i file SVG possono essere incorporati in documenti HTML tramite i seguenti tag: <embed>, <object> o <iframe>.
codice SVG può essere integrato direttamente nella pagina HTML, oppure si può collegare direttamente al file SVG.
Utilizzando il tag <embed>
<Embed>:
- Vantaggi: sono supportati tutti i principali browser, e permette di scripting
- Contro: Non è raccomandato per l'uso in HTML4 e XHTML (ma ammessi in HTML5)
sintassi:
<embed src="circle1.svg" type="image/svg+xml" />
risultati:
Utilizzando il tag <object>
<Oggetto>:
- Vantaggi: Tutti i browser principali sono supportati, e il supporto per HTML4, XHTML e standard HTML5
- Svantaggi: non permette l'utilizzo di script.
sintassi:
<object data="circle1.svg"
type="image/svg+xml"></object>
risultati:
Utilizzare tag <iframe>
<Iframe>:
- Vantaggi: sono supportati tutti i principali browser, e permette di scripting
- Contro: Non è raccomandato per l'uso in HTML4 e XHTML (ma ammessi in HTML5)
sintassi:
<iframe src="circle1.svg"></iframe>
risultati:
SVG incorporato direttamente nel codice HTML
Firefox, Internet Explorer9, Google Chrome e Safari, è possibile incorporare codice SVG direttamente in HTML.
Nota: SVG può essere integrato direttamente in Opera.
Esempi
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
Prova »
Link al file SVG
È inoltre possibile collegare ad una etichetta con <a> formato SVG: link a file SVG
È inoltre possibile collegare ad una etichetta con i file SVG <a>:
<a href="circle1.svg">View SVG file</a>
risultati:
Visualizza file in formato SVG