SVGs: Lag HTML5-grafikk som fungerer i alle nettlesere

Formidling: Din støtte hjelper med å holde nettstedet i gang! Vi tjener et henvisningsgebyr for noen av tjenestene vi anbefaler på denne siden.


Når du jobber med bilder på nettet, er det viktig å bruke riktig filtype til det tiltenkte målet ditt. Selv om formater som JPG, PNG og GIF er mest kjent for nettbrukere, er det ikke alltid at de er det riktige valget.

Denne artikkelen vil introdusere deg det grunnleggende i en annen type bildeformat: SVG, eller skalerbar vektorgrafikkformat.

SVG: Skalerbar vektorgrafikk

Vector vs Raster Image Formats

I en verden av bildefiler er det to grunnleggende typer format: raster og vektor. Rasterbaserte formater er basert på piksler. Disse formatene inkluderer slike filtyper som JPG, PNG og GIF.

Noen ganger blir rasterbilder referert til som bitmap-bilder, på grunn av deres pikselbaserte natur. Piksler er selvfølgelig de små kvadratiske byggesteinene til de fleste digitale bilder du ser på nettet.

Du kan se om et bilde er et rasterbasert (eller bitmap) bilde bare ved å se på det på nært hold og (vanligvis) i forstørret zoom. Hvis du ser millioner av ørsmå firkanter i en høy nok oppløsning (spesielt på steder der en farge endres til en annen), ser du på piksler, og dermed er det et rasterbilde.

Vektorbasert grafikk er derimot basert på linjer og kurver, lagret i tekstbasert XML. De er sterkt basert i matematisk teori, og krever som et resultat spesielle dataprogrammer for å lage, åpne og redigere.

Fordi vektorbaserte bilder er illustrasjoner, er de ikke egnet for fotografier. Imidlertid kan et bilde som er laget av en kunstner basert på et fotografi, bygges i SVG. Logoer er sannsynligvis den primære bruken av SVG på nettet, sammen med andre merkspesifikke illustrasjoner.

Skrifter og skrifttyper opprettes også i vektorformater, slik at kantene på tegn er skarpe og rene. Hvis du noen gang har prøvd å legge til tekst på toppen av et rasterbilde i Photoshop eller en annen bilderedigeringsapp – for eksempel å lage et nettstedstopptekst – og prøvd å endre størrelsen på det enda litt, har du kanskje lagt merke til at teksten kan noen ganger ser fillete ut i kantene.

Det er på grunn av forskjeller mellom vektor- og rasterformater; et SVG-format er veien å gå hit.

Fordeler med SVG

SVG er, som du kan forvente av navnet, en vektorbasert grafikk. De er uavhengige av oppløsninger. Sammenlign dette med rastergrafikk, som avhenger av oppløsningen på skjermen eller skjermen de vises på.

Så når du zoomer inn på en rastergrafikk – for eksempel en JPG- eller PNG-fil – vil du se bildet bli stadig mer uskarpt og forvrengt.

I SVG-format vil du ikke gjøre det. Du kan forstørre og zoome inn uten en forvrengning av selve bildet.

Dette er gjort mulig på grunn av SVG-formatets art. Fordi det er tekstbasert og ikke pikselbasert, kan du endre størrelse på bildet uten å miste integritet eller skarpe detaljer..

Denne funksjonen alene gjør SVG utrolig nyttige filer å ha rundt, spesielt for merkevareavhengige bilder som komplekse logoer og annen nettstedsgrafikk. SVGs kan endres størrelse fritt for fremtidige prosjekter, noe som gjør SVG til et svært fleksibelt format for nettstedarbeid.

En annen fordel med å bruke SVG-filer er at de er mer effektive å lagre og overføre. SVG er en veldig presis matematisk beskrivelse i stedet for en massiv samling av individuelle piksler. De resulterende SVG-filene er mindre enn det samme bildet ville blitt hvis de er gjengitt i et rasterbasert format.

SVG støtter animasjon for hvert element og aspekt av bildet. Fordi de er tekstbaserte, er de også søkbare og indekserbare, samt komprimerbare.

Ulemper ved SVG

Det er en primær ulempe ved å bruke bildefiler i SVG-format, og det er kompatibilitet. Du trenger programvare som kan håndtere arbeid med SVG-er.

Noen av disse programmene, for eksempel Adobe Illustrator, er ikke umiddelbart tilgjengelige for alle som kan trenge å jobbe med disse bildene, i motsetning til mengden av redaktører (mange av dem gratis) som er tilgjengelige for arbeid med rasterbaserte bilder..

Imidlertid er Inkscape en gratis open source-editor som kan håndtere SVG-filer.

Andre vektorformatutvidelser

I tillegg til SVG (skalerbar vektorgrafikk) inkluderer grunnleggende vektorfilutvidelser:

  • .drw (vektorfil)
  • .eps (Encapsulated PostScript)
  • .pct (Macintosh bitmap-grafikkformat)
  • .pif (vektorbilde GDF-format)
  • .ps (Adobe PostScript)
  • .svf (enkelt vektorformat)

SVG-elementer i HTML5

Ved hjelp av HTML-elementer kan du lage noen grunnleggende former med SVG i nettleseren. Hvert av disse elementene må nestes i koden.

Linje

Elementet kan brukes til å lage en rett linje, bestående av to punkter – en start og en slutt. Hvert punkt vil selvfølgelig ha to koordinater, en “x” og en “y.”

Koden vil se slik ut:

Du kan også parre andre attributter med < linje > element: strek definerer farge og strykbredde styrer tykkelsen på linjen.

rect

Lag et rektangel ved hjelp av elementet og spesifiser dimensjonene med bredde- og høydeattributtene. Du kan også gi en farge med fyll og for omrisset av rektangelet med slag, som vist i kodeutdraget nedenfor:

Sirkel

Som du forventer, skaper elementet en sirkel. Hvis du vil opprette en sirkel med en radius på 40 (angitt med r-attributtet), sentrert 40 piksler nedover og 40 over fra øverste venstre hjørne, et grønt fyll og en svart kontur, bruker du koden nedenfor:

Hvis du ikke spesifiserer cx- og cy-attributtene, vil nettleseren tolke en standardverdi på “0.”

Andre elementer du kan leke med inkluderer,, og .

Nettleserstøtte

SVG støttes godt i alle de viktigste tilgjengelige nettleserne, unntatt IE8 og tidligere versjoner.

Hva med SWF?

Erfarne designere og utviklere kjenner SWF godt – formatet for Flash-animasjoner og grafikk – og selv om SVG har eksistert en god stund, er det bare i løpet av de siste årene at støtten til den har gått i mainstream.

Med støtte for Flash som synker til fordel for HTML5, CSS, JavaScript og SVG, er det viktig at nettpersoner forstår forskjellene mellom SVG og SWF og lærer å bruke moderne teknologier.

Hva er SWF?

SWF er et forkortelse som står for Small Web Format. Det er et Adobe Flash-filformat som kan brukes til grafikk, animasjoner og innebygde applet-widgeter. Flash-pluginen må installeres i en nettleser for at SWF-innhold skal gjengis.

SWF har eksistert i lang tid, støttes av et stort utvalg av kvalifiserte utviklere, og det er mange forhåndsbygde SWF-animasjoner og opplæringsprogrammer lett tilgjengelig.

Likheter og forskjeller mellom SVG og SWF

SWF og SVG er begge vektorgrafiske filformater, og begge kan skriptes for å lage animasjoner og interaktivitet. På denne måten er de like. Imidlertid er det mange måter SWF og SVG er forskjellige på.

SVG er en åpen standard

SVG-standarden ble utviklet av World Wide Web Consortium (W3C) og er som et resultat helt åpen og gratis å bruke og bygge på. SWF er derimot et proprietært Flash-format som eies av Adobe. I 2008 fjernet Adobe mange av begrensningene for bruk av SWF-er, men SWF er fortsatt et proprietært format.

SVG er lettere å jobbe med

SVG-kode er menneskelig lesbar ren tekst XML. SVG-er kan opprettes ved hjelp av en hvilken som helst ren tekstredigerer, og det er enkelt å lage enkle SVG-er og kan læres raskt av alle som er kjent med webspråk som HTML, CSS og JavaScript. SWFer må opprettes og redigeres med komplekse programmer som Adobe After Effects eller open source-alternativer som Motion-Twin ActionScript 2 Compiler.

I tillegg kan man skripte SVG-er for animasjon og interaktivitet med CSS og JavaScript – språk alle nettdesignere og utviklere jobber med til daglig. SWFer er derimot skriptet med Adobes ActionScript som ligner JavaScript, men ikke identisk, og de fleste utviklere håndterer det på mye sjeldnere basis.

Å legge en SVG til et nettsted er også så enkelt som å slippe koden i et HTML-dokument i tråd med andre HTML-elementer. Alternativt kan SVGs legges inn i et HTML-dokument. SWFer må være innebygd i et HTML-dokument.

SVG er bedre for SEO

Siden SVG-er er skrevet i klartekst, kan de leses og indekseres av søkemotorer. SWF-er derimot binære filer som er vanskelig for søkemotorer å tolke. Som et resultat, hvis du bruker en SVG eller SWF for å levere innhold, er du bedre tjent med å bruke SVG hvis søkemotortrafikken er viktig for nettstedet ditt.

