Hvernig á að setja SVG Graphics á vefsíðunni þinni

SVG eða Scalable Vector Graphics gerir þér kleift að teikna miklu flóknari myndir og láta þær birtast á vefsíðum. En þú getur ekki einfaldlega tekið SVG merkin og smellt þeim í HTML þinn. Þeir munu ekki birtast og síða þín verður ógild. Þess í stað þarftu að nota einn af þremur aðferðum.

Notaðu Object Tag til að fella SVG

HTML merkið mun embed in SVG grafík á vefsíðunni þinni. Þú skrifar hlutmerkið með gögnum til að skilgreina SVG skrána sem þú vilt opna. Þú ættir einnig að innihalda breidd og hæð eiginleika til að skilgreina breidd og hæð SVG myndarinnar (í punktum).

Fyrir samhæfni í vafra, þá ættir þú að innihalda tegundareiginleika sem ætti að lesa:

tegund = "image / svg + xml"

og kóða fyrir vafra sem styðja það ekki (Internet Explorer 8 og lægra). Codebase þín myndi benda á SVG tappi fyrir vafra sem styðja ekki SVG. Algengasta viðbótin er frá Adobe á http://www.adobe.com/svg/viewer/install/. Hins vegar styður þetta tappi ekki lengur Adobe. Annar valkostur er Ssrc SVG tappi frá Savarese Software Research á http://www.savarese.com/software/svgplugin/.

Hluturinn þinn myndi líta svona út:

Ráð til að nota hlut fyrir SVG

  • Gakktu úr skugga um að breidd og hæð séu að minnsta kosti jafn stór og myndin sem þú ert að fella inn. Annars gæti myndin þín verið klipptur.
  • SVG þín kann ekki að birtast rétt ef þú ert ekki með rétta innihaldstegundina (gerð = "image / svg + xml"), svo ég mæli með að þú sleppir því ekki.
  • Þú getur falið í sér afturköllunarupplýsingar innan mótmæla merkisins fyrir vafra sem munu ekki birta SVG skrár.
  • Þú getur einnig stillt uppruna SVG og innihaldstegundar í breytur. Þetta gæti verið betra í IE 6 og 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Athugaðu að þetta krefst kennara til að gera það virkt.

Skoðaðu SVG í dæmi fyrir dæmi tagi.

Fella SVG með Embed Tag

Annar valkostur sem þú hefur til að meðtaka SVG er að nota merkið. Þú notar næstum sömu eiginleika og hlutmerkið, þ.mt breidd <, hæð, gerð og kóða>. Eini munurinn er sá að í stað gagna seturðu SVG skjalaslóðina í src eiginleika.

Embed þín myndi líta svona út:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "mynd / svg + xml" codebase = "http://www.adobe.com / svg / áhorfandi / setja upp "/>

Ráð til að nota fella fyrir SVG

  • Innbyggðu merkið er ekki gilt HTML4, en það er gild HTML5, þannig að ef þú notar það á HTML4 síðu, ættir þú að muna að síðunni þinni muni ekki staðfesta.
  • Notaðu fullkomlega quoalified lén í src eiginleiki fyrir bestu eindrægni.
  • Það eru einnig nokkrar skýrslur að nota embed tagið með Adobe tappi mun hrynja Mozilla útgáfur 1.0 til 1.4.

Skoða SVG í embed tag tag dæmi.

Notaðu iframe til að fela SVG

Iframes eru önnur auðveld leið til að innihalda SVG mynd á vefsíðum þínum. Það þarf aðeins þrjá eiginleika: breidd og hæð eins og venjulega, og src vísar til staðsetningar SVG skráarinnar.

Your iframe myndi líta svona út: