Kako staviti SVG grafiku na svoju web stranicu

SVG ili skalabilna vektorska grafika omogućuju vam privlačenje mnogo složenijih slika i prikazivanje na web stranicama. No, ne možete jednostavno uzeti SVG oznake i špijunirati ih u svoj HTML. Neće se prikazati, a vaša će stranica biti nevažeća. Umjesto toga, morate koristiti jednu od tri metode.

Koristite oznaku objekta za ugradnju SVG

HTML oznaka ugradit će SVG grafički sadržaj na vašu web stranicu. Oznaku objekta zapisujete s atributom podataka kako biste definirali SVG datoteku koju želite otvoriti. Također biste trebali uključiti atribute širine i visine kako biste odredili širinu i visinu SVG slike (u pikselima).

Za kompatibilnost unakrsnog preglednika trebali biste uključiti atribut tipa, koji bi trebao pročitati:

type = "image / SVG + XML"

i kodnu bazu za preglednike koji ga ne podržavaju (Internet Explorer 8 i niži). Vaša šifra baze podataka bi upućivala na SVG dodatak za preglednike koji ne podržavaju SVG. Najčešće korišteni dodatak je Adobe iz http://www.adobe.com/svg/viewer/install/. Međutim, Adobe više ne podržava ovaj dodatak. Druga mogućnost je Ssrc SVG dodatak Savarese Software Research na http://www.savarese.com/software/svgplugin/.

Vaš će objekt izgledati ovako:

Savjeti za korištenje objekta za SVG

  • Provjerite jesu li širina i visina barem velika kao slika koju ugrađujete. Inače, vaša se slika može izrezati.
  • Vaš SVG možda neće biti ispravno prikazan ako ne uključite ispravnu vrstu sadržaja (type = "image / svg + xml") pa ne preporučujem da je napustite.
  • Možete uključiti rezervne informacije unutar oznake objekta za preglednike koji neće prikazivati ​​SVG datoteke.
  • Također možete postaviti izvor SVG-a i vrstu sadržaja u parametrima. To može raditi bolje u IE 6 i 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Imajte na umu da to zahtijeva klase kako bi je uspjelo.

Pogledajte SVG u primjeru oznake objekta.

Embed SVG with the Embed tag

Druga opcija koju imate za uključivanje SVG jest upotreba oznake. Upotrebljavate gotovo iste atribute kao i oznaku objekta, uključujući širinu <, visinu, vrstu i bazu oblika>. Jedina je razlika u tome što umjesto podataka unosite URL SVG dokumenta u src atribut.

Vaše ugrađivanje izgledalo bi ovako:

width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com" src = "http://vaša-domena.ovdje/z-circle.svg" / svg / viewer / install "/>

Savjeti za upotrebu Embed for SVG

  • Oznaka za ugrađivanje nije važeća za HTML4, ali je valjana za HTML5, pa ako ga upotrebljavate na HTML4 stranici, ne zaboravite da vaša stranica neće provjeriti.
  • Koristite potpuno quoalified naziv domene u src atribut za najbolju kompatibilnost.
  • Postoje i neka izvješća koja će upotrijebiti ugrađenu oznaku s dodatkom Adobe zaustaviti verzije Mozilla 1.0 do 1.4.

Pogledajte SVG u primjeru ugrađene oznake.

Koristite iframe za uključivanje SVG-a

Iframes je još jedan jednostavan način za uključivanje SVG slike na vaše web stranice. To zahtijeva samo tri atributa: širinu i visinu kao i obično, a src usmjerava na mjesto vaše SVG datoteke.

Vaš iframe bi izgledao ovako: