Pozrite sa do škálovateľnej vektorovej grafiky (SVG)
Vektorová grafika bola široko používaná v tlačových médiách. Na webovej stránke môžeme tiež pridať vektorovú grafiku so SVG alebo Škálovateľná vektorová grafika. Odvolávajúc sa na oficiálnu špecifikáciu na W3.org, SVG je popísaný ako:
Jazyk na popis dvojrozmernej grafiky v XML. SVG umožňuje tri typy grafických objektov: vektorové grafické tvary (napr. Cesty pozostávajúce z priamok a kriviek), obrázky a text.
V skutočnosti je to od roku 1999 a od 16. augusta 2011 sa stalo odporúčaním W3C. Napriek tomu sa SVG stále značne nevyužíva, zatiaľ čo v aplikácii Vector namiesto Bitmap je veľa výhod, ktoré slúžia na zobrazovanie grafiky alebo obrázkov na webových stránkach.
SVG Výhody
Pokiaľ ide o zobrazovanie grafiky na webových stránkach, SVG ponúka niekoľko výhod ako Bitmap, z ktorých niektoré zahŕňajú:
Rozlíšenie Nezávislé
Bitmapová / rastrová grafika závisí od rozlíšenia - je postavená na pixeloch. Zobrazená grafika bude pri zmenách veľkosti pri určitej mierke zväčšená. To sa nestane s vektorovou grafikou, ktorá je v prírode nezávislá na rozlíšení, pretože grafika je vyjadrená matematickou rovnicou, ktorá ju robí škálovateľné na ľubovoľnej úrovni priblíženia pri zachovaní kvality, dokonca aj na displeji Retina.
Zníženie požiadavky HTTP
SVG môže byť vložený priamo do dokumentu HTML pomocou svg tag, takže prehliadač nemusí robiť žiadosť o zobrazenie grafiky. To tiež vedie k lepšiemu výkonu zaťaženia pre webové stránky.
Styling a skriptovanie
Vkladanie priamo s svg značka nám tiež umožní ľahko upraviť grafiku pomocou CSS. Môžeme zmeniť vlastnosti objektu ako je farba pozadia, nepriehľadnosť, ohraničenie atď., rovnako ako s bežnou značkou HTML. Podobne môžeme manipulovať s grafikou aj cez JavaScript.
Môže byť animovaný a upravený
Objekt SVG môže byť animovaný, keď používa prvok animácie alebo prostredníctvom knižnice JavaScript, napríklad jQuery. Objekt SVG je možné upravovať aj pomocou ľubovoľného editora textových kódov alebo grafického softvéru, ako je Inkscape (ktorý je zadarmo) alebo Adobe Illustrator.
Menšia veľkosť súboru
SVG má menšiu veľkosť súboru v porovnaní s bitmapou, ktorá má podobnú grafickú prezentáciu.
Kreslenie základných tvarov pomocou SVG
Podľa špecifikácie môžeme nakresliť niektoré základné tvary ako napr obdĺžnik, kružnica, čiara, elipsa, krivka a mnohoúhelník so SVG a aby prehliadač vykresloval grafiku SVG, musia byť všetky grafické elementy vložené do súboru tag. Pozrime sa na príklady nižšie pre viac podrobností:
riadok
Kresliť riadok v SVG môžeme použiť
Ako vidíte vyššie, súradnica začiatočného bodu je vyjadrená prvými dvoma atribútmi x1 a x2, pričom súradnica koncového bodu línie je vyjadrená hodnotou y1 a y2.
Existujú tiež dva ďalšie atribúty: mŕtvica a mŕtvice šírky ktoré sa používajú na definovanie farby hraníc a šírky ohraničenia. Alternatívne môžeme definovať tieto atribúty v inline štýle, napríklad:
to nakoniec len robí to isté.
- Zobraziť demo “riadok”
krivka
Je to skoro podobné
body atribúty, ktoré ukladajú všetky súradnice, ktoré tvoria riadky.
- Zobraziť demo “krivka”
obdĺžnik
Výkres obdĺžnika je tiež jednoduchý
- Zobraziť demo “obdĺžnik”
kružnice
Môžeme tiež nakresliť kruh s 100 polomer, ktorý je definovaný s r atribút:
Prvé dva atribúty, cx a cy definujú stredovú súradnicu kruhu. Vo vyššie uvedenom príklade sme nastavili 102 obaja pre X a y ak tieto atribúty nie sú špecifikované, 0 sa bude považovať za predvolenú hodnotu.
- Zobraziť demo “kružnice”
elipsa
Môžeme nakresliť elipsu X line polomer a y line polomer s rx a ry atribút;
- Zobraziť demo “elipsa”
polygón
S
- Zobraziť demo “polygón”
Používanie vektorového grafického editora
Ako môžete vidieť, kreslenie jednoduchých objektov pomocou SVG v HTML je pomerne jednoduché. Keď sa však objekt stáva zložitejším, táto prax už nie je ideálna a dá vám bolesť hlavy.
Našťastie, ako sme už uviedli vyššie, môžeme použiť vektorový grafický editor Adobe Illustrator alebo Inkscape robiť prácu. Ak ste oboznámení s týmto softvérom, určite je oveľa jednoduchšie nakresliť objekty s ich grafickým používateľským rozhraním, než aby ste kódovali sami v HTML tagu.
Ak pracujete s aplikáciou Inkscape, môžete uložiť vektorovú grafiku ako obyčajnú SVG a potom ju otvoriť v editore textových kódov. Teraz by ste mali nájsť kódy SVG v súbore. Skopírujte všetky kódy a vložte ich do dokumentu HTML.
Alebo môžete tiež vložiť .svg súbor prostredníctvom jedného z týchto prvkov; vložiť, iframe a objekt, napríklad;
Výsledky budú nakoniec rovnaké.
V tomto príklade používam Apple iPod od OpenClipArt.org.
- Zobraziť demo “iPod”
Podpora prehliadača
Pokiaľ ide o podporu prehliadača, program SVG bol veľmi dobre podporovaný vo všetkých hlavných prehliadačoch, okrem IE8 a skôr. Ale táto záležitosť môže byť vyriešená pomocou tejto knižnice JavaScript, nazývanej Raphael.js. Aby sme to uľahčili, použijeme tento nástroj, ReadySetRaphael.com, aby sme previedli náš kód SVG do formátu podporovaného programom Raphael. Tu je návod.
Najprv stiahnite a vložte súbor Raphael.js knižnica do vášho dokumentu HTML. Potom odovzdajte .svg súbor na lokalite, skopírujte a vložte vygenerovaný kód do nasledujúceho zaťaženia funkcie;
window.onload = function () // kód Raphael tu ide
Vnútri telo tag, vložte nasledovné div s RSR atribút id;
To je to, skončili ste. Pozrite si príklad z nižšie uvedeného odkazu.
- Zobraziť demo “Raphael”
Záverečné myšlienky
Takže to je základ SVG. Dúfame, že teraz máte na túto tému spravodlivé pochopenie. Je to najlepší spôsob, ako optimalizovať vaše webové stránky pre akékoľvek rozlíšenie obrazovky, a to aj pre použitie na displeji Retina.
Ako vždy, ak ste dobrodružná osoba, tu sme uviedli ešte niekoľko referencií a diskusií, ktoré sa hlbšie zaoberajú touto témou.
- Úvod do škôl SVG - W3
- Nezávislý rozbor so SVG - Smashing Magazine
- Prečo nepoužívate SVG? - NetTuts
Ďakujeme za čítanie a dúfame, že ste si túto pozíciu užili.
- Zobraziť demo
- Stiahnuť zdroj
