Jak umístit grafiku SVG na vaší webové stránce

SVG nebo škálovatelná vektorová grafika vám umožní kreslit mnohem složitější obrázky a nechat je vykreslit na webových stránkách. Ale nemůžete jednoduše vzít značky SVG a dát je do HTML. Nezobrazí se a vaše stránka bude neplatná. Místo toho musíte použít jednu ze tří metod.

Použijte značku objektu k vkládání SVG

Značka HTML vloží na webovou stránku grafiku SVG. Napíšete značku objektu s datovým atributem a definujete soubor SVG, který chcete otevřít. Měli byste také zahrnout atributy šířky a výšky, abyste definovali šířku a výšku obrázku SVG (v pixelech).

Pokud chcete kompatibilitu mezi prohlížeči, měli byste zahrnout atribut type, který by měl číst:

typ = "obrázek / svg + xml"

a kódová báze pro prohlížeče, které ji nepodporují (Internet Explorer 8 a nižší). Váš kód by poukázal na plugin SVG pro prohlížeče, které nepodporují SVG. Nejčastěji používaný plugin je od společnosti Adobe na adrese http://www.adobe.com/svg/viewer/install/. Tento plugin však již Adobe nepodporuje. Další možností je plugin Ssrc SVG od společnosti Savarese Software Research na adrese http://www.savarese.com/software/svgplugin/.

Váš objekt by vypadal takto:

>

Tipy pro použití objektu pro SVG

  • Ujistěte se, že šířka a výška jsou alespoň stejně velké jako obraz, který vkládáte. V opačném případě může být snímek oříznut.
  • Váš SVG se nemusí zobrazovat správně, pokud nezadáte správný typ obsahu (typ = "image / svg + xml"), takže nedoporučuji, abyste ho opustili.
  • Můžete zahrnout záložní informace uvnitř tagu objektu pro prohlížeče, které nebudou zobrazovat soubory SVG.
  • Můžete také nastavit zdroj SVG a typ obsahu v parametrech. To může fungovat lépe 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šimněte si, že to vyžaduje, aby to fungovalo.

Zobrazte SVG v příkladu tagu objektu.

Vložit SVG pomocí značky Embed

Další možností, kterou máte pro SVG, je použít značku. Používáte téměř stejné atributy jako značka objektu, včetně šířky <, height, type a codebase>. Jediný rozdíl spočívá v tom, že namísto dat umístíte adresu SVG dokumentu do atributu src.

Vaše vložení by vypadalo takto:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" typ = "obrázek / svg + xml" codebase = "http://www.adobe.com / svg / prohlížeč / instalace "/>

Tipy pro použití funkce Vložit pro SVG

  • Značka vložení není platná ve formátu HTML4, ale je platná pro HTML5, takže pokud ji použijete na stránce HTML4, měli byste mít na paměti, že vaše stránka nebude ověřena.
  • Pro nejlepší kompatibilitu použijte úplný název domény v atributu src.
  • Existuje také několik zpráv, že použití značky embed s pluginem Adobe bude narazit na verze Mozilla verze 1.0 až 1.4.

Zobrazte SVG v příkladu značky embed.

Použijte iframe pro zahrnutí SVG

Dalším snadným způsobem, jak zahrnout obrázek SVG do vašich webových stránek, jsou iframy . Vyžaduje pouze tři atributy: šířku a výšku jako obvykle a src ukazují na umístění souboru SVG.

Váš iframe vypadá takto: