Article Index

Tento jazyk představuje možnost využití XML pro tvorbu grafiky. SVG tak má na rozdíl od běžně používaných formátů (jpeg, png, ...) výhodu v tom, že jej lze strojově číst a indexovat. Je to tedy jediný bežně používaný grafický formát, který může obsahovat text a zároveň splňovat pravidla přístupného webu a zároveň být čitelný fulltextovými vyhledavači. První verze je z roku 2001. SVG je vektorový formát, tudíž změny velikosti obrázku nemají vliv na jeho kvalitu, na druhou stranu jsme omezeni detaily,  které lze pomocí vektorů vyjádřit. Zároveň podporuje animace a možnost načítání externích dat, případně jej lze využit jako grafický výstup pro XSL(T).

Stejně jako u jiných jazyků XML i tento je možné editovat v jakémkoliv textovém editoru. Zároveň je možné obrázky vytvořené v grafických editorech ukládat do SVG (musí být podpora v grafickém software). Při animování lze využít také  skriptování, SVG tak může být interaktivní a umožňovat reakci na podněty uživatelů (například zoomování). Jako skriptovací jazyk lze využít JavaScript. Výhodou oproti zavedenému formátu flash (swf) je rychlost, minimální nároky na systém při zobrazení grafiky a velmi malá velikost. A samozřejmě přístupnost. Nevýhodou oproti flashi je pak absence skutečně kvalitního vývojového prostředí. Na rozdíl od Adobe Flash. Druhým konkurentem je pak HTML5 a CSS3.

V minulosti se mezi konkurenci řadil také formát VML, prosazovaný firmou Microsoft, tento formát byl v prohlížeči Internet Explorer preferován až do verze IE8.0, po akceptaci svg v IE mohlo dojít k velkému rozšíření. Formát je velmi univerzální, lze jej použít na ikony, loga, strukturální grafiku pro webové stránky, prezentační grafiku, a další. Na rozdíl od jpeg formátu nedochází k tvorbě artefaktů u tenkých čar a písma a oproti png je svg formát datově menší.

Použití SVG

Pokud pomineme běžné vložení obrázku pomocí značky img a případně jako pozadí vybraného prvku webové stránky, můžeme SVG vložit do HTML několika způsoby:

  • Značka svg
  • Značka embed
  • Značka object
  • Značka canvas

Značka <svg>

Pokud zvolíme nejjednodušší možnost, vložení do HTML lze realizovat přímo pomocí odpovídající značky.

<html>
  <body>
    <h1>Můj první obrázek - kruh</h1>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="200" cy="200" r="50" stroke="blue" stroke-width="5" fill="lightblue" />
    </svg>
  </body>
</html>

Tento obrázek obsahuje kruh, který má souřadnice středu 200px od horního okraje a 200px od levého okraje. Kruh má poloměr 50px, je vykreslen 5px silnou modrou čárou a je vyplněn světle modrou barvou.

Výhodou je:

  • podpora prohlížečů
  • nezávislost na rozlišení
  • podpora animace
  • plný přístup přes DOM API
  • lepší zpracování kódu
  • snadné použití
  • možnost plně využít možnosti svg

Nevýhodou je:

  • vložení přímo do kódu
  • nutnost úprav v HTML souboru
  • zpomalení u náročnějších scén
  • není vhodné pro hry

Vložení jako embed object

Při tomto způsobu použití je svg obrázek uložen na disku a je vložen jako objekt:

<embed src="/image.svg" type="image/svg+xml" />

Výhodou tohoto způsobu je vložení hotového obrázku.

Nevýhodou je pak zastaralost značky embed vůči HTML5.

Vložení jako object

Grafický prvek je opět uložen na disku, a vložen pomocí značku object:

<object data="image.svg" type="image/svg+xml" />

Výhodou je podpora v jakékoliv verzi jazyka HTML.

Nevýhodou je nemožnost použít skriptování.

Vložení pomocí značky canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas animation example</title>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="320" height="320">Your browser does not have support for Canvas.</canvas>
  </body>
</html>

SVG je do canvasu vkládáno pomocí skriptu, který umožní případné reakce na podněty nebo animování.

Výhody canvas:

  • Výkonné vykreslování ve 2D
  • Vykreslovány jsou pixely – nižší zatížení
  • Výborné pro bitmapovou grafiku (hry)

Nevýhody canvas

  • Bez DOM
  • Bez API pro animace
  • Vykreslování textů je podobné, jako u jpeg
  • Text není přístupný
  • Není pro uživatelské rozhraní