Kaip įdėti SVG grafiką į jūsų svetainę

SVG arba "Scalable Vector Graphics" leidžia jums kurti daug sudėtingesnius vaizdus ir juos pateikti į tinklalapius. Bet jūs negalite paprasčiausiai paimti SVG žymes ir slap savo HTML. Jie nebus rodomi ir jūsų puslapis bus netinkamas. Vietoj to, jūs turite naudoti vieną iš trijų metodų.

Naudokite "Object Tag", kad įterptų SVG

HTML žyma bus įterpti SVG grafiką savo tinklalapyje. Jūs rašote objekto žymą su duomenų atributu, norėdami nustatyti SVG failą, kurį norite atidaryti. Jūs taip pat turėtumėte nurodyti pločio ir aukščio atributus, kad apibrėžtumėte SVG paveikslo plotį ir aukštį (pikseliais).

Kalbant apie naršyklės suderinamumą, turėtumėte įtraukti tipo atributą, kuris turėtų būti toks:

type = "image / svg + xml"

ir naršyklių, kurios jo nepalaiko, kodo bazę ("Internet Explorer 8" ir naujesnę versiją). Jūsų kodų bazė reikštų SVG įskiepį naršymams, kurie nepalaiko SVG. Dažniausiai naudojamas papildinys yra "Adobe" svetainėje http://www.adobe.com/svg/viewer/install/. Tačiau šį papildinį "Adobe" daugiau nebeteikia. Kitas variantas yra Ssrc SVG papildinys iš Savarese Software Research adresu http://www.savarese.com/software/svgplugin/.

Jūsų objektas atrodytų taip:

SVG objekto naudojimo patarimai

  • Įsitikinkite, kad plotis ir aukštis yra bent tokio pat dydžio, kaip ir įterptas vaizdas. Priešingu atveju jūsų vaizdas gali būti apkarpytas.
  • Jūsų SVG gali rodyti neteisingai, jei neįtrauksite teisingo turinio tipo (type = "image / svg + xml"), todėl nerekomendu jį palikti.
  • Galite įtraukti atsarginę informaciją objektų žyme naršyklėse, kuriose nebus rodomi SVG failai.
  • Taip pat galite nustatyti SVG šaltinio ir turinio tipo parametrus. Tai gali geriau veikti 6 ir 7 IE:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Atkreipkite dėmesį, kad tai reikalauja classid, kad jis veiktų.

Žiūrėkite SVG objekto žymos pavyzdyje.

Įterpti SVG su Įterpti žymą

Kitas SVG įtraukimo variantas - naudoti žymą. Jūs naudojate beveik tuos pačius atributus kaip objekto žymą, įskaitant plotis <, aukštis, tipas ir kodo bazė>. Vienintelis skirtumas yra tai, kad vietoj duomenų, savo SVG dokumento URL įterpiate į atributą src.

Jūsų įdėjimas atrodytų taip:

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

Patarimai dėl įterpimo naudojant SVG

  • Įterpimo žyma negalioja HTML4, bet ji yra tinkama HTML5, taigi, jei ją naudojate HTML4 puslapyje, turėtumėte prisiminti, kad jūsų puslapis nepatvirtins.
  • Geriausiai suderinamumui naudokite atributą src visiškai pakeistą domeno pavadinimą.
  • Taip pat yra keletas pranešimų, kad naudojant žymės įterpimą su "Adobe" įskiepiu bus sugadinta "Mozilla" versijos nuo 1.0 iki 1.4.

Žiūrėkite SVG pridedamo žymų pavyzdyje.

Jei norite įtraukti SVG, naudokite iframe

"Iframes" yra dar vienas paprastas būdas įtraukti SVG vaizdą į jūsų tinklalapius. Tam reikalingi tik trys atributai: plotis ir aukštis, kaip įprasta, ir src nukreipta į jūsų SVG failo vietą.

Jūsų "iframe" atrodytų taip: