Ako dať SVG grafiku na svoju webovú stránku

SVG alebo škálovateľná vektorová grafika vám umožňujú kresliť oveľa zložitejšie obrázky a nechať ich vykresliť na webových stránkach. Ale nemôžete jednoducho vziať značky SVG a posunúť ich do HTML. Nezobrazia sa a vaša stránka bude neplatná. Namiesto toho musíte použiť jednu z troch metód.

Na vkladanie SVG použite značku objektov

Značka HTML vloží na vašu webovú stránku grafiku SVG. Napíšete značku objektu s dátovým atribútom a definujete súbor SVG, ktorý chcete otvoriť. Mali by ste tiež zahrnúť atribúty šírky a výšky, aby ste definovali šírku a výšku obrázka SVG (v pixeloch).

Pri kompatibilite s viacerými prehliadačmi by ste mali zahrnúť atribút typu, ktorý by mal čítať:

type = "image / svg + xml"

a kódová základňa pre prehliadače, ktoré ju nepodporujú (Internet Explorer 8 a nižšie). Vaša kódová zóna by poukazovala na doplnok SVG pre prehliadače, ktoré nepodporujú SVG. Najčastejšie používaný doplnok je od spoločnosti Adobe na adrese http://www.adobe.com/svg/viewer/install/. Tento doplnok však už spoločnosť Adobe nepodporuje. Ďalšou možnosťou je doplnok Ssrc SVG od spoločnosti Savarese Software Research na adrese http://www.savarese.com/software/svgplugin/.

Váš objekt bude vyzerať takto:

>

Tipy pre použitie objektu pre SVG

  • Uistite sa, že šírka a výška sú aspoň také veľké ako obrázok, ktorý ste vložili. V opačnom prípade môže byť váš obrázok zastrčený.
  • Váš SVG sa nemusí správne zobrazovať, ak nezadáte správny typ obsahu (typ = "image / svg + xml"), preto neodporúčam jeho opustenie.
  • Môžete zahrnúť záložné informácie do značky objektov pre prehliadače, ktoré nebudú zobrazovať súbory SVG.
  • Môžete tiež nastaviť zdroj SVG a typ obsahu v parametroch. To môže fungovať lepšie v IE 6 a 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" výška = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Všimnite si, že to vyžaduje, aby to fungovalo.

Zobrazte SVG v príklade tagu objektu.

Vložiť SVG pomocou značky Embed

Ďalšou možnosťou, ktorú máte pre SVG, je použiť značku. Používate skoro rovnaké atribúty ako značka objektu, vrátane šírky <, výšky, typu a kódovej základne>. Jediný rozdiel spočíva v tom, že namiesto údajov umiestnite svoju adresu SVG dokumentu do atribútu src.

Vaše umiestnenie bude vyzerať takto:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" typ = "image / svg + xml" codebase = "http://www.adobe.com / svg / prehliadač / inštalovať "/>

Tipy na použitie vkladania pre SVG

  • Značka vloženia nie je platná pre HTML4, ale je platná pre HTML5, takže ak ju použijete na stránke HTML4, mali by ste mať na pamäti, že vaša stránka nebude overená.
  • Na dosiahnutie najlepšej kompatibility použite názov domény plne kvazifikovaný v atribúte src.
  • Existujú aj niektoré hlásenia, že používanie značky embed s doplnkom Adobe narazí na Mozilla verzie 1.0 až 1.4.

Zobrazte SVG v príklade značky embed.

Ak chcete zahrnúť SVG, použite rámček iframe

Iframy sú ďalším jednoduchým spôsobom, ako do svojich webových stránok zahrnúť obrázok SVG. Vyžaduje len tri atribúty: šírku a výšku ako obvykle a src ukazujú na umiestnenie súboru SVG.

Váš rám iframe bude vyzerať takto: