spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Marcel Zúbrik 1.9.2013
Hodnoť článok:
6 0

Na čo je nám SVG?

Viete čo je SVG? Aké je jeho využitie vo webovej grafike? Ak nie, tu je pár základných info o tomto štandarde a jeho použití na webe.

SVG logo
Logo SVG - vložené ako IMG

Mnohí webdizajnéri ešte aj dnes považujú príponu SVG za exotickú. Dôvodom nie zrejme ani tak chýbajúca podpora v starších prehliadačoch, ako skôr neochota prechádzať po rastrovej grafike a Flash-i na niečo nové.
Podľa http://caniuse.com/#search=svg podporuje SVG v základných formách cez 80 percent prehliadačov, IE opäť ako posledný až od verzie 9. S použitím knižníc ako napr. Raphaël.js je možné používať SVG už od IE6.
S príchodom HTML5 parserov, podpory webfontov, ignorovaním Flashu na niektorých mobilných systémoch a požiadavkami responzivity však vektorový formát pre web získava na dôležitosti a SVG prestáva byť nepoužiteľnou hračkou.

inline SVG

SVG je formát pre vektorovú grafiku postavený na XML. To síce znamená, že sa dá upraviť aj v textovom editore, ale pre prejav grafického cítenia to nie je práve najlepšie. Keďže je to formát, ktorý je na svete už nejaký ten rok, je podporovaný väčšinou editorov pre vektorovú grafiku.
Či už je to Adobe Illustrator, alebo zadarmo dostupný Inkscape, svoju grafiku môžete uložiť do SVG bez potreby ďalších nástrojov.

SVG je možné ukladať aj v komprimovanej podobe ako SVGZ a do HTML ho vkladať:

  • nepriamo cez značky object, embed, iframe a img,
  • priamo ako tzv. "inline SVG" v HTML5 začínajúc značkou <svg,
  • do CSS ako grafický zdroj pre štýly - napr. pozadie, ikonky, webfont.

Google používa HTML5+SVG pre svoje Charts.
S použitím knižníc ako Raphaël.js, či D3.js je možné vytvárať nie len fanscinujúce interaktívne grafy, ale celkom nové užívateľské prostredia.
Našiel som využitie pre SVG na svojich lezeckých stránkach v užívateľskom prostredí umožňujúcom lezcom "kresliť lezeckú cestu na fotku skaly" (viď. sprievodca na climbersroutes.com).
Využitie SVG je široké, ako sa napokon snažím predviesť aj prvkami v tomto článku, ktoré sú vo formáte SVG.

Možnosti využitia sú len na fantázií a s časom počet praktických použití mimo experimentov nadšencov rastie. S knižnicami ktoré dnes existujú je SVG tým chýbajúcim vektorovým nástrojom web grafika. Pretože hoci nám vládnu rastre, tak ako v tlačovinách, aj na webe majú vektory svoje opodstatnenie:

  • vlastnosťou vektorov je, že bez ohľadu na to, aký veľký chcete mať obrázok, veľkosť súboru je stále rovnaká. Či už chcete pokryť pozadie na grafikovej 30-palcovej pýche, alebo 3 palce na školákovom smartphone, stačí jeden súbor.
  • na rozdiel do Flash-u, ako XML jazyk vytvára elemety vrámci DOM a teda priamo manipulovateľné cez JS. To umožňuje nie len animácie (tie podporuje aj samotné SVG cez svoje SMIL) ale hlavne interaktivitu a prepojenie všetkých častí webstránky.

Chcem predstaviť ešte jeden zaujímavý spôsob využitia SVG. Odkedy svet objavil Prezi prezentácie, tie vytvorené office programoch sú už trochu fádne. Spojiť spôsob akým sú v Prezi chápané prezenácie s možnosťou bezplatne tvoriť a na webe publikovať prezentácie. To je výsledok, ktorý ponúka projekt Sozi - viď priloženú prezentáciu v SVG vytvorenú pomocou neho:

V prezentácii sa posúvaš kliknutím alebo šípkami.

Tento článok nemá ambíciu byť podrobným sprievodcom pre grafika s ambíciou ponoriť sa do tajov SVG. Na to slúžia okrem samotného detského objavovania iné, lepšie zdroje (napr. Learn SVG).
Tento článok ma za ambíciu iba poukázať v slovenčine na to, že takýto formát tu existuje, využíva sa a začína sa zaujímavými spôsobmi uplatňovať v praxi, rozširujúc tak možnosti webových prezentácií.

Pokiaľ niečo v článku nefunguje ako má, zrejme máte starý prehliadač. Ak chcete vidieť priamo ukážky použitia SVG v kóde, pozrite si odkazy, alebo kód tohto článku :).

Marcel Zúbrik Marcel Zúbrik

Didaktik M to začal, 486 rozvinulo, no základom bol prvý iMac. Práca v polygrafii ako grafik/sadzač, postupný prechod na tvorbu aplikácií pre Mac, Win, Linux a Web pre malé a stredné firmy. Vývoj vlastného CMS. Turistika, lezenie, kresba, písanie, výroba vecí virtuálnych i hmotných.


Hodnoť článok:
6 0

8 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Marcel Zúbrik 16.10.2013 19:15:56
@Miloš zacitujem ti teda z článku "SVG je možné ukladať aj v komprimovanej podobe ako SVGZ ...". Nepomýlil si si skratku aj článok?
1 1 Miloš 26.9.2013 13:23:39
Ak by som mal použiť SVG, tak len v prípade núdze. Je to zbytočne dlhé, pretože tam chýba kompresia. Čudujem sa, že dnes, keď sa komprimuje ešte aj pár kilobajtový dokument (odt, docx, ap.) nebol nikto schopný spraviť komprimovanú verziu SVG. To je potom radosť načítavať stránky cez pomalé internetové pripojenie (áno, na dedinách zvyčajne 3G nehrozí).
0 0 Marcel Zúbrik 9.9.2013 07:39:56
@David Ursiny - v CSS nema SVG kod taku podporu, aby sa oplatilo ho tam davat tak ako si urobil v priklade - priamo znackami. Avsak daj ho tam ako uz kodovany v base64 ( http://www.mobilefish.com/services/base64/base64.php ) a uvidis, ze podpora je ovela lepsia.
0 0 David Ursiny 4.9.2013 17:29:26
Diki za článok. Aj mne je svg sympatické.
Robil som nejaké pokusy so zápisom svg kódu do css a aj to má celkom dobrú podporu v browseroch (no.. keď tak na to po čase pozerám, teda nie až takú dobrú :-))
http://provisorium.davidursiny.com/projekty/svg/svg_bg1.html
1 0 Marcel Zúbrik 2.9.2013 07:53:44
Vďaka vám :)
@kaktus Áno, vďaka za pripomenutie - vždy treba zvažovať, aký formát je najvhodnejší. SVG nie je všeliek, iba dopĺňa sadu nástrojov, o chýbajúce vektory. Podľa potrieb a veľkosti sa posúdi, či sa viac hodí JPG alebo PNG a pri bežných weboch menej často priberieme do úvah aj SVG či GIF. Je však dobre, že tú tie možnosti sú.
0 0 Andrej Ševčík 1.9.2013 22:34:04
Inkscape je skvely soft, v niektorych veciach mi je sympatickejsi ako Illustrator, avsak chybal mu gradient mesh, hoci sa to dalo rozbehat dako neoficialne.. skoda
inak clanok fajn, palec hore ;)
0 0 mwb 1.9.2013 17:39:26
Chválim článok, SVG je mi už dlho veľmi sympatické :)
0 0 kaktus 1.9.2013 16:58:23
Pekne.

Este dodam, ze:
1. SVG je aj v tom cool, ze sa daju menit elementy SVG obrazka aj cez CSS (napr. ich farba a pod.)
2. Stale je dobre zvazit, ci pouzit SVG alebo PNG. Napr. pri drobnych ikonach staci PNG o velkosti 762b vs. to iste SVG o velkosti 3070b.
Zajtra.sk > Dizajn > Grafika > Na čo je nám SVG?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama