SVG di halaman HTML

SVG file dapat disisipkan ke dalam dokumen HTML menggunakan tag <embed>, <object>, atau <iframe>.

SVG di halaman HTML

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

Menggunakan tag <embed>

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

Komen: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-mana di standar HTML.

Syarat:

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

Komen:Properti pluginspage menunjuk ke URL untuk mengunduh plugin.

Menggunakan tag <object>

Tag <object> adalah standar tag HTML 4, didukung oleh semua browser yang lebih baru. Disampingnya adalah hal yang menghalangi penggunaan skrip.

Komen:Jika anda telah menginstal versi terbaru Adobe SVG Viewer, maka SVG file 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/" />

Komen:atur atribut codebase untuk URL muat turun plugin.

Penggunaan tanda <iframe>

Tanda <iframe> boleh bekerja di kebanyakan pelayar.

Syarat:

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

Saya mengharapkan...

Jika hanya dengan merujuk namespace SVG, maka SVG elemen dapat ditambahkan ke dalam kod HTML, itu amat 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>