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

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

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é:

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:

Příchod SVG asi dost obohatí vizuální jazyk webů. Mrkněte se na tuhle prezentaci Sary Soueidan.

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.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Responzivní design.

Píšu ebook o responzivním designu, pomozte mi prosím předobjednáním

11. 1. 2017 na blogu

Ano, je to tak. Už nějadou dobu pracuji na novém ebooku. O procesu tvorby responzivních webů, o svých zkušenostech s ním a taky trochu o principech dnešního webdesignu. Bude rozsáhlejší, barevnější a detailnější než jeho starší sourozenec.

Majitelé „m tečka“ webů pozor: Google bude mobile-first

10. 11. 2016 na blogu

Google už oficiálně představil svůj záměr začít indexovat a řadit primárně z pohledu uživatele mobilních zařízení.

Kurz „Dnešní webová kodéřina“

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Kurz vede Martin Michálek. Příští termín: 23. února.

Termíny dalších veřejných školení

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč