SVG-graafika lisamine veebisaidile

SVG või skaleeritav vektorgraafika võimaldab teil luua palju keerulisemaid pilte ja neid muuta veebilehtedel. Kuid te ei saa lihtsalt võtta SVG-märgendeid ja lohistada neid oma HTML-i. Neid ei kuvata ja teie leht on kehtetu. Selle asemel peate kasutama ühte kolmest meetodist.

SVGi varukoostamiseks kasuta Objekti tag

HTML-i märgend sisaldab teie veebilehel SVG-graafikat. Kirjutad objektijärgu atribuudiga SVG-faili määratlemiseks, mida soovite avada. SVG-pildi laiuse ja kõrguse määratlemiseks peaksite lisama laiuse ja kõrguse atribuudid (pikslites).

Brauseri ühilduvuse jaoks peaksite lisama tüübi atribuudi, mis peaks olema järgmine:

type = "image / svg + xml"

ja brauseritele, mis seda ei toeta, koodibaas (Internet Explorer 8 ja uuemad versioonid). Teie koodibaas viiks SVG-i plugina brauseritele, mis ei toeta SVG-d. Kõige sagedamini kasutatav plugin on Adobeilt aadressil http://www.adobe.com/svg/viewer/install/. Adobe ei toeta seda pluginat enam. Teine võimalus on SASCAR SVG plugin Savarese Software Researchist aadressil http://www.savarese.com/software/svgplugin/.

Teie objekt oleks selline:

Näpunäited objekti kasutamiseks SVG jaoks

  • Veenduge, et laius ja kõrgus oleksid vähemalt sama suured kui sisestatud pilt. Vastasel juhul võib teie pildi kärpida.
  • Teie SVG ei pruugi korralikult kuvada, kui te ei sisalda õiget sisutüüpi (type = "image / svg + xml"), seega ma ei soovita seda jätta.
  • Võite lisada tagasiside objekti sildi brauseritesse, mis ei kuva SVG-faile.
  • Samuti saate määrata oma SVG allika ja sisutüübi parameetrite. See võib paremini toimida IE 6 ja 7 puhul:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Pange tähele, et see nõuab klassiidi, et see töötab.

Vaadake SVG objektijälje näites.

Embed SVG koos embleemi emaga

Teine SVG lisamise võimalus on märgendi kasutamine. Te kasutate objektijärjestuses peaaegu samu atribuute, sealhulgas laiust <, kõrgus, tüüp ja koodibaas>. Ainus erinevus on see, et andmete asemel panete oma SVG-dokumendi URL-i atribuudis src.

Teie manustamine näeks välja selline:

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

Näpunäited SVG-i sisestamise kasutamiseks

  • Embed tag ei ​​kehti HTML4, kuid see kehtib HTML5, nii et kui te kasutate seda HTML4-leheküljel, peate meeles pidama, et teie leht ei vali.
  • Paremat ühilduvust kasutage atribuudis src täiesti kõverdatud domeeninime.
  • Samuti on mõned teated, et Adobe'i pistikprogrammiga embed sildi kasutamine rikub Mozilla versioone 1.0 kuni 1.4.

SVG vaatamine embleeritud märgendi näites.

SVG-i lisamiseks kasuta IFRAME-i

Iframe on veel üks lihtne viis SVG-kujutise lisamiseks oma veebilehtedele. Selleks on vaja ainult kolme atribuuti: laius ja kõrgus nagu tavaliselt ja src, mis viitab teie SVG-faili asukohale.

Teie iframe näeb välja selline: