Výukový program SVG

SVG je zkratka pro Scalable Vector Graphics.

SVG definuje vektorovou grafiku ve formátu XML.


Příklady v každé kapitole

Pomocí našeho editoru "Vyzkoušejte si to sami" můžete upravit SVG a kliknutím na tlačítko zobrazit výsledek.

Příklad SVG

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Co byste již měli vědět

Než budete pokračovat, měli byste mít základní znalosti o následujícím:

  • HTML
  • Základní XML

Chcete-li nejprve studovat tyto předměty, najděte si výukové programy na naší domovské stránce .


Co je SVG?

  • SVG je zkratka pro Scalable Vector Graphics
  • SVG se používá k definování vektorové grafiky pro web
  • SVG definuje grafiku ve formátu XML
  • Každý prvek a každý atribut v souborech SVG lze animovat
  • SVG je doporučení W3C
  • SVG se integruje s dalšími standardy W3C, jako jsou DOM a XSL


SVG je doporučení W3C

SVG 1.0 se stalo doporučením W3C dne 4. září 2001.

SVG 1.1 se stalo doporučením W3C dne 14. ledna 2003.

SVG 1.1 (druhé vydání) se stalo doporučením W3C dne 16. srpna 2011.


Výhody SVG

Výhody použití SVG oproti jiným formátům obrázků (jako JPEG a GIF) jsou:

  • Obrázky SVG lze vytvářet a upravovat pomocí libovolného textového editoru
  • Obrázky SVG lze vyhledávat, indexovat, skriptovat a komprimovat
  • Obrázky SVG jsou škálovatelné
  • Obrázky SVG lze tisknout ve vysoké kvalitě v jakémkoli rozlišení
  • Obrázky SVG lze přiblížit
  • Grafika SVG neztrácí žádnou kvalitu, pokud je přiblížena nebo změněna velikost
  • SVG je otevřený standard
  • Soubory SVG jsou čisté XML

Vytváření obrázků SVG

Obrázky SVG lze vytvořit pomocí libovolného textového editoru, ale často je pohodlnější vytvořit obrázky SVG pomocí kreslicího programu, jako je Inkscape .