Slik lager du et skalerbart SVG-bilde for nettet

Hvis du jobber med bilder for nettet, må du før eller siden lage et skalerbart SVG-bilde. Det må se perfekt ut på alle skjermer, laste raskt og ikke påvirke nettstedets ytelse negativt. Typiske PNG- eller JPG-filer fungerer i mange situasjoner, men når logoen din ser uskarp ut på en 4K-TV eller ikonene dine mister skarpheten på en ny mobilenhet, er det da du innser at du virkelig trenger vektorgrafikk.

SVG (Scalable Vector Graphics) har blitt stjerneformatet for logoer, ikoner, illustrasjoner, infografikk og lette animasjoner.Dette er XML-tekster som nettleseren tolker og gjengir i sanntid, slik at de kan skaleres uten tap av kvalitet, modifiseres med CSS eller JavaScript, og optimaliseres for SEO og tilgjengelighet. La oss ta en klar og konsis titt på hvordan formatet fungerer, hvordan du lager dem fra bunnen av eller fra en JPG/PNG, hvordan du integrerer dem på nettstedet ditt, og hvordan du får mest mulig ut av dem.

Hva er en SVG-fil, og hvorfor er den skalerbar?

SVG står for skalerbar vektorgrafikk, som betyr vektorgrafikk som kan skaleres uten å miste definisjon.I motsetning til JPG eller PNG, som lagrer informasjon for hver piksel, lagrer en SVG tegneinstruksjoner – linjer, kurver, farger og posisjoner – i form av XML-kode. Nettleseren leser disse instruksjonene og «tegner» bildet på nytt med oppløsningen som kreves av enheten.

Denne arbeidsmåten sikrer at den samme SVG-filen ser like skarp ut på en mobiltelefon, en 4K-skjerm eller et reklameplakat.Det er ingen piksler som skal strekkes eller interpoleres; det som skaleres er de matematiske prinsippene som definerer formene. Videre, siden det er tekst, kan filen åpnes og redigeres med et hvilket som helst koderedigeringsprogram, automatiseres, komprimeres og til og med manipuleres ved hjelp av JavaScript.

SVG-er er oppløsningsuavhengige, svært lette for enkel grafikk og kompatible med alle moderne nettlesere.Chrome, Firefox, Safari, Edge og Opera har støttet formatet i årevis. Selv Internet Explorer 9 og senere versjoner godtar SVG, men med noen begrensninger på svært avanserte funksjoner.

SVG-er er imidlertid ikke en universalmiddel for alle typer bilder.Når man har med komplekse fotografier å gjøre, med millioner av farger og mange detaljer, er en godt komprimert JPG vanligvis mer effektiv. Å forsøke å vektorisere et komplett bilde genererer vanligvis en gigantisk SVG-fil, vanskelig å optimalisere og upraktisk for bruk i den virkelige verden.

Raster vs. vektor: forskjeller mellom SVG, JPG og PNG

For å forstå når det er passende å lage et skalerbart SVG-bilde, må du være klar over forskjellen mellom raster- og vektorbilder.JPG, PNG og GIF er bitmap-formater: de lagrer et rutenett av piksler med faste farger. SVG, EPS, AI eller PDF (i vektordelen) beskriver matematiske former.

Hvis du øker størrelsen for mye i et rasterbilde, blir pikslene synlige, og den typiske «trappeeffekten» vises.Det tapet av kvalitet er uunngåelig når du prøver å tvinge frem en oppløsning som det originale bildet ikke har. I motsetning til dette kan en SVG forstørres så mye du vil, fordi det som forstørres er formelen som tegner hver linje.

JPG er ideelt for bilder fordi det komprimerer fargevariasjoner veldig bra, på bekostning av tap av noe kvalitet.PNG, derimot, opprettholder kvaliteten (tapfri komprimering) og støtter gjennomsiktighet, noe som gjør den perfekt for grafikk med gjennomsiktige bakgrunner, skjermbilder eller grensesnittelementer som ikke trenger å skaleres for mye.

SVG skinner når det gjelder ikoner, logoer, illustrasjoner, diagrammer, diagrammer, infografikk og enkle animasjoner.For denne typen innhold har PNG-filer en tendens til å være større, se verre ut når de forstørres, og kan ikke manipuleres like fleksibelt med CSS. Det er derfor nettøkosystemet har tatt i bruk SVG for alle moderne grensesnittelementer.

Vanlige bruksområder for skalerbare SVG-bilder

