Obsah
SVG (Scalable Vector Graphics)
SVG je formát souboru založený na jazyce XML, který slouží k popisu dvourozměrné vektorové grafiky. Na rozdíl od rastrových formátů (jako je TIFF nebo JPEG), které jsou složeny z pixelů, SVG definuje obraz pomocí geometrických tvarů, cest, barev a textu.
V rámci naší digitální architektury je SVG preferovaným formátem pro loga, ikony a schémata díky své dokonalé ostrosti při jakémkoliv rozlišení a minimální datové náročnosti.
Klíčové výhody SVG
- Nezávislost na rozlišení: Obraz lze libovolně zvětšovat (škálovat) bez ztráty kvality. To je ideální pro responzivní WWW stránky zobrazené na mobilech i 4K monitorech.
- Editovatelnost: Jelikož jde o textový formát (XML), může náš Vývojový tým měnit barvy nebo tvary přímo v kódu aplikace nebo pomocí CSS.
- Přístupnost (Accessibility): Text uvnitř SVG je prohledávatelný vyhledávači a čitelný pro asistivní technologie, což zlepšuje naše SEO.
- Interaktivita a animace: SVG prvky mohou reagovat na akce uživatele (např. změna barvy při přejetí myší) pomocí JavaScriptu.
Technická struktura a integrace
SVG soubory jsou v podstatě textové dokumenty kódované v UTF-8. To umožňuje jejich verzování v systémech jako SVN nebo Git stejně snadno jako u zdrojového kódu.
Příklad kódu SVG
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
Využití v systému [[Jira]]
Naše dashboardy v systému Jira využívají SVG pro generování dynamických grafů a diagramů, což šetří přenosové pásmo v naší síti WAN ve srovnání s přenášením statických obrázků.
Bezpečnostní upozornění (SVG a [[Kybernetická bezpečnost|Security]])
Protože je SVG v podstatě XML dokument, může obsahovat skripty (JavaScript). To představuje určité riziko:
- XSS (Cross-Site Scripting): Útočník může do SVG vložit škodlivý kód.
Porovnání: SVG vs. TIFF
| Vlastnost | SVG | TIFF |
|---|---|---|
| Typ | Vektorový | Rastrový |
| Změna velikosti | Bez ztráty kvality | Ztráta kvality (pixelace) |
| Velikost souboru | Malá (pro grafiku) | Velká (pro fotografie) |
| Použití | Ikony, Loga, WWW | Tisk, Archivace, Fotografie |
Tip pro designéry: Před exportem SVG z grafického editoru vždy použijte nástroj pro minifikaci (např. SVGO). Odstraněním zbytečných metadat můžete zmenšit velikost souboru až o 60 %, což zrychlí načítání našich aplikací přes WAN.
— Související stránky: ZIF, WWW, TIFF, Vývojový tým, UTF, SVN, Jira, WAN, Kybernetická bezpečnost, VPC, UTM
