Kako postaviti SVG grafiko na svojo spletno stran

SVG ali Scalable Vector Graphics vam omogočajo precej bolj zapletene slike in jih naredite na spletnih straneh. Vendar preprosto ne morete sprejeti oznak SVG in jih zalotiti v svoj HTML. Ne bodo prikazane in vaša stran bo neveljavna. Namesto tega morate uporabiti enega od treh metod.

Uporabite oznako predmeta za vdelavo SVG

Oznaka HTML bo na vašo spletno stran vdelala grafiko SVG. Pišete oznako objekta z atributom podatkov, da določite datoteko SVG, ki jo želite odpreti. Vključiti morate tudi atribute širine in višine, da določite širino in višino slike SVG (v pikicah).

Za združljivost z več brskalnikom morate vključiti atribut tipa, ki naj se glasi:

type = "image / svg + xml"

in zbirko podatkov za brskalnike, ki jih ne podpirajo (Internet Explorer 8 in nižje). Vaša zbirka podatkov bi pokazala vtični vtičnik SVG za brskalnike, ki ne podpirajo SVG. Najpogosteje uporabljani vtičnik je iz Adobea na http://www.adobe.com/svg/viewer/install/. Vendar ta dodatek Adobe več ne podpira. Druga možnost je vtičnik Ssrc SVG iz programa Savarese Software Research na http://www.savarese.com/software/svgplugin/.

Vaš predmet bi bil takšen:

Nasveti za uporabo predmeta za SVG

  • Prepričajte se, da sta širina in višina vsaj tako velika kot slika, ki jo vdelate. V nasprotnem primeru je lahko vaša slika obrezana.
  • Vaš SVG se morda ne bo pravilno prikazal, če ne vključite pravilne vrste vsebine (type = "image / svg + xml"), zato ga ne priporočam.
  • Za brskalnike, ki ne bodo prikazovali datotek SVG, lahko vključite nadomestne informacije znotraj oznake objekta.
  • Vir SVG in vrsto vsebine lahko nastavite tudi v parametrih. To se lahko izboljša v IE 6 in 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Upoštevajte, da to zahteva razred, da bo to delovalo.

Oglejte si SVG v primeru oznake predmeta.

Vstavi SVG z oznako Embed

Druga možnost, ki jo imate za vključitev SVG, je uporaba oznake. Uporabljate skoraj enake atribute kot oznaka objekta, vključno s širino <, višino, vrsto in kodo>. Edina razlika je v tem, da namesto podatkov postavite vaš URL dokumenta SVG v atribut src.

Vaš vdelek bi bil takšen:

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

Nasveti za uporabo vdelave za SVG

  • Oznaka za vdelavo ni veljavna v HTML4, vendar je veljavna HTML5, zato jo, če jo uporabljate na strani HTML4, ne pozabite, da vaša stran ne bo preverjala veljavnosti.
  • Za najboljšo združljivost uporabite popolnoma vpeto ime domene v atributu src.
  • Obstajajo tudi nekatera poročila, da bo uporaba vdelane oznake z vtičnikom Adobe sesula različice 1.0 do 1.4.

Oglejte si SVG v primeru embed tag.

Uporabite iframe za vključitev SVG

Iframe so še en preprost način za vključitev slike SVG na vaše spletne strani. Zahteva le tri atribute: širino in višino kot običajno in src, ki kaže na lokacijo vaše datoteke SVG.

Vaš iframe bi bil takšen: