SVG: vektorový formát, který na webu chyběl

Martin Michálek – 7. 9. 2014

Nezdá se to, ale SVG (Scalable Vector Graphics) je prastarý vektorový formát, jehož první standard pochází z roku 2001.

Jeho širšímu uplatnění dlouho bránil Microsoft, který pomocí Internet Exploreru až do verze 8 razil vlastní formát VML. To už jsou ale loňské sněhy a dávno to neplatí. SVG má dnes vynikající podporu a slibuje dříve nevídané možnosti pro rozhraní webových aplikací.

SVG je prostě XML

Související

Jedno z kouzel SVG je v možnosti ručně ho zapsat. Je to jednoduše XML texťák:

<svg width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#EDE29F" />
  <circle cx="150" cy="100" r="90" fill="#48440E" />
  <text x="75" y="130" font-size="77" fill="white">SVG</text>
</svg>

Ukázka naživo: cdpn.io/e/VaeqOo

Proč ho používat?

SVG je výborný formát, který nám pro tvorbu uživatelských rozhraní opravdu chyběl. Jeho výhody oproti bitmapám jsou nezpochybnitelné:

Nezávislý na rozlišení a device-pixel-ratio
Snadno spravovatelný, strojově generovatelný XML kód
Dynamicky upravitelný z CSS nebo JS
Menší datový objem než bitmapa
Přístupnost, indexovatelnost roboty [včetně Google]((http://googlewebmastercentral.blogspot.cz/2010/08/google-now-indexes-svg.html)

Malá nevýhoda je nutnost řešit fallbacky ve starších prohlížečích. Složitější a třeba interaktivní SVG budou také na méně výkonných zařízeních pomaleji vykreslované.

Využití? Od ikonek až po interaktivní schémata

Formát má velmi širokou škálu nasazení. Výborně se samozřejmě hodí na vkládání logotypů nebo ikonek. U těch jde samozřejmě o principiálně správnější řešení než vkládání pomocí ikonfontů, které je potřeba považovat za dočasný hack.

Další možnosti ovšem začínají být zajímavé:

stylování vzhledu jednotlivých částí ikonek pomocí CSS
složitější filtry
efekty textu
interakční efekty
složitější animace

Podívejte se na kompletní přehled v mém článku SVG inspirace. Příchod SVG asi dost obohatí vizuální jazyk webů.

Na jednom konci škály užití, kde leží ikony, tedy vektory logicky nahrazují bitmapy a hlavně PNG. Na druhém konci jsou složité interaktivní infografiky, které se dříve dělaly hlavně pomocí Flashe. SVG je takový malý Flash.

Možnost přímého vložení jako `<svg>`

Kromě běžného vložení do stylů přes background-image a do HTML přes <img> je tu zcela nová možnost vložení přímo přes značku <svg>. Tím se vykolíkovalo hřiště pro úpravu vektorů pomocí CSS nebo JS.

Objekt v příkladu uvedeném výše můžeme po najetí myši obarvit:

.svg-circle:hover {
  fill: #5FA316;
}

Naživo: cdpn.io/e/LNGqZw.

Jak SVG získat

Grafik webu vám nepřipravuje podklady ve vektorech? Hned za ním utíkejte a citlivě mu oznamte, že od příštího projektu to jinak nepůjde.

Pokud si připravujete podklady sami, na internetech se povaluje spousta kvalitních ikonek. Já velmi často chodím na Iconfinder. V aplikacích správu ikonek jako je Icomoon nebo Fontastic je možné vybrat si SVG export rovnou s PNG alternativami.

SVG si můžete samozřejmě editovat sami. Kromě obligátního Illustratoru je populární Inkscape a řada dalších nástrojů. Hezky prý s SVG pracuje Affinity Designer. Já třeba na Macu používám Graphic (dříve iDraw):

SVG v Graphic (dříve iDraw)

Podpora v prohlížečích? 95-98 % jich SVG umí

S klesajícími podíly starších IE mizí i důvody proč webaři SVG zatím moc nevyužívali. Formát nezvládá jen IE8 a Android 2.3 a starší. To je na začátku roku 2016 něco mezi dvěma a čtyřmi procenty podílu.

Řešení pro starší prohlížeče najdete v článku SVG fallbacky.