Cara Nyetel Graphics SVG ing Panjenengan Webpage

SVG utawa Scalable Vector Graphics ndadekake sampeyan ngowahi akeh gambar sing luwih kompleks lan wis diasilake ing kaca web. Nanging sampeyan ora bisa mung njupuk tag SVG lan nglebokna kana HTML sampeyan. Ora bakal katon lan kaca bakal bener. Nanging, sampeyan kudu nggunakake salah siji saka telung cara.

Gunakake Tag Objek kanggo Embed SVG

Tag HTML bakal nampilake grafis SVG ing kaca web sampeyan. Sampeyan nulis tag obyek kanthi atribut data kanggo netepake file SVG sing pengin dibukak. Sampeyan uga kudu nyakup atribut lebar lan dhuwur kanggo netepake lebar lan dhuwur gambar SVG (ing piksel).

Kanggo kompatibilitas lintas-browser, sampeyan kudu nyakup atribut jinis, sing kudu diwaca:

type = "image / svg + xml"

lan codebase kanggo browser sing ora ndhukung (Internet Explorer 8 lan ngisor). Codebase sampeyan bakal nuding plugin SVG kanggo browser sing ora ndhukung SVG. Plugin sing paling umum digunakake saka Adobe ing http://www.adobe.com/svg/viewer/install/. Nanging, plugin iki ora didukung déning Adobe. Pilihan liyane yaiku plugin Ssrc SVG saka Savarese Software Research ing http://www.savarese.com/software/svgplugin/.

Objek sampeyan bakal katon kaya iki:

Tip kanggo Nggunakake obyek kanggo SVG

  • Priksa manawa lebar lan dhuwur paling sethithik minangka gambar sing panjenengan lebokake. Yen ora, gambar sampeyan bisa dipotong.
  • SVG sampeyan ora bisa nampilake kanthi bener yen sampeyan ora nyakup jinis isi sing bener (tipe = "image / svg + xml"), supaya aku ora nyaranake ninggalake.
  • Sampeyan bisa ngemot informasi jangkep ing tag obyek kanggo browser sing ora bakal nampilake file SVG.
  • Sampeyan uga bisa nyetel sumber SVG lan jinis isi ing paramèter. Iki bisa uga luwih apik ing IE 6 lan 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Elinga yen iki mbutuhake classid kanggo gawe.

Ndeleng SVG ing conto tag obyek.

Embed SVG karo Tag Embed

Pilihan liyane sing sampeyan kudu kalebu SVG yaiku nggunakake tag. Sampeyan migunakake ciri sing meh padha karo tag objek, kalebu jembar <, dhuwur, jinis, lan codebase>. Bentenipun mung dudu data, sampeyan nyelehake URL dokumen SVG ing atribut src.

Embedding sampeyan bakal katon kaya iki:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / panampil / nginstal "/>

Tip kanggo Nggunakake Embed kanggo SVG

  • Tag embed ora bener HTML4, nanging HTML5 bener, dadi yen sampeyan nggunakake ing kaca HTML4, sampeyan kudu ngelingi yen kaca ora validate.
  • Gunakake jeneng domain sing wis dikepengini ing atribut src kanggo kompatibilitas sing paling apik.
  • Ana uga sawetara laporan sing nggunakake tag embed karo plugin Adobe bakal nabrak Mozilla versi 1.0 nganti 1.4.

Ndeleng SVG ing conto tag embed.

Gunakake iframe kanggo Sertakan SVG

Iframes minangka cara sing gampang kanggo nyakup gambar SVG ing kaca web sampeyan. Iku mung mbutuhake telung atribut: lebar lan dhuwur kayadene biasa, lan src nunjukake lokasi file SVG.

Iframe sampeyan bakal katon kaya iki: