Pohled do škálovatelné vektorové grafiky (SVG)
Vektorová grafika byla široce aplikována v tiskových médiích. Na webových stránkách můžeme také přidat vektorovou grafiku s SVG nebo Škálovatelné vektorové grafiky. Citace z oficiální specifikace na W3.org, SVG je popsán jako:
Jazyk pro popis dvojrozměrné grafiky v XML. SVG umožňuje tři typy ßgraphic objektů: vektorové grafické tvary (např. Cesty sestávající z přímek a křivek), obrázky a text.
Bylo to vlastně od roku 1999 a od 16. srpna 2011 se stalo doporučením W3C. SVG je však stále značně nedostatečně využíván, zatímco použití vektoru místo bitmapy má mnoho výhod, které slouží k zobrazení grafiky nebo obrázku na webu..
Výhody SVG
Pokud jde o zobrazování grafiky na webových stránkách, SVG nabízí oproti Bitmapu několik výhod, z nichž některé zahrnují:
Rozlišení Nezávislé
Bitmapová / rastrová grafika je závislá na rozlišení - je postavena na pixelech. Při změně velikosti na určité úrovni přiblížení bude grafika sloužit jako pixelated. To se nestane vektorové grafice, která je v přírodě nezávislá, protože grafika je vyjádřena matematickou rovnicí, která ji činí škálovatelný při jakékoli úrovni zoomu při zachování kvality, i na displeji sítnice.
Omezení požadavku HTTP
SVG může být vložen přímo do HTML dokumentu svg tagu, takže prohlížeč nemusí dělat požadavek, aby sloužil grafice. Výsledkem je také lepší výkonnost webových stránek.
Styling a skriptování
Vložení přímo pomocí svg tag nám také umožní jednoduchou tvorbu grafiky pomocí CSS. Můžeme změnit vlastnosti objektu jako je barva pozadí, neprůhlednost, ohraničení atd. stejným způsobem jako běžná značka HTML. Podobně můžeme grafiku manipulovat také pomocí JavaScriptu.
Lze animovat a upravovat
Objekt SVG lze animovat, když používá prvek animace nebo knihovnu JavaScript jako jQuery. Objekt SVG lze také editovat pomocí libovolného textového editoru nebo grafického softwaru, jako je Inkscape (který je volný) nebo Adobe Illustrator.
Menší velikost souboru
SVG má menší velikost souboru ve srovnání s bitmapou, která má podobnou grafickou prezentaci.
Kreslení základních tvarů pomocí SVG
Podle spec, můžeme kreslit některé základní tvary, jako je obdélník, kruh, čára, elipsa, křivka a mnohoúhelník s SVG a aby prohlížeč vykreslil SVG grafiku, musí být všechny tyto grafické prvky vloženy do štítek. Další podrobnosti naleznete v níže uvedených příkladech:
Řádek
Kreslit řádek v SVG můžeme použít
Jak můžete vidět nahoře, souřadnice startovního bodu řádku je vyjádřena prvními dvěma atributy x1 a x2, zatímco je vyjádřena souřadnice koncového bodu čáry y1 a y2.
Existují také dva další atributy mrtvice a šířka zdvihu které se používají k definování barvy hranice a šířky ohraničení. Alternativně můžeme také definovat tyto atributy v inline stylu, jako je například:
to nakonec dělá totéž.
- Zobrazit ukázku “Řádek”
Polyline
Je to téměř podobné
bodů atributy, které ukládají všechny souřadnice, které tvoří řádky.
- Zobrazit ukázku “Polyline”
Obdélník
Kreslení obdélníku je také jednoduché
- Zobrazit ukázku “Obdélník”
Kruh
Můžeme také nakreslit kruh s 100 rádius, který je definován pomocí r atribut:
První dva atributy, cx a cy definují středovou souřadnici kruhu. Ve výše uvedeném příkladu jsme nastavili 102 oba pro X a y nejsou-li tyto atributy zadány, 0 jako výchozí hodnota.
- Zobrazit ukázku “Kruh”
Elipsa
Můžeme nakreslit elipsu X poloměr čáry a y poloměr čáry s rx a ry atribut;
- Zobrazit ukázku “Elipsa”
Polygon
S
- Zobrazit ukázku “Polygon”
Použití editoru vektorové grafiky
Jak vidíte, kreslení jednoduchých objektů pomocí SVG v HTML je poměrně snadné. Nicméně, když se objekt dostane složitější, že praxe již není ideální a dá vám bolest hlavy.
Naštěstí, jak jsme se zmínili výše, můžeme použít vektorový grafický editor Adobe Illustrator nebo Inkscape dělat práci. Pokud jste s těmito programy obeznámeni, je určitě mnohem snazší nakreslit objekty s jejich grafickým uživatelským rozhraním, než abyste sami kódovali grafiku ve značce HTML.
Pokud pracujete s Inkscape, můžete uložit svou vektorovou grafiku jako prostý SVG a pak ji otevřít v textovém editoru. Nyní byste měli najít SVG kódy v souboru. Zkopírujte všechny kódy a vložte je do dokumentu HTML.
Nebo můžete také vložit .svg soubor prostřednictvím jednoho z těchto prvků; vložit, iframe a objekt, například;
Výsledky budou nakonec stejné.
V tomto příkladu používám tento Apple iPod z OpenClipArt.org.
- Zobrazit ukázku “iPod”
Podpora prohlížeče
Pokud jde o podporu prohlížeče, SVG byl velmi dobře podporován ve všech hlavních prohlížečích, s výjimkou IE8 a dřívějších. Tuto záležitost však lze vyřešit pomocí této knihovny JavaScript nazvané Raphael.js. Abychom to usnadnili, použijeme tento nástroj ReadySetRaphael.com k převodu našeho SVG kódu do formátu podporovaného Raphaelem. Zde je návod.
Nejprve si stáhněte a zahrňte Raphael.js knihovny do dokumentu HTML. Poté nahrajte .svg soubor na stránku, zkopírujte a vložte vygenerovaný kód do následujícího zatížení funkce;
window.onload = function () // kód Raphaelu jde sem
Uvnitř tělo tag, dal následující div s rsr atribut id;
To je ono. Podívejte se na příklad z níže uvedeného odkazu.
- Zobrazit ukázku “Raphael”
Závěrečné myšlenky
Takže to je základ s SVG. Doufáme, že toto téma máte poctivě. Je to nejlepší způsob, jak optimalizovat vaše stránky pro jakékoli rozlišení obrazovky, a to i pro použití na displeji Retina.
Jako vždy, když jste dobrodružná osoba, zde jsme uvedli několik dalších odkazů a diskusí, abychom se hlouběji zabývali tímto tématem.
- Úvod do škol SVG - W3
- Rozlišení nezávislé na SVG - Smashing Magazine
- Proč nepoužíváte SVG? - NetTuts
Díky za čtení a doufáme, že se vám tento příspěvek líbí.
- Zobrazit ukázku
- Stáhněte si zdroj
