SVG: co to je, klíčové pojmy a použití ve webovém vývoji

Co je SVG?

SVG — formát vektorové grafiky založený na XML, který se objevil v roce 2001 jako doporučení W3C. Na rozdíl od rastrových formátů, SVG popisuje obrázek pomocí geometrických primitiv: bodů, čar, křivek a mnohoúhelníků. Soubor SVG je běžný textový XML dokument, který lze číst, upravovat a komprimovat standardními nástroji.

Architektura SVG zahrnuje několik klíčových konceptů. viewBox definuje virtuální souřadnicový systém, nezávislý na skutečných rozměrech prvku. Například viewBox="0 0 100 100" vytváří čtvercovou mřížku 100×100, uvnitř které jsou všechny souřadnice pevné. Při změně šířky nebo výšky kontejneru se obsah proporcionálně škáluje.

Podle W3C SVG 2 Specification moderní verze SVG podporuje gradienty, masky, filtry, text s libovolným umístěním, interaktivitu přes JavaScript a animace přes CSS a SMIL. SVG je integrováno do DOM jako plnohodnotný HTML prvek, což umožňuje programové ovládání každého grafického primitiva.

V mobilním vývoji se SVG také používá v iOS přes UIGraphicsImageRenderer a v Androidu přes VectorDrawable — oba formáty převádějí popisy podobné SVG na hardwarově akcelerované rastry na GPU.

Historie a vývoj formátu SVG

SVG 1.0 se stalo doporučením W3C v roce 2001, SVG 1.1 v roce 2003, SVG 2.0 je ve vývoji od roku 2012. Hlavní novinkou SVG 2 je hlubší integrace s CSS, podpora compositing a blending modes a možnost použití SVG v HTML bez prefixů namespace.

Přestože SVG 2 ještě nedosáhlo statusu Recommendation, moderní prohlížeče již podporují většinu jeho funkcionality. Chrome, Safari, Firefox a Edge mají téměř úplnou podporu SVG 1.1 a významnou část SVG 2.

Základní prvky SVG

SVG poskytuje sadu prvků pro popis dvourozměrné grafiky. Každý prvek má atributy, které určují jeho polohu, velikost a vizuální vzhled. Atributy mohou být zadány jako XML atributy nebo přes vlastnosti CSS.

• <rect> — obdélník s atributy x, y, width, height, rx, ry (zaoblení rohů).
• <circle> — kružnice s atributy cx, cy (střed) a r (poloměr).
• <ellipse> — elipsa s atributy cx, cy, rx, ry.
• <line> — úsečka s atributy x1, y1, x2, y2.
• <polyline> — lomená čára s atributem points (seznam souřadnic).
• <polygon> — uzavřený mnohoúhelník s atributem points.
• <path> — libovolný obrys s atributem d (příkazy: M, L, C, Q, A, Z).
• <text> — textový prvek s atributy x, y, font-size, font-family.

Prvek path — nejvýkonnější a nejflexibilnější prvek SVG. Atribut d obsahuje sekvenci příkazů: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Každý příkaz má absolutní nebo relativní formu (velké nebo malé písmeno).

SVG také podporuje seskupování prvků přes <g>. Skupina dědí vizuální atributy (fill, stroke, transform) na všechny potomky. To umožňuje aplikovat jednotný styl na celou sadu tvarů a řídit jejich polohu pomocí jediného transform.

SVG vs rastrová grafika: srovnání formátů

Hlavní rozdíl mezi SVG a rastrovými formáty (JPEG, PNG, WebP) — způsob ukládání informací. Rastr ukládá barvu každého pixelu v mřížce pevné velikosti. SVG ukládá matematické příkazy pro reprodukci tvarů. Tento rozdíl určuje všechny výhody a nevýhody formátů.

Podle HTTP Archive, 2025 používá 68% webových stránek SVG pro ikony, 34% pro ilustrace a 22% pro loga. Průměrná velikost SVG ikony je 0.5–2 KB, zatímco rastrová ikona podobné kvality je 5–20 KB ve formátu PNG.