SVG-støtte vokser

Mens støtte SWF-filer er tilgjengelig i de fleste stasjonære nettlesere, er det ikke sant for mobilnettlesere. Støtte for Flash-innhold, inkludert SWF-filer, har i stor grad blitt faset ut av mobilnettlesere. Støtte for SVG, derimot, tilbys av alle moderne nettlesere, og støtte for nye funksjoner blir lagt til løpende.

Både SVG og SWF støtter flere mediatyper

Lyd- og videoinnhold kan integreres direkte i en SWF-fil. SVG inkluderer ikke støtte for lyd- og videoinnhold. Imidlertid støtter andre HTML5-funksjoner lyd- og videoinnhold, og disse funksjonene kan bygges direkte inn i SVG. Som et resultat kan lyd og video være innebygd i en SVG, men avspillingen håndteres av andre spillere, ikke av SVG-standarden selv.

SWF Sammendrag

Mens Flash-basert grafikk styrte nettet i det siste, tilhører fremtiden SVG animert med CSS og JavaScript. Følgende ressurser vil hjelpe webdesignere og webansvarlige med å holde ferdighetene sine oppdatert og begynne å bruke SVG i prosjektene sine.

SVG Resources

Det er mange gratis artikler, veiledninger og guider som hjelper deg å komme i gang med SVG. Her er noen av de beste.

Lær det grunnleggende

Hvis du nettopp kommer i gang med SVG, kan du sjekke denne opplæringen fra Creative Bloq for å lage enkle former og bruke fyll og gradueringer. Et annet alternativ som dekker mange av de samme grunnleggende teknikkene er denne guiden for å komme i gang med SVG fra Envato Tuts+.

Bruk grafikkprogramvare for å lage SVG-er

Hvis du skal lage noe mer komplekse enn enkle former, vil du jobbe med et vektorgrafikkprogram som Adobe Illustrator som kan eksportere filer i SVG-format. Denne hurtigguiden fra CSS-Tricks viser deg hvordan du bruker Illustrator til å lage en animert annonse som bare bruker HTML og CSS. En annen flott ressurs for å lære å bruke illustratører til å lage SVG-er kommer fra Web Designer Depot.

Hvis du ikke har tilgang til Adobe Illustrator, er du ikke heldig. Inkscape er et vektorgrafikkprogram av profesjonell kvalitet som er gratis og åpen kildekode. Det er også mange gode opplæringsprogrammer tilgjengelig fra Inkscape som hjelper deg å komme i gang med programmet og vise deg hvordan du eksporterer kreasjonene dine i SVG-format.

Lær avanserte SVG-teknikker

Hvis du virkelig behersker SVG, er det to ressurser du trenger å bruke litt tid på å gjennomgå:

  • SVG-opplæringen fra Mozilla Developer Network.
  • En SVG-grunning for dagens nettlesere, en gratis ebok fra W3C.

Begge disse ressursene er omfattende og dekker hele bredden av gjeldende tenkning og praksis med hensyn til SVG-programmering. Disse ressursene er ikke for nybegynnere, men hvis du er komfortabel med HTML og CSS, og vil bli dyktig til å jobbe med SVG, er du klar til å ta disse på.

Lag SVG-animasjoner

SVG kan brukes til å lage virkelig imponerende animasjoner. Når du først er komfortabel med å jobbe med SVG, kan du sjekke ut disse ressursene hvis du vil lære hvordan du lager imponerende SVG-animasjoner:

  • En tutorial fra David Walsh for å lage SVG-animasjoner ved hjelp av CSS og JavaScript.
  • En omfattende veiledning fra Jenkov som dekker alle aspekter ved å jobbe med SVG, inkludert CSS-animasjoner og JavaScript-scripting.
  • Hongkiats liste over åtte ledende JavaScript-biblioteker for å lage SVG-animasjoner.

Ytterligere ressurser

  • Mozilla Developers Network SVG Tutorial: en pågående opplæring som diskuterer alle aspekter av SVG-formatet for bruk i Mozilla-nettlesere.
  • The Simple Intro to SVG Animation: en flott tutorial skrevet av David Walsh.
  • ImageMagick Introduksjon og ressurser: en samling grafikkverktøy, som inkluderer noen for PostScript.

Konklusjon

Å bruke SVG i grafiske kreasjoner og webdesign er kanskje ikke noe du er vant til å rett ut porten, men det er utvilsomt en verdig forsøk på å bli kjent med dem. Forhåpentligvis vil ovennevnte hjelpe deg med å lære.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me