Innen webdesign og -utvikling brukes SVG primært til elementer som må opprettholde maksimal skarphet på alle enheter.Det er ikke uvanlig at et enkelt nettsted bruker dusinvis eller hundrevis av SVG-er fordelt på menyer, seksjoner, knapper, overskrifter eller illustrasjoner.

Ikoner er et av de tydeligste eksemplene der SVG er dominerende.Ikoner for sosiale medier, hamburgermenyer, stjernevurderinger, handlekurvikoner … De drar alle nytte av formatets skalerbarhet. Du kan bruke det samme ikonet i liten størrelse på mobilmenyen og i stor størrelse på prissiden uten å miste noen detaljer.

Bedriftslogoer er en annen viktig brukVed å lagre logoen din som en SVG-fil sikrer du at den ser perfekt ut på favorittikonet, menyen, startsiden og alt trykt materiale. I tillegg kan én enkelt kildefil brukes på nytt til nett, presentasjoner, plakater og visittkort uten at du må lage den på nytt hver gang.

SVG brukes også ofte i infografikk, datagrafikk og tilpassede illustrasjoner.Fordi innholdet er vektorbasert, ser de grafiske linjene rene ut, teksten kan holdes skarp, og filen tilpasser seg sømløst til nettbrett, mobiltelefoner og store skjermer.

Til slutt lar SVG-er deg lage veldig lette og flytende animasjoner.Du kan animere et ikon som endrer farge når du holder musepekeren over det, en laster som spinner uendelig, eller til og med grafikk som reagerer på rulling eller brukerinteraksjon ved hjelp av CSS, SMIL eller JavaScript.

Verktøy for å lage et skalerbart SVG-bilde

For å generere SVG-filer kan du starte fra bunnen av i et vektorredigeringsprogram eller konvertere eksisterende bilder til raster- eller vektorformat.Valget vil avhenge av om du ønsker et helt nytt design, eller om du allerede har en logo i JPG/PNG-format som du ønsker å vektorisere.

De vanligste programmene for design og eksport av SVG er Adobe Illustrator, Inkscape, CorelDRAW, Figma og Sketch.De bruker alle vektorer som base og lar deg lagre i SVG-format med varierende kontrollnivåer over størrelse, fonter og eksporttype. Hvis du ser etter flere alternativer, kan du se en liste over programmer for oppretting av vektorbilder.

Adobe Illustrator er den profesjonelle standarden i mange byråer og studioer.Den lar deg tegne med pennverktøyet, organisere designet i lag, bruke avanserte effekter, typografi av høy kvalitet og deretter eksportere til SVG, justere alternativer som innebygging eller kobling av fonter, intern eller ekstern CSS-stil og kompatibilitetsnivå.

Inkscape er det gratis og åpen kildekode-alternativet som dekker så godt som alt den gjennomsnittlige designeren trenger.Den har verktøy for former, noder, tekst, gradienter, filtre og også direkte eksport til SVG, som den vanligvis også bruker. generere kode ganske rent.

Figma og Sketch, veldig populære innen grensesnittdesign, tillater også eksport av ikoner og komponenter som SVG.De er perfekte hvis du allerede jobber med brukergrensesnittet ditt i disse verktøyene, fordi du kan ta ikonene dine direkte til koden uten mellomtrinn.

Konverter JPG- eller PNG-bilder til SVG

Ofte starter du ikke helt fra bunnen av, men har allerede en logo eller tegning i JPG-, PNG- eller PDF-format og trenger en skalerbar SVG.I disse tilfellene finnes det to baner: vektoriser automatisk med et baneverktøy eller tegn grafikken på nytt for hånd med pennverktøyet.

Automatiske sporingsverktøy konverterer raskt piksler til vektorformer, men med inkonsistente resultater.For enkle logoer, i én farge eller med få detaljer, fungerer de ganske bra og sparer deg tid. For kompleks grafikk genererer de imidlertid tusenvis av noder og en veldig stor, vanskelig redigerbar SVG-fil. Hvis du trenger å fordype deg i manuelle metoder, kan du sjekke ut sporings- og vektoriseringsteknikker i Illustrator.

Noen spesialiserte plattformer tilbyr manuelle vektoriseringstjenesterMed disse tjenestene laster du opp logoen din i JPG-, PNG- eller PDF-format, og en designer tegner den for hånd i Illustrator med riktige skrifttyper, noe som gir en ren EPS/AI/SVG-fil klar for utskrift eller nett. Det er det mest pålitelige alternativet for merkevarelogoer som må se perfekte ut.

Hvis du konverterer fra andre vektorformater som EPS eller AI, bevarer SVG-konverterere vanligvis nesten all informasjonen.I dette tilfellet opprettholdes fargen, formene og lagstrukturen ganske trofast, så lenge du ikke bruker ekstremt spesifikke effekter fra et bestemt program.

Når kilden er et bilde eller et svært komplekst rasterbilde, gir automatisk vektorisering sjelden et nyttig resultat.I dette scenariet er det mest fornuftige å beholde bildet i JPG- eller WebP-format og reservere SVG til ikoner, rammer, tekst eller overlagrede grafikkelementer.

Slik oppretter du en SVG-fil trinn for trinn

Hvis du vil designe ditt eget skalerbare SVG-bilde fra bunnen av, er den grunnleggende arbeidsflyten ganske lik i nesten alle vektorredigeringsprogrammer.Her er et generelt sammendrag, slik at du kan bruke det i Inkscape, Illustrator eller lignende verktøy.

Det første trinnet er å lage lerretet eller arbeidsområdet med rimelige dimensjonerSelv om SVG-en vil være skalerbar senere, er det lurt å jobbe med «menneskelige størrelser» (for eksempel 500×500 piksler for et ikon eller 1200×600 piksler for en overskrift), fordi det gjør designet mer komfortabelt og bidrar til å opprettholde proporsjoner.

Deretter kommer tegnefasenBruk penn- eller Bézier-verktøyet til å tegne omriss, linjer og kurver, og de grunnleggende formverktøyene (rektangler, ellipser, polygoner) til å bygge designet ditt. Hver form vil bli registrert som en bane eller et sett med baner i SVG XML.

På disse banene bruker du fyll- og strekfarger, linjetykkelser, avrundede hjørner, gradienter eller mønstreAlle disse attributtene kan deretter oversettes til CSS, så det er lurt å ikke bruke for mye merkelige effekter som ikke oversettes godt til nettleseren.

Når designet ditt er klart, juster du tegnebrettet til innholdet.I de fleste programmer finnes det et alternativ for å tilpasse lerretet til tegningens grenser og unngå tomme marger. Dette bidrar til å sikre at SVG-en ikke har unødvendig hvit plass rundt seg.

Til slutt, eksporter eller lagre som SVGEksportdialogboksen inneholder vanligvis alternativer for å forenkle stier, inkludere stiler som innebygde attributter eller som CSS, legge inn bilder eller fonter, osv. For nettbruk er det generelt ønskelig med den reneste og letteste SVG-en som er mulig, uten overflødige metadata.

Endre størrelse og skaler en SVG uten å miste kvalitet

Det flotte med formatet er at du kan endre størrelsen på en SVG uten at den blir pikselert, men det betyr ikke at du ikke bør være oppmerksom på hvordan den skaleres.Den viktigste egenskapen i denne prosessen er viewBox, som definerer grafens interne koordinatsystem.

I selve SVG-filen vil du se noe sånt som viewBox="0 0 100 100"Dette indikerer at hele tegningen er utformet innenfor et kvadrat på 100 x 100 enheter. Hvis du deretter forteller nettleseren i HTML at SVG-en skal være 200 piksler bred, multipliserer nettleseren ganske enkelt disse enhetene for å få plass til innholdet.

For å gjøre en SVG virkelig responsiv, er det vanlig praksis å fjerne bredde- og høydeattributtene fra elementet. og bare la viewBox stå igjen. I CSS kontrolleres oppførselen med noe så enkelt som:

svg { display: inline-block; maks. bredde: 100 %; høyde: self; }

Hvis du trenger å endre størrelsen på mange SVG-er samtidig og ikke vil berøre koden, finnes det nettverktøy som fungerer som "størrelsesverktøy" for SVG-er.Disse verktøyene lar deg definere den nye størrelsen i prosent eller enheter, bruke transformasjonen og laste ned den nye skalerte versjonen uten å måtte installere programvare.

Slik setter du inn en SVG-fil på en nettside

Når du har det skalerbare SVG-bildet ditt, er neste trinn å hente det inn i nettleseren.Det finnes flere måter å gjøre dette på, og hver gir deg et annet nivå av kontroll over stiler, tilgjengelighet og ytelse.

