Hvorfor bruker du ikke SVG?

SVG, eller Skalerbar vektorgrafik, er en XML-stil markupdrevet vektor grafisk rendering motor for nettleseren. SVG støttes i alle nettlesere, unntatt IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?

I dag skal vi undersøke SVG, og forklare hvorfor spørsmålet om "hvilken skal jeg bruke?" er vanligvis besvart av "hva prøver jeg å gjøre?". For å få en fullstendig liste over elementer som utgjør SVG, sjekk ut Mozillas dokumenter om emnet. Du kan se SVG DOM API også der.

Oversikt

Vi begynner med å skissere noen unike fordeler med SVG. Da, i stedet for å se gjennom alle 80 SVG node-typer, vil vi forklare hvordan Illustrator raskt kan få et SVG-dokument til en nettside. Vi vil også se på D3.js, et kraftig SVG-manipulasjons JavaScript-bibliotek.

"SVG er ikke ment å brukes til pixelmanipulering."

Hovedfordeler ved SVG

SVG har ganske mange fordeler over bilder eller lerretsbaserte gjengivelser for visse applikasjoner. SVG er ikke ment å bli brukt til pixelmanipulering; Men det håndterer vektorgrafikk og programmatisk vektormanipulering veldig bra.

Oppløsning Uavhengighet

Hvis du ikke har hørt, er oppløsning uavhengighet og nettleser agnostisisme et varmt tema i front-end utvikling (tenk "responsive design") i disse dager. De fleste løsningene som eksisterer for å fikse oppløsningsbaserte problemer (for eksempel retina-skjermer) involverer enten en stor mengde unødvendig nedlasting av data (høyoppløselig bildeutskifting) eller kompromiss for en nettleser eller den andre (opping alle resolusjoner, jevnlig når skjermen ikke vil vise forskjellen). Dette gjør at vi stoler på hastigheten på datahastigheten for nedlastningshastighet for å bringe bilder med høyere oppløsning til enheter som ofte er på trådløse datanettverk. Ikke ideell.

"SVG tilbyr en måte å lage grafikkelementer med full oppløsning, uansett hvilken størrelsesskjerm, hvilket zoomnivå, eller hvilken oppløsning brukerens enhet har."

SVG tilbyr en måte å lage grafiske elementer med full oppløsning, uansett hvilken størrelsesskjerm, hvilket zoomnivå, eller hvilken oppløsning brukerens enhet har. Dette er noe som opp til SVG, vi så bare med smart element styling via CSS og tekstgengivelse. Bruke divs og: etter at elementer har opprettet enkle former og andre effekter er unødvendige med SVG. I stedet kan du lage vektorformer av alle slag.

Super-Accessible DOM Node-Based API

Så skriver du HTML? Javascript? CSS? Flink. Da vet du allerede mye om hva du trenger å vite for å skrive SVG. SVG bruker faktisk et XML-kompatibelt format for å definere sine gjengivelsesformer. Utover dette kan du faktisk utforme figurer i CSS, og gjøre dem interaktive med JavaScript. Flere JS-biblioteker eksisterer for å hjelpe deg i denne verden, som D3.js og Raphael. Her er et eksempel på en SVG-elementgruppe (Envato-bladet). Du kan også se dette eksemplet på JSFiddle.

DOM-noden-basert API for SVG er allerede tilgjengelig for klientens eneste lerret-API. Med denne konstruksjonen kan du:

• Lag SVG-dokumentbaserte bilder på server-siden
• Kontroller SVG-elementer som alle andre HTML-elementer
• Administrer programmer, former og stillinger med teknologi som du allerede er kjent med (JavaScript og CSS)
• Fest hendelsesbehandlere til SVG noder

DOM API gir et ytterligere sett med klare fordeler ved bruk av SVG.

Ingen unødvendige HTTP-forespørsler

Når du bruker bilder i et html-dokument med tag, du definerer en fil som brukerens nettleser vil be om. Denne forespørselen vil ta opp båndbredde og kreve mer dyrebar tid å laste ned. Hvis bildet ditt er et sett med dommekoder, kutter det den ekstra HTTP-forespørselen, gjør nettstedet ditt raskere og mer brukervennlig..

Easy Interactive Scripting

