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.
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.
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 :).

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

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í).

@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.

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

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ú.

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 ;)
Novinky
2 rokmi
Aprílové vtípky: Výběr toho nejlepšího kolem počítačů, internetu a techniky
Výběr nejlepších aprílových vtípků 2019
2 rokmi
Fotky Google sa učia lepšie pracovať s dokumentmi
Spoločnosť Google prostredníctvom svojho účtu na sociálnej sieti Twitter oficiálne predstavila novú funkciu svojej aplikácie Fotky Google.
2 rokmi
Gmail dovoľuje naplánovať poslanie emailu neskôr
Spoločnosť Google dnes oznámila pridanie funkčnej novinky do svojej populárnej webmailovej služby Gmail, možnosť naplánovať poslanie emailu na neskôr.
3 rokmi
Používatelia Chrome začali prechádzať na nový rýchlejší Firefox, avizujú dáta Mozilly
Nový lepší a rýchlejší prehliadač Firefox 57 Quantum vyúsťuje zrejme do viac používateľov prechádzajúcich respektíve vracajúcich sa na tento prehliadač z iných prehliadačov, na osobných počítačoch aj smartfónoch.
3 rokmi
Briti dokončili kúpu SK-NIC-u. Nové .sk domény nechávajú za 8.4 eur
Predaj správcu slovenskej domény .sk, SK-NIC, bol dokončený a novým majiteľom po telekomunikačnej skupine Danubiatel, do ktorej patrí napríklad Swan a 4ka, je britská spoločnosť CentralNic.
Staršie novinky »TOP dlhšie
- Aj ty môžeš byť najčítanejší. Napíš článok »
TOP tento mesiac
- Aj ty môžeš byť najčítanejší. Napíš článok »
Nové články:
- 14.Kingston uvádza 128GB verziu šifrovaného USB
sep - 10.Tiché COMBO Logitech MK295
sep - 24.Farbičky v HTML a CSS, alebo?
aug - 23.Pochopte, ako vytvoriť virtuálny obchod v 6 krokoch
aug - 29.Kamery, cloud a bezpečnosť
jul - Viac »
- Aj ty môžeš byť najčítanejší. Napíš článok »
Pekné veci
Pekné veci
Pekné veci
Pekné veci
Posledné komentáre
- Pokiaľ používaš nejaký lepší bitmapový editor, napr. Photoshop, a chceš robiť retuše, ed...
- Veľmi dobrý článok a pre začiatočníka úplne odrazový mostík. https://ludwaismania1.blogs...
- Nova international a prima lus majú vysporiadané pravs ale aj CNN prima News
- Tv Joj nijako neobmedzuje šírenie médii, ktoré majú vysporiadané licenčné práva pre Slov...
- Nech televizie vrátia naspäť originál verzie a tie internationali nech zrušia. Každý si ...
Kritika
Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!
Reklama
Slovenská IT komunita
Seriály zo Zajtra.sk
· Ako písať blog
· Ako sa stať PHP ninja s Yii Frameworkom
· Aplikácie pre Facebook
· CSS triky
· iOS vývojára príhody a skúsenosti
· Jednoduché programy, ktoré vám ušetria čas
· Modelovanie webového sídla
· Nauč sa CodeIgniter [HD]
· Nauč sa jQuery [HD]
· Nette PHP framework
· OOP v Javascripte
· Programujeme v Jave
· Programujeme v Lazaruse
· Programujeme v Pythone
· Robíme Eshop v ASP.NET Web Pages
· Slovenskí iOS developeri
· Webdizajn krok po kroku
· Yablkov TurboTip [HD]
@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?