Den mest grunnleggende og direkte måten er å bruke etiketten peker til den eksterne SVG-filenFor eksempel: Det er samme mekanisme som med en JPG, bare nettleseren vet at ressursen er vektorbasert.

Hvis du vil ha mer kontroll, kan du legge inn selve SVG-koden i HTML-koden ved hjelp av taggenI så fall kopierer du filens innhold og limer det inn i sidens kode. Dette lar deg endre farger med CSS, legge til klasser, manipulere bestemte deler med JavaScript og forbedre tilgjengeligheten.

Et annet alternativ, mindre brukt i dag, men fortsatt gyldig, er å bruke enten for å laste inn SVG-en som en innebygd ekstern ressursDen har noen begrensninger når det gjelder stil og tilgjengelighet, så i praksis foretrekker nesten alle eller SVG innebygd.

Innholdsstyringssystemer som WordPress tillater ikke SVG-opplastinger som standard av sikkerhetshensyn.Det er enkelt å aktivere dem ved å installere programtillegg som Safe SVG eller SVG Support, som renser filen for å forhindre at den inneholder skadelige skript og lar deg bruke dem fra mediebiblioteket akkurat som alle andre bilder.

Stiliser og animer SVG med CSS og kode

En av de viktigste fordelene med å ha et skalerbart SVG-bilde er at det kan behandles som om det var en del av selve sidens DOM.Dette betyr at vi kan bruke stiler med CSS og lage animasjoner med CSS, SMIL eller JavaScript uten å berøre basisfilen.

