Miten SVG-grafiikka asetetaan verkkosivustollesi

SVG tai Scalable Vector Graphics ansiosta voit piirtää paljon monimutkaisempia kuvia ja tehdä ne verkkosivuilla. Mutta et voi vain ottaa SVG-tunnisteita ja laittaa ne HTML-muotoon. Ne eivät näy ja sivusi on virheellinen. Sen sijaan sinun on käytettävä yhtä kolmesta tavasta.

Käytä Object Tag -ohjelmaa upottaa SVG

HTML-tunniste upottaa SVG-grafiikan verkkosivustollesi. Voit kirjoittaa objektitiedoston datamääritteen määrittääksesi SVG-tiedoston, jonka haluat avata. Sinun tulisi myös sisältää leveys- ja korkeusominaisuudet määritellä SVG-kuvan leveys ja korkeus (pikseleinä).

Selaimen yhteensopivuuden lisäksi sinun pitäisi sisällyttää tyyppimerkintä, joka pitäisi lukea:

type = "image / svg + xml"

ja koodibusio selaimille, jotka eivät tue sitä (Internet Explorer 8 ja uudempi). Sinun koodibussi viittaisi SVG-laajennukseen selaimille, jotka eivät tue SVG: ää. Yleisimmin käytetty lisäosa on Adobelta osoitteesta http://www.adobe.com/svg/viewer/install/. Adobe ei kuitenkaan tue tätä laajennusta. Toinen vaihtoehto on Savarese Software Researchin Ssrc SVG-liitännäinen osoitteessa http://www.savarese.com/software/svgplugin/.

Esineesi näyttää tältä:

Vinkkejä objektin käyttämiseen SVG: lle

  • Varmista, että leveys ja korkeus ovat vähintään yhtä suuret kuin upottamasi kuva. Muussa tapauksessa kuvan voi leikata.
  • SVG: täsi ei välttämättä näytetä oikein, ellei sisällytetä oikeaa sisältötyyppiä (type = "image / svg + xml"), joten en suosittele jättämään sitä pois.
  • Voit lisätä varmenteen sisältämät varatunnistetiedot selaimille, jotka eivät näytä SVG-tiedostoja.
  • Voit myös asettaa SVG: n lähteen ja sisällön tyypin parametreihin. Tämä voi toimia paremmin IE 6 ja 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Huomaa, että tämä vaatii luokkakokeen, jotta se toimisi.

Tarkastele SVG objektitunnisteen esimerkissä.

Liitä SVG: n Upotus-tunnisteeseen

Toinen vaihtoehto SVG: n lisäämiseksi on käyttää tunnistetta. Käytät lähes samoja attribuutteja kuin objektitunniste, mukaan lukien leveys <, korkeus, tyyppi ja koodibussi>. Ainoa ero on, että tietojen sijaan sijoitat SVG-dokumentin URL-osoitteen src-attribuuttiin.

Sinun upottaminen näyttäisi näin:

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

Vinkkejä SVG: n upottamiseen

  • Upotuskoodi ei ole kelvollinen HTML4, mutta se on kelvollinen HTML5, joten jos käytät sitä HTML4-sivulla, sinun kannattaa muistaa, että sivusi ei ole vahvistettu.
  • Käytä täysin quoalified verkkotunnusta src attribuutissa parhaan yhteensopivuuden varmistamiseksi.
  • Mukana on myös joitain raportteja, joissa upotettu tunniste Adobe-pluginilla kaatuu Mozilla-versiot 1.0 - 1.4.

Tarkastele SVG-mallia upotusotsakkeessa.

Käytä iframe: n sisällyttämään SVG: n

Iframes on toinen helppo tapa sisällyttää SVG-kuva Web-sivuillesi. Se vaatii vain kolme attribuuttia: leveys ja korkeus tavalliseen tapaan, ja src osoittaa SVG-tiedoston sijaintia.

Iframe näyttää tältä: