Scalable Vector Grapics

1998-et írunk, a sávszélességtől meggyulladnak a kábelek. Az Adobe az IBM és az Apple is összefogott ezekben a nehéz időkben és segítségükkel eljött az SVG, az emberiség megmentésére…

Az SVG-t 1999 óta használjuk grafikák megjelenítésére. Webfejlesztők hozták létre webfejlesztőknek. Kell ennél hatékonyabb technológia?! A Scalable Vector Graphics egy XML alapú, 2D-s képmegjelenítésre használt vektoros képformátum. Ennek megfelelően szöveges alapú, tehát jól tömöríthető, ami nagyban hozzájárult a népszerűségéhez. 2011-ben készült el az SVG 1.1 második verziója, de nemsokára jön az SVG 2.0 sok klassz támogatással (matrix3D() ❤, stb).

Can I use?

Természetesen vannak problémák az Explorer-rel, de alapvetően minden eszközön és böngészőben támogatott, szóval bátran használhatjuk. Nézzük is meg mire!

Miért szeretjük?

• Kisméretű
• Responsive
• Könnyű módosítani CSS-sel(szín, méret stb)
• Könnyen animálhatjuk

Ikonok

Az első és leghatékonyabb használati mód, mivel az ikonok egyszerű alakzatok és vektorosan elképesztő kis méretűek tudnak lenni. Példa: egy egyszínű 40 db ikonból álló szettet válogattam össze. PNG-t használva 445 Kb-tal számolhatunk, míg SVG-vel mindössze 101 Kb-tal.

Ezeken kívül használhatjuk őket ikon rendszerekben, mint pl a Fontello, FontAwesome vagy az Icomoon ❍. Az első kettő fontkészletet generál az SVG ikonokból, amit behúzhatunk az oldalunkba és módosíthatjuk CSS-sel. A Fontello-val saját ikonkészletünket használhatjuk. Az utóbbi is képes erre, de inkább egy másik funkcióját szeretjük. Az IcoMoon a meglévő ikonokból tud generálni egy SVG file-t, ezt tudjuk inline beilleszteni a html oldalunk aljára és az ikonokat az ID-jük segítségével használhatjuk az oldalunkon. Így használja őket a Github, CSS-tricks, Trulia stb.

<svg viewbox=”0 0 100 25" class=”social-icons”>
 <use xlink:href=”#facebook-icon”></use>
</svg>

Logók

Szerencsére lassan elfelejthetjük a PNG (Uram bocsáss… JPG 👵) pixeles logókat. Az SVG-ben sok lehetőség van logók terén. Készíthetünk vele responsive logókat, használhatunk a cégnév kiírására text tag-ekben egy szöveget, hogy egy SEO barát, indexelhető, kijelölhető, kereshető szöveget kapjunk. Bármely Google Fonttal működik behúzás után.

Grafikák

Természetesen rajzolhatunk szuper grafikákat is vektorosan pl. Illustrator-ban, majd kimenthetjük SVG-be és object vagy embed tag-gel beilleszthetjük az oldalunkba. Mondjuk így:

<object type="image/svg+xml" data="bblogo.svg"></object>

Esetleg generálhatunk belőle kódot és bemásolhatjuk a html file-ba, hogy CSS-sel vagy JS-sel leanimáljuk. Ezt hiívjuk inline SVG-nek Egy kis plusz idő befektetésével animálttá is tudjuk tenni.

See the Pen Popup Animation for Optimonk by Soma Szoboszlai (@szsoma) on CodePen.

Patternek

Egy másik izgalmas téma, aminek segítségével nem kell vesződni a patternek kivágásával. Egyszerűen csak megrajzoljuk vektorosan az alakzatot és SVG patternt csinálunk belőle. Akár képeket is kimaszkolhatunk így, ahol a pattern maga a kép, a maszk pedig egy SVG grafika.

See the Pen SVG patterns by Soma Szoboszlai (@szsoma) on CodePen.

Az SVG-vel elképesztő dolgokat művelhetünk, aminek én még csak a felszínét kapargatom. Ezért is ástam bele magamat ennyire témába. A későbbiekben ezekről szeretnék részletesebben írni: Data Visualization (Canvas vs SVG), Animációk és optimalizálásuk (CSS, SCSS, JS), Filterek készítése pixeles képekhez.