Formát SVG: Jak formát SVG promění vaši webovou grafiku

Formát SVG (Scalable Vector Graphics) představuje moderní a nesmírně flexibilní způsob, jak zobrazovat grafiku na webu. V dnešní době, kdy se klade důraz na ostrost, škálovatelnost a rychlost načítání, nabízí formát SVG mnoho výhod oproti tradičním rasterovým formátům. V tomto článku se ponoříme do hloubky, co je formát SVG, jak funguje a jak ho efektivně využívat v praxi. Budeme řešit technické detaily, uživatelský i SEO dopad a ukážeme konkrétní postupy pro práci s formátem SVG v různých scénářích.

Co je formát SVG a proč ho zvolit formát SVG pro web

Formát SVG je vektorový formát založený na XML, který definuje obraz pomocí geometrických tvarů, cest, textu a filtrů. Na rozdíl od rasterových formátů jako PNG nebo JPEG, SVG nezávisí na pixelech a dokáže se bez ztráty kvality zvětšovat či zmenšovat. To ho činí ideálním pro moderní webové projekty, kde je klíčová ostrost na různých zařízeních a při různých rozlišeních.

Hlavní výhody formátu SVG:

• Vektorová grafika bez ztráty kvality při škálování.
• Možnost stylování CSS a úprav pomocí JavaScriptu.
• Malé soubory pro jednoduché ikony a logo; výkonné pro složité ilustrace.
• Interaktivita a animace přímo v dokumentu SVG bez nutnosti externích knihoven.
• Accessibility a SEO: popisky a názvy mohou být čitelné pro čtečky obrazovky.
• Snadná integrace do HTML – inline SVG lze ladit přímo očima vývojáře.

Formát SVG také nabízí možnosti vrstvení, opakovaného použití (symboly) a definic, které zjednodušují organizaci grafiky ve velkých projektech. V dnešní době se často kombinuje s formátem SVG pro ikonografii, ilustrace a grafiku v responzivních webových šablonách.

Struktura a syntaxe formátu SVG

SVG používá XML syntaxi, což znamená, že veškeré grafické prvky jsou uzavřeny v značkách. Pro vývojáře to znamená, že SVG lze validovat, ladiť, verzovat a stylovat stejně jako jiné XML soubory. Základní kostra SVG vypadá následovně:

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="280" height="180" fill="none" stroke="black"/>
  </svg>

Klíčové atributy, které často využijete:

• viewBox – definice souřadnicového prostoru a míry v jednotkách užitých pro škálování.
• width, height – pevné rozměry. Při definování responsive designu se často nahrazují na CSS úrovni.
• xmlns – nutný identifikátor XML namespace pro správné zpracování SVG v HTML dokumentu.
• PreserveAspectRatio – jak má SVG reagovat na změny rozměrů (např. xMidYMid meet).

V praxi se často používá kombinace inline SVG a CSS pro stylování. Inline SVG umožňuje cílenou manipulaci s elementy skrze třídy a promováním JS, což je obzvlášť výhodné pro interaktivní grafiku a ikony.

Základní tvary a elementy formátu SVG

SVG nabízí sadu základních tvarů a cest, které lze kombinovat k vytvoření libovolné grafiky. Pojďme si krátce představit nejpoužívanější elementy:

• <rect> – obdélník
• <circle> – kruh
• <ellipse> – elipsa
• <line> – přímka
• <polyline> a <polygon> – spojování bodů do čar a tvarů
• <path> – nejvýkonnější a nejflexibilnější tvar pro složité křivky
• <text> – textový obsah v SVG

Praktické ukázky:

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="100" fill="steelblue" />
  <circle cx="100" cy="60" r="30" fill="orange" />
 </svg>

Pod povrchem se skrývá mnoho možností. Elementy lze kombinovat, stylovat CSS, řídit jejich viditelnost a dokonce animovat. Vše, co jde s CSS, jde i s SVG, a to s velkou dávkou flexibility.

Styly a CSS v formátu SVG

Styling formátu SVG je možné provádět inline přímo na jednotlivých prvcích, stejně jako prostřednictvím externího CSS. To umožňuje centralizovat vzhled ikon a ilustrací, což zjednodušuje údržbu projektů. Při práci s formátem SVG je dobré:

• používat třídy na elementech pro opakované použití stylů,
• definovat gradienty, vzory a filtry ve <defs> a následně na ně odkazovat,
• vyhýbat se příliš detailním renderům, které zvyšují velikost souboru a zhoršují výkon.

Příklady:

<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4CAF50"/>
      <stop offset="100%" stop-color="#2E7D32"/>
    </linearGradient>
  </defs>
  <rect width="150" height="80" fill="url(#grad)" />
</svg>

V rámci formátu SVG lze také definovat symboly (<symbol>) a jejich použití (<use>) pro opakovanou grafiku bez duplicity kódu.

Gradienty, filtry a text v SVG

Gradienty a filtry umožňují vytvářet vizuálně bohaté efekty bez nutnosti externích rasterových obrázků. Základními stavebními kameny jsou:

• linearGradient a radialGradient pro barevné hladké přechody,
• stop pro definování míst a barev v gradientu,
• feGaussianBlur, feDropShadow a další filtry ve <filter> pro rozostření, stíny a zvláštní efekty,
• text pro pevnou grafiku písma a případné stylování samotného textu v SVG.

Ukázka jednoduchého textu s gradientem:

<svg width="360" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="textGrad" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="#FF6B6B"/>
      <stop offset="100%" stop-color="#FFD93D"/>
    </linearGradient>
  </defs>
  <text x="20" y="70" font-family="Arial" font-size="60" fill="url(#textGrad)">SVG