SVG dalam HTML
Fail SVG boleh dibenamkan dalam dokumen HTML menggunakan teg berikut: <embed>, <objek> atau <iframe>.
Kod SVG boleh dibenamkan terus ke dalam halaman HTML, atau anda boleh memaut terus ke fail SVG.
Gunakan teg <embed>
<embed>:
Kelebihan: Semua pelayar utama menyokong dan membenarkan penggunaan Skrip
Kelemahan: Tidak disyorkan untuk digunakan dalam HTML4 dan XHTML (tetapi dibenarkan dalam HTML5)
Sintaks:
<embed src="circle1.svg" type="image/svg+xml" />
Keputusan:
Gunakan teg <objek>
<objek>:
Kelebihan: Disokong oleh semua pelayar utama dan menyokong standard HTML4, XHTML dan HTML5
Kelemahan: Skrip tidak dibenarkan.
Sintaks:
<object data="circle1.svg"
type="image/svg+xml"></object>
Keputusan:
Gunakan teg <iframe> 🎜 >
<iframe>:- Kelebihan: Disokong oleh semua pelayar utama dan membenarkan skrip
- Kelemahan: Tidak disyorkan Digunakan dalam HTML4 dan XHTML (tetapi dibenarkan dalam HTML5)
Sintaks:
<iframe src="circle1.svg "> </iframe>
Hasil:
Benamkan kod SVG terus dalam HTMLDalam Firefox, Internet Dalam Explorer 9 , Google Chrome dan Safari, anda boleh membenamkan kod SVG terus dalam HTML.
Nota: SVG tidak boleh dibenamkan terus ke dalam Opera.
Instance
Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
<!DOCTYPE html> <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>
Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian
Pautan ke fail SVGAnda juga boleh memaut ke fail SVG menggunakan teg <a>: Pautan ke fail SVGAnda juga boleh pautan ke fail SVG menggunakan tag <a> Pautan ke fail SVG:
<a href="circle1.svg">Lihat fail SVG</a>
Keputusan:Lihat fail SVG