Hvis du legger inn SVG-en i linje (ikke som (ekstern), du kan endre fyllfarge og strek direkte med CSSFor eksempel: svg path { fill: red; stroke: blue; }. Dette tillater for eksempel gjenbruk av samme fil for å vise logoen i én farge i toppteksten og en annen farge i bunnteksten.

Fyll-attributtet definerer fargen på det indre området av formen, og strek styrer fargen og tykkelsen på omrisset.Du kan også endre egenskaper som stroke-width, stroke-dasharray eller stroke-linecap for å oppnå håndtegnede effekter eller stiplede linjer.

For enkle animasjoner er CSS mer enn nok.Du kan få et ikon til å endre farge når du holder musepekeren over det, roterer, pulserer eller ruller ved hjelp av standard transformasjoner og overganger.

Hvis du trenger noe mer forseggjort, inkluderer selve SVG-standarden elementer som som tillater animering av attributter i tidenFor eksempel å få en sirkel til å bevege seg fra side til side, og endre posisjonen cx i fem sekunder, i en løkke, uten behov for eksterne skript.

For komplekse og interaktive animasjoner lar JavaScript (eller spesifikke biblioteker) deg koble SVG med brukerhendelser.Du kan flytte deler av diagrammet ved å klikke, synkronisere animasjoner med rulling eller endre utseendet basert på dataene siden mottar, noe som åpner døren for svært rike datavisualiseringer.

SVG-sprites og ytelsesoptimalisering

Når et nettsted bruker dusinvis eller hundrevis av ikoner, innebærer det mange HTTP-forespørsler å laste inn hver SVG separat.For å redusere dette antallet og øke hastigheten på lastingen, er det veldig nyttig å bruke SVG-sprites eller lignende grupperingsstrategier.

En SVG-sprite er i utgangspunktet en stor fil som inneholder mange ikoner definert i elementerDeretter bruker du i hver del av HTML-koden din der du vil vise et ikon På denne måten laster nettleseren ned spriten bare én gang og bruker ikonene internt på nytt.

Denne teknikken reduserer antallet forespørsler til serveren betraktelig.Dette reduserer ventetid og forbedrer brukeropplevelsen, spesielt på mobiltilkoblinger. Videre beholder du fortsatt muligheten til å endre farger og størrelser ved hjelp av CSS.

Utover sprites finnes det spesifikke verktøy for å komprimere og optimalisere SVG.Verktøy som SVGO eller nettversjonen SVGOMG analyserer koden, fjerner metadata, mellomrom, unødvendige attributter, overflødige punkter i stier og alt som ikke påvirker det visuelle resultatet.

Mange vektorredigerere inkluderer også innebygde funksjoner for forenkling av baneÅ redusere antall noder i komplekse kurver reduserer ikke bare filstørrelsen, men forenkler også senere redigering og forhindrer at nettleseren må beregne altfor intrikate baner.

På sider med mye grafikk under bretten er det lurt å kombinere SVG med lazy loading-teknikker.Selv om SVG-er vanligvis er lette, gir det ikke mening å laste inn alle ikonene og grafikkene samtidig som brukeren ikke ser før de ruller flere hundre piksler.

Kompatibilitet, SEO og tilgjengelighet i SVG

Når det gjelder kompatibilitet, er den nåværende situasjonen veldig praktisk: alle moderne nettlesere støtter i stor grad SVG.Chrome, Firefox, Safari, Edge og Opera viser SVG-grafikk sømløst på datamaskiner og mobilenheter, og utbredelsen av virkelig gamle nettlesere er allerede svært lav i de fleste prosjekter.

Den virkelige differensieringsfaktoren mellom SVG og JPG eller PNG er at innholdet er tekst og derfor lesbart for søkemotorer og hjelpeteknologier.Dette gjør den til en interessant alliert for SEO og tilgjengelighet, hvis de riktige taggene og attributtene brukes.

Innenfor et element du kan inkludere og <desc> for å beskrive grafenDisse nodene brukes som tilgjengelig informasjon for skjermlesere og gir også semantisk kontekst til filinnholdet, noe som forenkler indeksering.

Attributtet role="img" forteller hjelpeteknologier at SVG-en fungerer som et bilde., og aria-labelledby kan lenke SVG-en til innholdet i og <desc>. I komplekse tilfeller er det fortsatt lurt å legge til alternativ tekst i HTML-koden sammen med bildet, eller bruke alt i <img> hvis du setter det inn som en ekstern ressurs.

Fra et søkeytelsesperspektiv reduserer bruk av optimaliserte SVG-er den totale sidevekten.Færre kilobyte betyr kortere lastetider, noe som påvirker målinger som LCP eller FCP positivt. Google Det tar hensyn til Core Web Vitals.

I prosjekter der det fortsatt er brukere med svært gamle nettlesere, kan man implementere reserveløsninger.For eksempel, å servere en tilsvarende PNG ved hjelp av eller spesifikke betingelser. I praksis er det imidlertid mindre og mindre behov for disse rettelsene.

Beste praksis for design og administrasjon av SVG-filer

Å lage et skalerbart SVG-bilde handler ikke bare om å «eksportere til SVG», det innebærer også en viss disiplin innen design og koding.Hvis du er nøye med hvordan du navngir lag, forenkler stier og strukturerer filen, vil den være enklere å vedlikeholde og mer effektiv i produksjon.

Det anbefales å holde SVG-en ryddig, med konsistent innrykk og meningsfulle ID- og klassenavn.For eksempel er det mye mer nyttig å bruke id="cart-icon" enn id="path123" når du trenger å bruke spesifikke stiler fra CSS eller endre et element med JavaScript.

Å minimere skjulte elementer, redundante lag og dupliserte attributter er en annen nøkkel.Mange filer generert direkte fra designprogrammet inneholder informasjon som er ubrukelig på nettet, og som trygt kan ryddes opp med et gjennombrudd av SVGO eller lignende.

Når du jobber med mange SVG-er i et prosjekt, er det lurt å organisere dem i logiske mapper med konsistente filnavn.Å ha /svg/icons/, /svg/logos/ og /svg/illustrations/ vil spare deg tid når du skal finne ressurser og gjøre det enklere å automatisere optimaliseringsprosesser.

Visuelt sett bør SVG-er se bra ut både på vanlige skjermer og Retina-skjermer med høy tetthet.Det er viktig å jobbe med tydelige former, passende kontraster og tekst som ikke er for liten for å sikre lesbarhet på alle typer enheter.

Hvis du skal bruke fonter i SVG-filen, bør du vurdere om du vil konvertere teksten til konturer eller beholde den som levende tekst.Ved å konvertere den til kurver sikrer du at den ser lik ut selv om brukeren ikke har den fonten installert, men den mister tilgjengeligheten og muligheten til å redigere den. Å beholde den som tekst beskytter semantikken, i bytte mot å avhenge av den tilgjengelige fonten.

En godt konstruert SVG er lett, lesbar, tilgjengelig og enkel å gjenbruke i forskjellige sammenhenger.Ved å kombinere god designpraksis, optimaliseringsverktøy og riktig integrering i HTML og CSS, kan du få mye ut av dette formatet for ikoner, logoer, grafikk og animasjoner, og forbedre både den visuelle kvaliteten på nettstedet ditt og ytelsen og evnen til å tilpasse seg enhver skjerm.