A skálázható vektorgrafika (SVG) áttekintése
A nyomtatott médiában széles körben alkalmazzák a vektorgrafikát. Egy webhelyen vektorgrafikát is adhatunk az SVG vagy a Méretezhető vektorgrafika. Hivatkozva a W3.org hivatalos specifikációjára, az SVG leírása:
Nyelv a kétdimenziós grafikák XML-ben történő leírásához. Az SVG háromféle ßgrafikus objektumot tesz lehetővé: vektorgrafikus formák (például egyenes vonalakból és görbékből álló útvonalak), képek és szöveg.
Valószínűleg 1999 óta van, és 2011. augusztus 16-tól W3C-ajánlássá vált. Mégis, az SVG még mindig jelentősen kihasználatlan, míg a Vector helyett a Bitmap használatával sok előnye van, hogy grafikus vagy képi szolgáltatást nyújtson egy weboldalon.
SVG előnyei
A weboldalakon megjelenő grafikák kiszolgálásának ideje alatt az SVG néhány előnyt kínál a Bitmap-hoz képest, amelyek közül néhány tartalmaz:
Független felbontás
A bittérkép / raszteres grafika felbontás függő - pixelekre épül. A megjelenített grafika pixeláltnak látszott, ha egy bizonyos nagyítási szinten átméretezhető. Ez nem történik meg a vektorgrafikával, ami a természetben független felbontás, mivel a grafikát egy matematikai egyenlet adja, amely ezt teszi méretezhető bármilyen zoom szinten, miközben a minőséget megőrzi, még a retina kijelzőn is.
A HTTP-kérelem csökkentése
Az SVG közvetlenül a HTML dokumentumba ágyazható be svg címkét, így a böngészőnek nem kell kérnie a grafikát. Ez a weboldal jobb terhelését is eredményezi.
Stílusok és parancsfájlok
Közvetlenül beágyazása svg A címke lehetővé teszi számunkra, hogy a grafikát egyszerűen CSS-en keresztül stílusozzuk. Tudunk az objektum tulajdonságainak módosítása mint például a háttérszín, az opacitás, a határok stb. Hasonlóképpen JavaScript segítségével is manipulálhatjuk a grafikát.
Animálható és szerkeszthető
Az SVG objektum animálható, ha az animációs elemet használja, vagy a JavaScript könyvtáron keresztül, mint a jQuery. Az SVG objektum szerkeszthető bármilyen szövegkódszerkesztővel vagy olyan grafikus szoftverrel, mint az Inkscape (ami ingyenes) vagy az Adobe Illustrator..
Kisebb fájlméret
Az SVG-nek kisebb fájlmérete van a Bitmaphoz képest, amely hasonló grafikus megjelenítéssel rendelkezik.
Alapformák rajzolása SVG-vel
A specifikáció szerint néhány alapformát rajzolhatunk ki, mint a téglalap, kör, vonal, ellipszis, vonallánc és sokszög az SVG-vel és annak érdekében, hogy a böngésző megjelenítse az SVG-grafikát, az összes grafikus elemet be kell illeszteni a címke. További részletekért tekintse meg az alábbi példákat:
Vonal
Rajzolni egy sor az SVG-ben használhatjuk a
Amint a fentiekben látható, a vonal kezdőpontjának koordinátája az első két attribútummal van kifejezve x1 és x2, míg a vonal végpontjának koordinátája kifejezve van y1 és y2.
Két másik attribútum is létezik ütés és stroke-szélességű amelyek a határ színét és a határ szélességét határozzák meg. Másik lehetőségként ezeket az attribútumokat egy inline stílusban is definiálhatjuk, például:
végül csak ugyanezt teszi.
- Demó megtekintése “Vonal”
Vonallánc
Ez majdnem hasonlít a
pont attribútumok, amelyek az összes vonalat tároló koordinátát tárolják.
- Demó megtekintése “Vonallánc”
Téglalap
Egy téglalap rajzolása is egyszerű
- Demó megtekintése “Téglalap”
Kör
Azt is rajzolhatunk egy kört a 100 sugárral r tulajdonság:
Az első két attribútum, cx és cy meghatározzák a kör középpontját. A fenti példában beállítottuk 102 mind a x és y koordináta, ha ezek az attribútumok nincsenek megadva, 0 az alapértelmezett érték lesz.
- Demó megtekintése “Kör”
Ellipszis
Ellipsziset rajzolhatunk x vonal sugara és y vonal sugara rx és ry tulajdonság;
- Demó megtekintése “Ellipszis”
Poligon
A ... val
- Demó megtekintése “Poligon”
Vektorgrafikus szerkesztő használata
Mint látható, az egyszerű objektumok SVG-vel való rajzolása HTML-ben meglehetősen egyszerű. Azonban, amikor az objektum összetettebbé válik, ez a gyakorlat már nem ideális, és fejfájást okoz.
Szerencsére, ahogy már említettük, használhatunk egy vektorgrafikus szerkesztőt Adobe Illustrator vagy Inkscape a munkát. Ha ismeri ezeket a szoftvereket, akkor sokkal könnyebben rajzolhat objektumokat a grafikus felhasználói felületükkel, nem pedig a grafikus kód kódolására HTML-címkével.
Ha az Inkscape-el dolgozik, mentheti a vektorgrafikát egyszerű SVG-ként, majd nyissa meg a szövegkódszerkesztőben. Most meg kell találnia az SVG kódokat a fájlban. Másolja az összes kódot, és illessze be azokat a HTML-dokumentumba.
Vagy beágyazhatja a .svg az egyik elemen keresztül; beágyaz, iframe és tárgy, például;
Az eredmények végül azonosak lesznek.
Ebben a példában ezt az Apple iPod-ot az OpenClipArt.org webhelyről használom.
- Demó megtekintése “iPod”
Böngésző támogatás
A böngésző támogatása tekintetében az SVG-t minden főbb böngészőben nagyon jól támogatták, kivéve az IE8-t és a korábbi verziókat. Ez a kérdés azonban megoldható ezzel a JavaScript könyvtárral, a Raphael.js néven. A dolgok könnyebbé tétele érdekében ezt az eszközt, a ReadySetRaphael.com-t használjuk, hogy SVG-kódunkat Raphael által támogatott formátumra alakítsuk át. Itt van, hogyan.
Először is töltsd le és töltsd le a Raphael.js könyvtárat a HTML-dokumentumhoz. Ezután töltse fel a .svg másolja és illessze be a generált kódot a következő terhelésbe funkció;
window.onload = függvény () // a Raphael kód itt megy
Benne test címkét, tegye a következőket div val vel útvonal-ellenőrző radar id attribútum;
Ez az, kész. Nézze meg a példát az alábbi linkről.
- Demó megtekintése “Raphael”
Végső gondolatok
Tehát ez az alapja az SVG-nek. Reméljük, hogy most tisztességesen megérti ezt a témát. A legjobb módja a webhely optimalizálásának bármilyen képernyőfelbontás esetén, még retina kijelzőn is.
Mint mindig, ha kalandos ember vagy, itt még néhány referenciát és beszélgetést tettünk, hogy mélyebbre lássuk ezt a témát.
- Bevezetés az SVG - W3 iskolákba
- Felbontás független az SVG - Smashing Magazine-tól
- Miért nem használsz SVG-t? - NetTuts
Köszönjük, hogy olvasott, és reméljük, hogy élvezted ezt a hozzászólást.
- Demó megtekintése
- Letöltés forrása
