Skálázható vektoros grafika (svg) 1
A vektoros grafika széles körben alkalmazható nyomtatott termékekben. Ami a weboldalt illeti, itt is használhatunk vektoros grafikákat SVG vagy Scalable Vector Graphics (skálázható vektoros grafika) segítségével. A hivatalos W3.org specifikációban az SVG leírása a következő:
A kétdimenziós grafikák XML-en keresztüli leírására szolgáló nyelv. Az SVG lehetővé teszi számunkra, hogy háromféle grafikus objektumot használjunk: vektoros grafikai alakzatok (például egyenes és ívelt vonalakból álló útvonalak), képek és szövegek.
A méretezhető vektoros grafika előnyei
A weboldalakon megjelenő grafika használatával a méretezhető vektoros grafika számos előnnyel jár a raszteres grafikákkal szemben, amelyek magukban foglalják:
Engedélytől való függetlenség
A raszteres grafikák (vagy a bitképek) a felbontástól függenek, mert képpontok használatával hozták létre. Ha egy ilyen grafikus elem méretét növeli, akkor a nagy négyzetek azonnal megjelennek. A vektorgrafikus, mivel ez nem történik meg, mert nem függ a felbontás, hanem alapul matematikai számításokat, amely lehetővé teszi számunkra, hogy növelje meg, hogy bármilyen méretű, és ne veszítse el a minőség.
A méretezhető vektoros grafikákat közvetlenül a HTML-dokumentumba lehet beágyazni az svg tag használatával, így a böngészőnek nem kell további lekérdezése a grafika számára. Ez pozitív hatással van a weboldal teljesítményére is.
Stílus és szkriptek
Az svg tag használatával történő direkt integrálás lehetővé teszi számunkra, hogy stilizálja a grafikát a CSS segítségével. Az objektum ilyen paramétereit háttérszín, áttetszőség, határok és így tovább módosíthatjuk, ugyanúgy, mint a HTML-ben. Azt is tudjuk kezelni a grafikát, j # 097; vascript.
Képesség animációra és szerkesztésre
A kisebb fájlméret
Az SVG kisebb méretű, mint a raszteres grafika.
Egyszerű formákat rajzoljon az SVG használatával
Miután a leírások, levonhatjuk egyszerű formák, mint a sokszögek, körök, ellipszisek, vonalak vagy SVG és annak érdekében, hogy létrehoz egy böngésző méretezhető vektorgrafikus, ezek grafikus elemeket kell elhelyezni «svg» címkéket. Nézzük az alábbi példákat:
Ahhoz, hogy vonalat húzzon SVG segítségével, használhatjuk a "vonal" elemet. Ez az elem egyenes vonal rajzolására szolgál, így csak két pontból áll: a kezdő és a végpontokból.
Mint látható a fenti, a koordinátáit a kiindulási pont a vonal szerepel az első két attribútum x1 és x2, és a koordináta a végső pont a meghatározott attribútum y1 és y2.
Van még két másik tulajdonság: a stroke és a stroke-width, amelyek felelősek a határ színétől és szélességétől. Másrészt ezen attribútumokat line stílusban is definiálhatjuk az alábbiak szerint:
és ez ugyanazt eredményezi.
Itt minden nagyon jól illeszkedik a "vonalhoz", de a "vonallánc" elem segítségével több vonalat rajzolhatunk meg, nem pedig egy. Íme egy példa:
A "polyline" elem olyan pontok attribútumait tartalmazza, amelyek a vonalak összes koordinátáját tartalmazzák.
Rajzoljon egy téglalapot, ugyanolyan egyszerűen, csak a "rect" elem segítségével. Csak meg kell adnunk a szélességet és magasságot:
A körelem segítségével kör is rajzolható. Ebben a példában egy 100 kör sugárral rajzolunk egy kört, amelyet az r attribútum határoz meg:
Az első két attribútum, a cx és a cy, meghatározza a kör központi koordinátáját. A fenti példában mindkét x és y koordinátához 102-et állítunk be. Ha ezek az attribútumok nincsenek beállítva, akkor alapértelmezés szerint 0 lesz.
A "ellipszis" elem segítségével ellipsziseket rajzolhatunk. Itt minden működik ugyanúgy, mint a kör, de ezúttal is sikerül külön sugár sorban x és y sugár vonal a és Ry attribútumokat.
A "sokszög" elem segítségével sokszögeket és oldalakat rajzolhatunk, mint egy háromszög, nyolcszög. például:
Mint látható, egyszerű formátumú rajzok készítése az SVG segítségével a HTML-ben elég egyszerű. Mindazonáltal, ha bonyolultabb objektumra van szükségünk, akkor ez a módszer már nem működik számunkra.
Vagy magad is beágyazhatja az svg fájlt az alábbi elemek egyikével: beágyazás, iframe, objektum.
Az eredmény hasonló lesz.
Böngészõ támogatása skálázható vektoros grafika számára
Ami a böngészők támogatását illeti, a méretezhető vektoros grafika már számos modern böngészőben tökéletesen támogatott, kivéve az IE8-at és a korábbi verziókat. Ez azonban j # 097-gyel korrigálható, egy Raphael.js nevű vaskönyvtár. A feladat megkönnyítése érdekében a ReadySetRaphael.com eszközt használjuk. Az SVG kód átalakítása a Raphael által támogatott formátumba.
Először töltsd le és tedd fel a Raphael.js könyvtárat a HTML kódodba. Ezután töltse le az svg fájlt a webhelyre, majd másolja és illessze be a generált kódot a következő terhelési függvénybe:
A testcímke belsejében helyezze be a következő divet az id attribútummal rsr-vel.
És ezzel befejeztük! Nézd meg az alábbi példát.
Tehát ez az SVG alapja. Reméljük, hogy most egy kicsit érted ezt a témát. Ez az egyik legjobb módja annak, hogy optimalizálja az oldalaink teljesítményét, miközben még a Retina képernyőkön is jól látható grafikát nyújt.
Mint általában, ha kíváncsi vagy, készítünk neked egy kis kiegészítő cikket.
Tekintse meg a bemutatót. | Letöltés forráskód