En titt på Scalable Vector Graphics (SVG)
Vector grafikk har blitt mye brukt i utskriftsmedier. På et nettsted kan vi også legge vektorgrafik med SVG eller Scalable Vector Graphic. Siterer fra den offisielle spesifikasjonen på W3.org, er SVG beskrevet som:
Et språk for å beskrive todimensjonal grafikk i XML. SVG tillater tre typer βgrafiske objekter: vektorgrafikformer (for eksempel stier som består av rette linjer og kurver), bilder og tekst.
Det har faktisk eksistert siden 1999 og fra og med 16. august 2011 ble det en W3C-anbefaling. Likevel er SVG fortsatt betydelig underutnyttet, mens det er mange fordeler ved å bruke Vector i stedet for Bitmap for å betjene grafikk eller bilde på en nettside.
SVG Fordeler
I betraktning av visning av grafikk på nettsteder tilbyr SVG noen fordeler over Bitmap, hvorav noen inkluderer:
Oppløsning Uavhengig
Bitmap / raster-grafikk er oppløsningsavhengig - den er bygget på piksler. Grafikk servert vil se pikselert når den blir endret på et bestemt zoomnivå. Det skjer ikke med vektorgrafikk, som er oppløsning uavhengig av naturen, da grafikken uttrykkes med en matematisk ligning som gjør det skalerbar på hvilket som helst zoomnivå samtidig som kvaliteten opprettholdes, selv ved Retina Display.
Redusere HTTP-forespørsel
SVG kan legges inn direkte i et HTML-dokument med svg tag, så nettleseren trenger ikke å gjøre en forespørsel om å betjene grafikken. Dette resulterer også i bedre belastningsytelse for nettstedet.
Styling og Scripting
Inkluderer direkte med svg tag vil også gi oss mulighet til å stil grafikken enkelt gjennom CSS. Vi kan endre objektegenskaper slik som bakgrunnsfarge, ugjennomtrengelighet, grenser osv. på samme måte som med vanlig HTML-kode. På samme måte kan vi også manipulere grafikken via JavaScript.
Kan animeres og redigeres
SVG-objekt kan animeres når det bruker animasjonselementet eller gjennom JavaScript-biblioteket som jQuery. SVG-objektet kan også redigeres med noen tekstkodeditor eller en grafisk programvare som Inkscape (som er gratis) eller Adobe Illustrator.
Mindre filstørrelse
SVG har en mindre filstørrelse sammenlignet med Bitmap, som har en lignende grafisk presentasjon.
Tegning grunnleggende former med SVG
I følge spesifikasjonen kan vi tegne noen grunnleggende former som rektangel, sirkel, linje, ellipse, polylin og polygon med SVG og for at nettleseren skal gjengi SVG-grafikken, må alle de grafiske elementene settes inn i stikkord. La oss se eksemplene nedenfor for flere detaljer:
Linje
Å tegne en linje i SVG kan vi bruke
Som du kan se over, er linjens startpunktskoordinat uttrykt med de to første attributter x1 og x2, mens linjens endepunkt koordinat er uttrykt med y1 og y2.
Det er også to andre attributter, hjerneslag og slag-bredde som brukes til å definere grensens farge og kantbredde, henholdsvis. Alternativt kan vi også definere disse attributene i en inline-stil, slik som:
det gjør det til slutt bare det samme.
- Se demo “Linje”
polylinje
Det ligner nesten på
punkter attributter som lagrer alle koordinatene som danner linjene.
- Se demo “polylinje”
Rektangel
Tegning av et rektangel er også enkelt med dette
- Se demo “Rektangel”
Sirkel
Vi kan også tegne en sirkel med 100 radius som er definert med r Egenskap:
De to første attributter, cx og cy definerer sirkelens senterkoordinat. I eksempelet ovenfor har vi satt 102 både for x og y koordinere, hvis disse attributene ikke er spesifisert, 0 vil bli tatt som standardverdien.
- Se demo “Sirkel”
ellipse
Vi kan tegne en ellipse med x linje radius og y linjediameter med rx og ry Egenskap;
- Se demo “ellipse”
polygon
Med
- Se demo “polygon”
Bruke Vector Graphic Editor
Som du kan se, er det ganske enkelt å tegne enkle objekter med SVG i HTML. Men når objektet blir mer komplekst, er øvelsen ikke lenger ideell og vil gi deg hodepine.
Heldigvis, som vi har nevnt ovenfor, kan vi bruke en vektor grafisk editor som Adobe Illustrator eller Inkscape å gjøre jobben. Hvis du er kjent med denne programvaren, er det sikkert mye enklere å tegne objekter med deres GUI enn å kodes grafikken selv i HTML-taggen.
Hvis du jobber med Inkscape, Du kan lagre vektorgrafikken som vanlig SVG, og deretter åpne den i tekstkodeditor. Nå bør du finne SVG-kodene i filen. Kopier alle kodene og lim dem inn i HTML-dokumentet ditt.
Eller du kan også legge inn .svg filen gjennom et av disse elementene; embed, iframe og gjenstand, for eksempel;
Resultatene vil etter hvert bli det samme.
I dette eksemplet bruker jeg denne Apple iPod fra OpenClipArt.org.
- Se demo “iPod”
Nettleserstøtte
Når det gjelder nettleserstøtte, har SVG vært veldig godt støttet i alle de store nettleserne, unntatt i IE8 og tidligere. Men denne saken kan løses med dette JavaScript-biblioteket, kalt Raphael.js. For å gjøre det enklere vil vi bruke dette verktøyet, ReadySetRaphael.com, for å konvertere vår SVG-kode til Raphael-støttet format. Dette er hvordan.
Først av alt, last ned og inkludere Raphaël.js bibliotek til HTML-dokumentet ditt. Deretter laster du opp .svg fil til nettstedet, kopier og lim inn den genererte koden inne i følgende belastning funksjon;
window.onload = function () // Raphael-koden går her
Inne i kropp tag, legg følgende div med RSR id attributt;
Det er det, du er ferdig. Sjekk ut eksemplet fra lenken nedenfor.
- Se demo “Raphael”
Siste tanker
Så det er grunnleggende med SVG. Vi håper nå, du har en god forståelse av dette emnet. Det er den beste måten å optimalisere nettstedet ditt for enhver skjermoppløsning, selv for bruk på Retina-skjermen.
Som alltid, hvis du er en eventyrlystne person, har vi satt noen få referanser og diskusjoner for å grave dypere inn i dette emnet.
- En introduksjon til SVG - W3 Skoler
- Oppløsning Uavhengig med SVG - Smashing Magazine
- Hvorfor bruker du ikke SVG? - NetTuts
Takk for at du leser, og vi håper du likte dette innlegget.
- Se demo
- Last ned kilde
