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.
- SVG se nemusí zobrazovat správně, pokud nezadáte správný typ obsahu (
typ = "obrázek / svg + xml"), takže nedoporučuji, abyste ho opustili. - Můžete zahrnout záložní informace uvnitř
objekttagy 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ým rozdílem je, že namísto data, umístíte adresu URL 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:
Tipy pro použití iframe pro SVG
Rámeček iframe se zobrazí s okrajem kolem obrázku, pokud odstraníte hranici stylem, například
style = "border: none;"
Ikona iframe neurčuje umístění pluginu, takže pokud prohlížeč zákazníka nemá plugin, nemusí se vůbec zobrazit, nebo se může zobrazit chybová zpráva.
Zobrazení SVG v příkladu značky iframe.
