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 (
type = "image / svg + xml"), preto neodporúčam, aby ste ho opustili. - Môžete uviesť záložné informácie vo vnútri
objektpre prehliadače, ktoré nezobrazia 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 je, že namiesto dáta, umiestnite 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:
Tipy pre použitie iframe pre SVG
Rámec iframe sa zobrazí s okrajom okolo vášho obrázka, ak odstránite hranicu so štýlom, napríklad
style = "border: none;"
Ikona iframe neurčuje umiestnenie pluginu, takže v prípade, že prehliadač zákazníka nemá doplnok, nemusia sa vôbec zobraziť, alebo sa môže zobraziť chybové hlásenie.
Zobrazte SVG v príklade značky iframe.