Pro fotografie a složité rastrové obrázky není SVG vhodné — velikost XML popisu přesáhne velikost ekvivalentního JPEG. Doporučená oblast použití SVG: ikony, loga, ilustrace, schémata, grafy, prvky rozhraní s adaptivním designem.

Kdy zvolit SVG a kdy rastrový formát

SVG — optimální volba pro prvky rozhraní, které musí být ostré na Retina displejích a při jakémkoli přiblížení prohlížeče. Rastr — pro fotografie, složité textury a obrázky s miliony barev, kde by vektorový popis byl neopodstatněně složitý.

Hybridní přístup — kombinace SVG pro prvky rozhraní a WebP/AVIF pro fotografický obsah — poskytuje nejlepší rovnováhu mezi kvalitou a výkonem načítání stránky.

Inline SVG a stylování přes CSS

Inline SVG — je vložení SVG značek přímo do HTML dokumentu, nikoli jako samostatný soubor přes <img> nebo background-image. Výhoda inline SVG je, že prvky SVG se stávají součástí DOM a mohou být stylovány přes CSS, ovládány přes JavaScript a animovány bez dodatečných požadavků na server.

Na rozdíl od <img src="icon.svg">, kde je SVG izolováno v shadow DOM, inline SVG dědí barvy a písma nadřazeného dokumentu. To umožňuje například změnu barvy ikony při najetí myší přes CSS pseudotřídu :hover bez načítání samostatného souboru pro každý stav.

Podle CSS-Tricks je inline SVG doporučený způsob použití ikon v moderních webových aplikacích. Vlastnosti CSS fill, stroke, stroke-width se aplikují přímo na prvky SVG. Pro přizpůsobení přes CSS je důležité, aby v původním SVG nebyly fill a stroke nastaveny jako inline atributy — jinak je CSS nemůže přepsat.

• Výhody: stylování přes CSS, ovládání přes JS, bez HTTP požadavků, adaptabilita viewBox.
• Nevýhody: zvýšení velikosti HTML stránky, nemožnost cacheování odděleně od HTML.
• Alternativa: SVG-sprites — spojení více SVG do jednoho souboru a použití <use href="#id">.

SVG-sprites řeší problém cacheování: všechny ikony jsou shromážděny v jednom souboru, prohlížeč jej načte jednou a jednotlivé ikony se připojují přes <use> s uvedením id potřebného prvku uvnitř sprite.

Animace SVG: CSS a SMIL

CSS animace SVG — nejrozšířenější a nejefektivnější způsob animace vektorové grafiky v prohlížeči. Vlastnosti CSS jako transform, opacity a fill se aplikují na prvky SVG stejně jako na HTML prvky. Pro animaci podél libovolné cesty se používá vlastnost CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) — vestavěný mechanismus animace v SVG, nezávislý na CSS. Prvky <animate>, <animateTransform> a <animateMotion> umožňují animovat libovolné atributy SVG bez JavaScriptu a CSS. SMIL animace je garantovaně synchronizována s frekvencí snímků prohlížeče.

Podle MDN Web Docs je SMIL podporováno ve všech moderních prohlížečích, ale CSS animace je považována za předvídatelnější a efektivnější. Hlavní scénář pro SMIL — animace atributů, které nejsou dostupné přes CSS, například d (path) prvku <path>.

JavaScript + requestAnimationFrame poskytuje maximální kontrolu nad animací SVG. Weboví vývojáři používají knihovny GSAP a Anime.js pro složité sekvence animací s časovými osami a easing funkcemi, které je obtížné realizovat čistým CSS.

Příklady kódu: vytváření SVG grafiky

První příklad — jednoduchá ikona domečku pomocí základních SVG prvků. Všechny tvary jsou rect a polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Druhý příklad — animace rotace loaderu přes CSS. Používá se <circle> s atributem stroke-dasharray pro vytvoření přerušovaného obrysu:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Třetí příklad — animace path přes knihovnu GSAP pro plynulé kreslení obrysu. GSAP pracuje s atributem stroke-dashoffset a vytváří efekt objevování čáry:

// Nakreslit cestu s GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});