En titt på skalbar vektorgrafik (SVG)
Vektorgrafik har använts i stor utsträckning i tryckta medier. På en webbplats kan vi också lägga till vektorgrafik med SVG eller Skalbar vektorgrafik. Citera från den officiella spec på W3.org beskrivs SVG som:
Ett språk för att beskriva tvådimensionell grafik i XML. SVG tillåter tre typer av β-grafiska objekt: vektorgrafikformer (t ex banor som består av raka linjer och kurvor), bilder och text.
Det har faktiskt funnits sedan 1999 och den 16 augusti 2011 blev det en W3C-rekommendation. Ändå är SVG fortfarande betydligt underutnyttjad, medan det finns många fördelar med att använda Vector snarare än Bitmap för att servera grafik eller bild på en webbplats.
SVG fördelar
I betraktande av att betjäna grafik på webbplatser erbjuder SVG några fördelar jämfört med Bitmap, varav några inkluderar:
Upplösning Oberoende
Bitmap / raster-grafik är upplösningsberoende - det är byggt på pixlar. Den grafik som visas kommer att se pixelated när den ändras på en viss zoomnivå. Det händer inte med vektorgrafik, vilket är självständigt upplösning, eftersom grafiken uttrycks med en matematisk ekvation som gör det skalbar vid vilken zoomnivå som helst samtidigt som kvaliteten bibehålls, även vid Retina Display.
Minskar HTTP-förfrågan
SVG kan integreras direkt i ett HTML-dokument med svg tagg, så webbläsaren behöver inte göra en förfrågan om att betjäna grafiken. Detta resulterar också i bättre belastningsprestanda för webbplatsen.
Styling och Scripting
Bädda in direkt med svg taggen kommer också att tillåta oss att stilen grafiskt enkelt genom CSS. Vi kan ändra objektegenskaper som bakgrundsfärg, opacitet, gränser, etc. på samma sätt som vi gör med vanlig HTML-tagg. På samma sätt kan vi också manipulera grafiken via JavaScript.
Kan animeras och redigeras
SVG-objekt kan animeras när det använder animeringselementet eller genom JavaScript-biblioteket som jQuery. SVG-objektet kan också redigeras med någon textkodredigerare eller en grafisk programvara som Inkscape (som är gratis) eller Adobe Illustrator.
Mindre filstorlek
SVG har en mindre filstorlek jämfört med Bitmap, som har en liknande grafisk presentation.
Ritning grundläggande former med SVG
Enligt specifikationen kan vi rita några grundläggande former som rektangel, cirkel, linje, ellips, polylin och polygon med SVG och för att webbläsaren ska kunna göra SVG-grafiken måste alla dessa grafiska element infogas i märka. Låt oss se exemplen nedan för mer information:
Linje
Att rita en linje i SVG kan vi använda
Som du kan se ovan uttrycks linjens startpunktskoordinat med de två första attributen x1 och x2, medan linjens slutpunktskoordinat uttrycks med y1 och y2.
Det finns också två andra attribut, den stroke och stroke-bredd som används för att definiera gränsens färg och kantens bredd. Alternativt kan vi också definiera dessa attribut i en inline-stil, som så:
det gör så småningom bara detsamma.
- Visa demo “Linje”
polyline
Det är nästan lika med
poäng attribut som lagrar alla koordinater som bildar linjerna.
- Visa demo “polyline”
Rektangel
Att rita en rektangel är också enkel med detta
- Visa demo “Rektangel”
Cirkel
Vi kan också rita en cirkel med 100 radie som definieras med r attribut:
De två första attributen, cx och cy definierar cirkelns centrumkoordinat. I ovanstående exempel har vi satt 102 både för x och y koordinera om dessa attribut inte anges, 0 kommer att tas som standardvärde.
- Visa demo “Cirkel”
Ellips
Vi kan rita en ellips med x radradius och y radradio med rx och ry attribut;
- Visa demo “Ellips”
Polygon
Med
- Visa demo “Polygon”
Använda Vector Graphic Editor
Som du kan se är det ganska lätt att rita enkla objekt med SVG i HTML. Men när objektet blir mer komplext, är den här praktiken inte längre idealisk och kommer ge dig huvudvärk.
Lyckligtvis, som vi har nämnt ovan, kan vi använda en vektor grafisk editor som Adobe Illustrator eller Inkscape att göra jobbet. Om du är bekant med den här programvaran är det säkert mycket lättare att rita objekt med deras GUI istället för att självkoda grafiken i HTML-taggen.
Om du arbetar med Inkscape, du kan spara din vektorgrafik som vanlig SVG, och sedan öppna den i textkodredigerare. Nu ska du hitta SVG-koderna i filen. Kopiera alla koder och klistra in dem i ditt HTML-dokument.
Eller du kan också bädda in .svg fil genom ett av dessa element; bädda in, iframe och objekt, till exempel;
Resultaten kommer så småningom att vara desamma.
I det här exemplet använder jag denna Apple iPod från OpenClipArt.org.
- Visa demo “iPod”
Webbläsarsupport
SVG har mycket bra stöd för webbläsarstöd i alla större webbläsare, förutom i IE8 och tidigare. Men denna fråga kan lösas med det här JavaScript-biblioteket, kallat Raphael.js. För att göra det enklare kommer vi att använda det här verktyget ReadySetRaphael.com för att konvertera vår SVG-kod till Raphael-format. Här är hur.
Först och främst ladda ner och inkludera Raphael.js biblioteket till ditt HTML-dokument. Ladda sedan upp .svg fil till webbplatsen, kopiera och klistra in den genererade koden inuti följande belastning fungera;
window.onload = function () // Raphael-koden går här
Inuti kropp tagg, lägg till följande div med rsr id attribut
Det är det, du är klar. Kolla in exemplet från länken nedan.
- Visa demo “Raphael”
Slutgiltiga tankar
Så det är grunderna med SVG. Vi hoppas nu har du en rättvisande förståelse av detta ämne. Det är det bästa sättet att optimera din webbplats för alla skärmupplösningar, även för användning på näthinnan.
Som alltid, om du är en äventyrlig person, har vi här lagt fram några fler referenser och diskussioner för att gräva djupare in i ämnet.
- En introduktion till SVG - W3 skolor
- Upplösning Oberoende med SVG - Smashing Magazine
- Varför använder du inte SVG? - NetTuts
Tack för att du läste och vi hoppas att du haft det här inlägget.
- Visa demo
- Hämta källa
