SVG di halaman HTML

File SVG dapat disematkan di dokumen HTML dengan menggunakan tag: <embed>, <object>, atau <iframe>.

SVG di halaman HTML

Di sini, Anda akan melihat tiga metode yang berbeda untuk menempatkan file SVG di halaman HTML.

Menggunakan tag <embed>

Tag <embed> didukung oleh semua browser yang populer dan memungkinkan penggunaan skrip.

Keterangan:Menggunakan tag <embed> untuk menempatkan SVG di halaman HTML disarankan Adobe SVG Viewer! Namun, jika Anda perlu membuat XHTML yang sah, Anda tidak dapat menggunakan <embed>. Tidak ada tag <embed> di mana pun di aturan HTML.

Syarat:

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

Keterangan:Properti pluginspage mengarahkan ke URL untuk mengunduh plugin.

Menggunakan tag <object>

Tag <object> adalah standar tag HTML 4, didukung oleh semua browser yang lebih baru. Kelemahannya adalah bahwa ia tidak mengijinkan penggunaan skrip.

Keterangan:Jika Anda telah menginstal versi terbaru Adobe SVG Viewer, maka file SVG tidak akan berfungsi saat digunakan tag <object> (setidaknya tidak dalam IE)!

Syarat:

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

Keterangan:Atribut codebase mengarahkan URL untuk mengunduh plugin.

Menggunakan tag <iframe>

Tag <iframe> bekerja di sebagian besar browser.

Syarat:

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

Saya harap...

Jika hanya dengan merujuk namespace SVG, maka SVG elemen dapat ditambahkan ke dalam kode HTML, itu sangat bagus, seperti ini:

<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>