SVG: vektorová grafika v XML

SVG (Scalable Vector Graphics) je vektorová grafika zapsaná v XML. Každý tvar je element, každá barva atribut — obrázek proto můžeš upravit v textovém editoru, prohledat XPath nebo vygenerovat programem. Kapitola vysvětluje strukturu souboru, souřadnice a viewBox, tvary a cesty, vložení do webu a bezpečnostní rizika.

Autor: Aktualizováno

Co je SVG

Rastrový obrázek (PNG, JPEG) je mřížka barevných bodů. SVG místo toho popisuje, co se má nakreslit: obdélník tady, kruh tam, cesta s touhle křivkou. Prohlížeč obrázek vykreslí až při zobrazení, takže je ostrý v jakékoli velikosti — od ikony 16 px po billboard.

SVG je slovník XML: dodržuje všechna pravidla dobře formovaného XML a jeho elementy patří do jmenného prostoru http://www.w3.org/2000/svg. Standard vydává W3C; platným doporučením je SVG 1.1 (druhé vydání z roku 2011), novější SVG 2 je ve stavu kandidátského doporučení a prohlížeče z něj průběžně přebírají jednotlivé části. Soubor má příponu .svg a MIME typ image/svg+xml.

Struktura souboru

logo.svg 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60" width="240" height="120">
  <title>Značka XML.cz</title>
  <rect x="0" y="0" width="120" height="60" rx="8" fill="#1f3a5f"/>
  <circle cx="30" cy="30" r="14" fill="none" stroke="#f5b700" stroke-width="4"/>
  <path d="M55 18 L70 30 L55 42" fill="none" stroke="#ffffff" stroke-width="4"/>
  <text x="78" y="36" font-family="sans-serif" font-size="14" fill="#ffffff">xml</text>
</svg>
  • Kořenem je <svg> s deklarací jmenného prostoru. Bez xmlns samostatný soubor prohlížeč nevykreslí jako obrázek, ale zobrazí ho jako obecné XML.
  • Elementy se kreslí v pořadí, v jakém jsou zapsané — pozdější překrývá dřívější. Žádný z-index v SVG není.
  • <title> jako první potomek slouží jako textový popis pro čtečky obrazovky, delší popis patří do <desc>.
  • Protože jde o XML, jediná chyba zápisu (neuzavřený element, & v textu místo &amp;) způsobí, že se obrázek nezobrazí vůbec. Prohlížeč místo něj vypíše chybu parseru.

Souřadnice, viewBox a velikost

Atribut viewBox="min-x min-y šířka výška" určuje vnitřní souřadnicový systém obrázku. V ukázce výše kreslíme do plochy 120 × 60 jednotek, osa y roste směrem dolů. Atributy width a height pak říkají, jak velký má obrázek být na stránce — tady 240 × 120 px, takže se všechno dvakrát zvětší.

Pokud se poměr stran viewBox a vykreslené plochy liší, rozhoduje atribut preserveAspectRatio. Výchozí xMidYMid meet obrázek vycentruje a zmenší tak, aby se vešel celý; none ho roztáhne a zdeformuje. Nejčastější rada pro web: ponech viewBox a velikost nastav z CSS — pevné width a height v souboru pak slouží jen jako výchozí rozměr.

Základní tvary a cesty

ElementCo kreslíHlavní atributy
rectobdélník, i se zaoblenými rohyx, y, width, height, rx, ry
circlekruhcx, cy, r
ellipseelipsacx, cy, rx, ry
lineúsečkax1, y1, x2, y2
polylinelomená čára (otevřená)points
polygonmnohoúhelník (uzavřený)points
pathlibovolný tvar z příkazůd
texttext, který zůstává textemx, y, font-size, text-anchor

Nejvšestrannější je <path>. Jeho atribut d obsahuje posloupnost příkazů pro „pero“ — grafické editory ukládají většinu tvarů právě takhle:

Příkazy v atributu d 
M 10 10      přesun pera na [10, 10] (začátek nového úseku)
L 90 10      úsečka do [90, 10]
H 90  V 50   vodorovná / svislá úsečka
C 20 0 80 0 90 50   kubická Bézierova křivka (2 řídicí body + cíl)
Q 50 0 90 50        kvadratická Bézierova křivka
A 20 20 0 0 1 50 50 eliptický oblouk
Z            uzavření cesty zpět na začátek
m, l, h, v, c, q, a, z – malá písmena = souřadnice relativně k aktuálnímu bodu