Til tross for nettleserkrigen tilbyr DOM API, over alle nettlesere, en omfattende fleksibilitet når det gjelder skriptinteraktivitet, som strekker seg til SVG-elementer. Styling SVG skjer gjennom CSS. Å ha nettleserhendelses-APIer som er tilgjengelige for SVG-elementer, gjør at interaktivt oppførselskripting er en cinch. Bare legg til en handler til en bestemt node av SVG-elementet, og du er satt.

Dette er ikke sant for elementer trukket på lerretet. Siden lerretet bare er en pikselgengivelsesmotor, blir de trukket elementene ikke lagret som gjenstander. Skriptet ville ha jobben med å holde disse elementene samlet, og overvåke all relevant posisjon og størrelse informasjon for å lete etter og brann hendelser i en hendelsesløkke. Utover dette måtte z-indeksering også håndteres av manuset.

La oss ta en titt på et eksempel. Si at du vil oppdage svever over en sirkel i lerret. Merk: Vi vil bare si at lerretet er full bredde i nettleservinduet, og vi bruker jQuery bare for å holde eksemplet konsistent.

var sirkelCenter = [200, 300], radius = 50; $ (vindu) .on ("mousemove", funksjon (e) var mx = e.pageX, min = e.pageY; hvis (mx> circleCenter [0] - radius && mx < circleCenter[0] + radius && my > circleCenter [1] - radius && min < circleCenter[1] + radius) // now we are hovering  );

Selv om dette ikke nødvendigvis er et vanskelig eller uvanlig mønster av kode, virker det som en frustrerende prosess bare hvis du er vant til nettleser-API-en, bare for å sjekke for svinger. Dette er et veldig vanlig mønster i andre lavere grensesnittprogrammeringsmotorer som Unity3D eller Processing. Men i webverdenen har vi verktøy til disposisjon som allerede håndterer mange felles interaktive mål vi måtte ha. Du kan skrive et sett med bekvemmelighetsfunksjoner for å gjøre vanlige oppgaver, men vil du heller ikke komme til det punktet? I kontrast kan vi se enkelheten i samme oppgave ved hjelp av SVG.

$ ("svg-banen # sirkel"). På ("svever", funksjon (hendelse) // Det er alt.);

Dette er tydeligvis langt mer tidseffektivt for utviklere som skript for enkel interaktivitet.

Praktiske applikasjoner

Det er mange JavaScript-biblioteker der ute for lerret (som KineticJS, som lar deg gjøre ganske flotte ting. Men hvis du er som meg, bruker du ikke full-on fysikk motorer i webapplikasjonene dine. I stedet Jeg trenger oftest skalerbare ikoner, interaktive grafer og detaljerte, estetisk flotte måter å presentere informasjon til mine brukere. Det meste av fysikken jeg trenger er enkle lette likninger. Disse grafiske elementene er lett opprettet med SVG, og en rekke enkle fysikk likninger vil nok håndtere resten av mine behov. Så la oss se på noen få praktiske applikasjoner for SVG.

• Kurve Fordi SVGs største styrke er grunnleggende vektorformer, virker det selvsagt veldig bra for grafer og infografier. Ikke bare er det flott å lage statiske grafer fra gitt nummer, men det er også godt egnet for "live" grafer, matet av AJAX-forespørsler, brukerinngang eller tilfeldig genererte data.
• Veikart Veibeskrivelse består av harde linjer og eksakte former. Disse figurene kan representere godt med vektorgrafik, og låne seg for å zoome inn på kartet for ytterligere detaljer.
• Komplekse brukergrensesnittelementer La oss si at du ønsket et UI-element som så ut som en stablet pyramide av sirkler. Hvordan ville du gjøre dette i HTML og CSS? Vel, du vil først lage en gruppe divs for hvert hull, noe som gir dem hver en viss grense radius og grense stiler. Da vil du plassere dem i en inneholdende div. Nå, hva om du ville ha en enkelt gradient over hele greia? Du vil sannsynligvis måtte bruke maskering, eller en annen teknikk. Du vil heller ikke bruke bilder, da de ikke er skalerbare og ikke kan programmatisk gjengis eller endres. I stedet, hvorfor ikke tegne elementet i Illustrator, og lagre det som en SVG-fil? Dette vil tillate deg å ha et enkelt, skalerbart element uten å bekymre deg for å administrere flere divs.
• logoer De fleste logoer er vektorbaserte. Du kan definere et SVG-dokument som din logo, og slippe det hvor som helst, skalering i fly til hvilken størrelse den trenger å være uten å gå på kompromiss med kvaliteten eller ta opp for mye båndbredde.
• Enkle spill Det er ingen hemmelighet at lerret passer godt for spillutgivelse. En del av grunnen til dette er at spill ofte ikke er avhengig av vektorgrafikk; heller, de bruker pikselbasert kunst og animasjon. SVG er imidlertid et flott alternativ for spill som krever mindre tegn animasjon og mer informasjon display (tenk Sudoku).

Hvorfor bruker du sannsynligvis ikke det

Nå som vi har sett på noen av fordelene ved SVG, la oss undersøke hvorfor mange utviklere fortsatt velger å ikke bruke SVG. Det er to hovedgrunner til at SVG ikke blir brukt av mange utviklere.

1. De har aldri hørt om det, eller har aldri trodd at de trengte det, så har ignorert det (dette er ikke lenger en unnskyldning!)
2. Et SVG XML-dokument av noe kompleksitet ser relativt arkaisk og komplisert ut, og tilsynelatende er ikke nesten like enkelt som bare å bruke et bilde.

Så selvfølgelig ønsker ingen virkelig å sitte og redigere punktene i SVG XML. Heldigvis trenger ingen å! Dette er den delen som folk ofte ikke skjønner; Det er verktøy for å redigere SVG, slik at du ikke trenger å gjøre det for hånd.

SVG Tools

Illustrator, Inkscape

Hvis du eier en vektorredigerer, kan det mest sannsynlig lagre filen som en svg. Gå videre og prøv det ut. Åpne Illustrator, tegne en sirkel eller to, og lagre filen som SVG. Deretter åpner du filen i Sublime Text eller en annen tekstredigerer. Du vil umiddelbart se at, bortsett fra noen ekstra metadata, er SVG XML klar til å slippe rett inn i HTML-filen din. Du vil mest sannsynlig se (gruppe), (bane), og selvfølgelig (de overordnede svg) elementene.

D3.js

Mens du er helt i stand til å slippe SVG XML direkte inn i en HTML-fil, hva om du vil at SVG skal bli dynamisk opprettet? D3.js er "et JavaScript-bibliotek for å manipulere dokumenter basert på data". Med andre ord, det er flott å generere SVG-elementer som bargrafer og linjeposter basert på et sett med data. Vi har valgt å vise D3 på grunn av det tilsvarende ordforrådet til den faktiske SVG-implementeringen i nettleseren; Vær oppmerksom på at det finnes andre flotte SVG-biblioteker ute i naturen (spesielt Raphael.js).

Selv om D3.js gjør mer enn SVG-manipulasjon, for korthetens skyld, er det alt vi vil bruke det til i dag. (Pass på at du tar en titt på eksemplene på D3.js offisielle nettsted, og sjekk ut dette verkstedet Mike har lagt ut på sitt personlige nettsted.)

Eksempel 1: Pulserende sirkel

I dette første eksempelet oppretter vi bare en pulserende sirkel ved å bruke Math.sin og en iterator med et setInterval. Pulserende sirkel

Eksempel 2: Oppdateringslinjeplot

I dette eksemplet oppdaterer vi en plottet linjediagram med noen tilfeldige verdier. Linjediagram

Når skal du IKKE bruke SVG?

SVG vil håndtere mange av dine behov for bildevisning i nettleseren. Mens det er mange grunner til å bruke SVG, som med noe flott, er det ting som det ikke gjør bra.

• Hvis gjengivelsen krever tusenvis av noder, er det mer prestasjon å gjøre gjengivelsen i lerret (siden nettleseren ikke trenger å lage objekter for hvert brikke som er gjengitt, og ikke trenger å gjøre vektormatolen som kreves for å gjøre objektet. I stedet maler det i det vesentlige kartlagte piksler.)
• Hvis din søknad krever støtte for IE8, husk at du må enten levere en annen vektorfallback (for eksempel den mer innviklede VML) eller ikke bruke vektoren i det hele tatt, og i stedet stole på bilder med responsivt størrelse.

Hjelpsomme linker

Her er noen nyttige lenker for å få deg nærmere forankret i SVG!

• Raphaël.js
• Processing.js, basert på den kraftige Behandlingen, et Java-bildeverktøy
• jQuery SVG
• Sitepoint artikkel: Hvordan velge mellom lærred og SVG
• Lerret og SVG-ytelse
• Nettuts + artikkel om Raphael

Hvilke andre bruksområder har du funnet for SVG? Gi oss beskjed i kommentarseksjonen og takk så mye for å lese.