Et kig på Scalable Vector Graphics (SVG)
Vektor grafik er blevet anvendt bredt i trykte medier. På et websted kan vi også tilføje vektorgrafik med SVG eller Scalable Vector Graphic. Med henvisning fra den officielle spec på W3.org beskrives SVG som:
Et sprog til beskrivelse af todimensional grafik i XML. SVG tillader tre typer af β grafiske objekter: vektor grafiske former (fx stier bestående af lige linjer og kurver), billeder og tekst.
Det har faktisk eksisteret siden 1999 og den 16. august 2011 blev det en W3C-henstilling. Alligevel er SVG stadig betydeligt underudnyttet, mens der er mange fordele ved at bruge Vector i stedet for Bitmap til at betjene grafik eller billede på en hjemmeside.
SVG Fordele
I betjening af grafik på hjemmesider tilbyder SVG nogle fordele i forhold til Bitmap, hvoraf nogle omfatter:
Opløsning Uafhængig
Bitmap / raster-grafik er opløsningsafhængig - den er bygget på pixels. Den viste grafik ser ud pixeleret, når den ændres på et bestemt zoomniveau. Det sker ikke med vektorgrafik, som er uafhængig af opløsningen, da grafikken udtrykkes med en matematisk ligning, der gør det skalerbar på ethvert zoomniveau, samtidig med at kvaliteten opretholdes, selv ved Retina Display.
Reducering af HTTP-anmodning
SVG kan indlejres direkte i et HTML-dokument med svg tag, så browseren behøver ikke at gøre en anmodning om at betjene grafikken. Dette resulterer også i bedre belastningsydelse for hjemmesiden.
Styling og Scripting
Indlejring direkte med svg tag vil også give os mulighed for at stil grafikken nemt gennem CSS. Vi kan ændre objektegenskaber som baggrundsfarve, uigennemsigtighed, grænser osv. på samme måde som med almindelig HTML-tag. På samme måde kan vi også manipulere grafikken via JavaScript.
Kan animeres og redigeres
SVG-objekt kan animeres, når det bruger animationselementet eller gennem JavaScript-bibliotek som jQuery. SVG-objektet kan også redigeres med enhver tekstkodeditor eller en grafisk software som Inkscape (som er gratis) eller Adobe Illustrator.
Mindre filstørrelse
SVG har en mindre filstørrelse i forhold til Bitmap, der har en lignende grafisk præsentation.
Tegning Basic Shapes med SVG
Ifølge spec kan vi tegne nogle grundlæggende former som rektangel, cirkel, linje, ellipse, polylin og polygon med SVG og for at browseren skal gøre SVG grafikken, skal alle disse grafiske elementer indsættes i tag. Lad os se eksemplerne nedenfor for flere detaljer:
linje
At tegne en streg i SVG kan vi bruge
Som du kan se ovenfor, er linjens startpunkt koordinat udtrykt med de to første attributter x1 og x2, mens linjens endepunkt koordinat er udtrykt med y1 og y2.
Der er også to andre attributter, den slag og slagtilfælde bredde som bruges til at definere grænsens farve og grænsens bredde, henholdsvis. Alternativt kan vi også definere disse attributter inden for en inline-stil, som sådan:
det gør det til sidst bare det samme.
- Se Demo “linje”
polyline
Det ligner næsten på
punkter attributter, der lagrer alle de koordinater, der danner linjerne.
- Se Demo “polyline”
Rektangel
Tegning af et rektangel er også enkelt med dette
- Se Demo “Rektangel”
Cirkel
Vi kan også tegne en cirkel med 100 radius som er defineret med r attribut:
De to første attributter, cx og cy definerer cirkelens centerkoordinat. I ovenstående eksempel har vi sat 102 både for x og y koordinere, hvis disse attributter ikke er angivet, 0 vil blive taget som standardværdien.
- Se Demo “Cirkel”
Ellipse
Vi kan tegne en ellipse med x linie radius og y line radius med rx og ry attribut;
- Se Demo “Ellipse”
Polygon
Med
- Se Demo “Polygon”
Brug af Vector Graphic Editor
Som du kan se, er det ret nemt at tegne enkle objekter med SVG i HTML. Men når objektet bliver mere komplekst, er den praksis ikke længere ideel og vil give dig hovedpine.
Heldigvis, som vi har nævnt ovenfor, kan vi bruge en vektor grafisk editor som Adobe Illustrator eller Inkscape at udføre jobbet. Hvis du er bekendt med denne software, er det sikkert meget nemmere at tegne objekter med deres GUI i stedet for at kode grafikken selv i HTML tag.
Hvis du arbejder med Inkscape, du kan gemme din vektor grafik som almindelig SVG, og derefter åbne den i tekst kode editor. Nu skal du finde SVG-koderne i filen. Kopier alle koderne og indsæt dem inde i dit HTML-dokument.
Eller du kan også integrere .svg fil gennem et af disse elementer; indlejre, iframe og objekt, for eksempel;
Resultaterne vil i sidste ende være de samme.
I dette eksempel bruger jeg denne Apple iPod fra OpenClipArt.org.
- Se Demo “iPod”
Browser Support
Hvad angår browser support, har SVG været meget godt understøttet i alle større browsere, undtagen i IE8 og tidligere. Men dette spørgsmål kan løses med dette JavaScript-bibliotek, kaldet Raphael.js. For at gøre tingene lettere bruger vi dette værktøj, ReadySetRaphael.com til at konvertere vores SVG-kode til Raphael-understøttet format. Sådan er det.
Først og fremmest download og inkludere Raphael.js bibliotek til dit HTML-dokument. Upload derefter .svg fil til webstedet, kopier og indsæt den genererede kode inde i følgende belastning fungere;
window.onload = function () // Raphael-koden går her
Inde i legeme tag, læg følgende div med RSR id attribut;
Det er det, du er færdig. Tjek eksemplet fra linket nedenfor.
- Se Demo “Raphael”
Afsluttende tanker
Så det er det grundlæggende med SVG. Vi håber nu, du har en fair forståelse af dette emne. Det er den bedste måde at optimere dit websted til enhver skærmopløsning, selv til brug på nethinden.
Som altid, hvis du er en eventyrlystne person, har vi her lagt et par referencer og diskussioner for at grave dybere ind i dette emne.
- En introduktion til SVG - W3 Skoler
- Opløsning Uafhængig med SVG - Smashing Magazine
- Hvorfor bruger du ikke SVG? - NetTuts
Tak for læsning, og vi håber du har haft dette indlæg.
- Se Demo
- Download kilde