Vzhled se nastavuje atributy fill (výplň), stroke (obrys), stroke-width, opacity a dalšími. Stejné vlastnosti můžeš zapsat i v CSS — pravidla v CSS mají přednost před atributy.

Skupiny, definice a opakované použití

defs, symbol, use a gradient 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
  <defs>
    <linearGradient id="prechod" x1="0" x2="1">
      <stop offset="0" stop-color="#2b7de9"/>
      <stop offset="1" stop-color="#7b3fe4"/>
    </linearGradient>
    <symbol id="tecka" viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5"/>
    </symbol>
  </defs>
  <g fill="url(#prechod)" transform="translate(5 5)">
    <use href="#tecka" x="0" width="30" height="30"/>
    <use href="#tecka" x="35" width="30" height="30"/>
  </g>
</svg>
  • <g> seskupí elementy; styl a transform skupiny zdědí všichni potomci.
  • Obsah <defs> se nevykresluje, jen definuje gradienty, vzory, masky a symboly, na které se odkazuje přes id — například fill="url(#prechod)".
  • <use> vloží kopii jiného elementu. SVG 2 používá obyčejný atribut href; starší zápis xlink:href (s jmenným prostorem http://www.w3.org/1999/xlink) je zastaralý, ale prohlížeče ho stále podporují.
  • Hodnoty id musí být v dokumentu jedinečné. Když na stránku vložíš dvě SVG se stejným id="prechod", druhé použije gradient prvního.

Jak SVG vložit do webu

Způsob vloženíSkripty v SVGStylování z CSS stránkyKdy použít
<img src="logo.svg">neběžíneobrázky a loga, bezpečná volba
CSS background-imageneběžínedekorace, ikony v pozadí
<svg> přímo v HTMLběží jako skripty stránkyano (currentColor, třídy)ikony, grafy, animace
<object data="…">běžíneinteraktivní SVG s vlastními skripty

SVG vložené přímo do HTML stránky (inline) zpracovává HTML parser, takže tam xmlns psát nemusíš a drobné chyby zápisu prohlížeč opraví. Výhodou je, že currentColor převezme barvu textu okolního prvku a ikonu obarvíš z CSS:

Ikona v tlačítku 
<!-- SVG přímo v HTML: xmlns není potřeba, barva se dědí přes currentColor -->
<button class="tlacitko">
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
    <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Pokračovat
</button>

Pro background-image se SVG převádí na data: URI — nejlépe URL-kódované, ne Base64, protože text se lépe komprimuje. Převod za tebe udělá nástroj SVG do CSS.

Bezpečnost: SVG není jen obrázek

SVG může obsahovat <script>, obsluhy událostí (onload), odkazy javascript: i vložené HTML přes <foreignObject>. Když web dovolí uživatelům nahrát SVG a pak ho zobrazí přímo na své doméně, jde o klasickou cestu k útoku XSS.

  • Nahraná SVG zobrazuj přes <img> — v tom režimu prohlížeč skripty nespouští.
  • Soubory posílej s hlavičkou Content-Security-Policy: script-src 'none' nebo z oddělené domény.
  • Před uložením je vyčisti knihovnou určenou pro SVG (například DOMPurify s profilem SVG) — vyzkoušej kontrolu a vyčištění SVG.
  • Při zpracování na serveru (převod do PNG, zmenšování) vypni v parseru DTD a externí entity — SVG je XML a je zranitelné útokem XXE stejně jako jakýkoli jiný XML vstup.

Optimalizace a práce s SVG jako s XML

Soubory z grafických editorů nesou metadata, vlastní jmenné prostory editoru (Inkscape, Illustrator), zbytečně přesná čísla a prázdné skupiny. Optimalizátor typu SVGO je odstraní a soubor často zmenší o desítky procent — vyzkoušej SVG optimalizátor.

Protože SVG je XML, můžeš ho zpracovat běžnými nástroji: XSLT šablonou přebarvit ikony, nebo XPath najít všechny cesty. Pozor na jmenný prostor — výraz //path v SVG nic nenajde, protože path v něm leží ve jmenném prostoru SVG (viz Jmenné prostory):

XPath nad SVG 
//svg:path/@d                  (s registrovaným prefixem svg)
//*[local-name()="path"]/@d    (bez prefixu – funguje všude)