SVG di HTML
file SVG dapat tertanam dalam dokumen HTML melalui tag berikut: <embed>, <object> atau <iframe>.
Kode SVG dapat ditanamkan langsung ke dalam halaman HTML, atau Anda dapat menghubungkan langsung ke file SVG.
Menggunakan tag <embed>
<Embed>:
- Keuntungan: Semua browser utama yang didukung, dan memungkinkan scripting
- Cons: Tidak dianjurkan untuk digunakan pada HTML4 dan XHTML (tapi diperbolehkan dalam HTML5)
sintaks:
<embed src="circle1.svg" type="image/svg+xml" />
hasil:
Menggunakan <object> tag
<Object>:
- Keuntungan: Semua browser utama yang didukung, dan dukungan untuk HTML4, XHTML dan standar HTML5
- Kekurangan: tidak mengizinkan penggunaan skrip.
sintaks:
<object data="circle1.svg"
type="image/svg+xml"></object>
hasil:
Gunakan <iframe> tag
<Iframe>:
- Keuntungan: Semua browser utama yang didukung, dan memungkinkan scripting
- Cons: Tidak dianjurkan untuk digunakan pada HTML4 dan XHTML (tapi diperbolehkan dalam HTML5)
sintaks:
<iframe src="circle1.svg"></iframe>
hasil:
SVG tertanam langsung ke kode HTML
Firefox, Internet Explorer9, Google Chrome dan Safari, Anda dapat menanamkan kode SVG langsung di HTML.
Catatan: SVG dapat ditanamkan langsung ke Opera.
contoh
<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>
Coba »
Link ke file SVG
Anda juga dapat membuat link ke label dengan <a> file SVG: Link ke file SVG
Anda juga dapat membuat link ke label dengan file SVG <a>:
<a href="circle1.svg">View SVG file</a>
hasil:
Lihat Berkas SVG