Den praktiske nybegynnerguiden til SVG
Selv om formatet ikke er spesielt nytt, er SVG-bilder stadig mer populære i utformingen av nettsteder. Alle store nettlesere støtter formatet, og SVG endrer måten vi tenker på og gjengir bilder for på nettet.
Hvorfor på de så populære? Og hva er egentlig annerledes med en SVG-fil? I dag har vi svarene og alt annet du trenger å vite for å komme i gang med denne filtypen. (Som en liten bonus er alle bildene i dette innlegget tilgjengelig i SVG fra Creative Market.)
Utforsk Envato Elements
Hva er SVG?
Skalerbar vektorgrafikk, eller SVG, er et vektorbasert bildeformat utviklet for nettet. (Du kan lære mer om vektor versus rasterformater i en tidligere Design Shack-artikkel.)
Formatet har økt i popularitet takket være HD-skjermer, der brukere kan se hver piksel (hvis de finnes). Fordi SVG er et vektorformat, gjengis bilder på samme måte - og i perfekt detalj - uansett størrelse.
Markeringsspråket ble først utviklet av World Wide Web Consortium, som er mer kjent som W3C, i 1999. W3C definerer SVG som "et markeringsspråk for å beskrive todimensjonale grafikkprogrammer og bilder, og et sett med relaterte grafikkmanusgrensesnitt .” Den støttes av alle moderne nettlesere - så du trenger ikke å bekymre deg for om SVG-filer vil gjengis ordentlig eller ikke - og fungerer uavhengig av enhetstype.
Praktiske applikasjoner
Så hva gjør SVG så populært, og hvorfor bruker flere designere det? Rett og slett fordi det fungerer.
SVG-filer er små og skalerbare. Selv om formatet er best egnet for former, har det en rekke praktiske bruksområder. Merkelogoer, ikoner, brukergrensesnittelementer og mange andre designbiter kan fungere i SVG-format. Den største bonusen er at de er vektorer. Så et SVG-bilde kan brukes i nesten alle størrelser. (Noen av de minste filene kan bare være så store.)
SVG-filer er også enkle å manipulere og kontrollere. Ikke bare kan en SVG lagres som et statisk bilde, men du kan også legge til interaktivitet og filtre for å gjøre bildet enda morsommere. (SVG-filer kan animeres og farges.)
Her er noen praktiske applikasjoner for SVG-bruk:
- Logoer eller bilder
- Som bakgrunnsbilde
- Som et objekt, for eksempel en knapp
- Kartlegging
- Diagrammer eller tegninger
Som en generell regel er SVG best egnet for bilder som kan utvikle seg eller endres over tid eller etter enhetstype eller inkluderer animasjon eller andre dynamiske effekter. Bruk formatet til visuelle bilder som logoer, skisser, figurer, grafikk og diagrammer eller andre enkle bilder.
Fordeler med å bruke SVG
Så hvorfor vil du flytte fra den pålitelige JPG eller GIF til SVG? Det er mange grunner til at dette formatet kan være best å bruke i prosjektene dine. (Og det er til og med potensialet for å bruke SVG også for utskrift.)
- SVG er et vektorformat. Dette alene er viktig når du tenker på responsiv design, der bildestørrelser ofte endres basert på enhet. En SVG er liten nok til at en fil kan gjøre alt arbeidet, og det går ikke tapt på kvalitet på større skjermer.
- SVG-bilder og -atferd er definert med XML, noe som betyr at bilder kan søkes indeksert, skriptet og komprimert.
- Du kan gjøre nesten hva som helst med et SVG-bilde som du kan gjøre med alle andre bilder, for eksempel inkludert en rekke designteknikker. Det er enkelt å legge til filtre, blandingsmodus, bur-effekter, farge, klipping og maskering, slippskygger og nesten hvilken som helst annen teknikk du liker.
- SVG-filer er tilgjengelige.
- SVG jobber med åpne nettstandarder.
- Du kan opprette SVG ved hjelp av tekstbasert kode eller med et bilde du tegner. Dette gir litt frihet, avhengig av behov og kompetanse på forskjellige områder.
- Filstørrelser er små og kan minifiseres. Dette betyr at grafikk som kan ha vært stor annen klok ikke er, øker lastetidene. (Alltid en bonus.)
Ulemper ved å bruke SVG
Du blir sannsynligvis solgt på SVG etter å ha lest gjennom alle fordelene, ikke sant? Men det er noen få negativer å vurdere også.
- Eldre nettlesere - for eksempel Internet Explorer 8 eller lavere - støtter ikke SVG. Du kan sannsynligvis finne en omgang (eller kanskje ikke bryr seg), men bør vite at det kan være noen brukere som ikke ser bildene dine.
- SVG fungerer ikke for komplekse bilder som bilder. Det er et format designet bare for former og linjer.
Hva er neste for SVG?
Framtiden til SVG er bare i gang. Som et vedtatt mobilbildeformat (og standard) vil bruken og utviklingen av SVG bare fortsette å vokse.
I følge W3C er “SVG 2 for tiden under utvikling, og vil legge til nye brukervennlige funksjoner til SVG, i tillegg til integrering med HTML, CSS og DOM, og avskrivning av funksjoner som ikke støttes av alle nettlesere.”
Andre tilsetninger blir også kastet rundt. Bedrifter for utskrift av maskinvare ser på måter å bedre bruke SVG til utskriftsprosesser og har støtte fra industriledere som Adobe og Canon. Bruk i kartlegging og GIS utvides også, noe som gir bedre kartleggings- og zoomfunksjoner.
Når du virkelig begynner å tenke på det, er det en nesten uendelig mulighet for hvordan du bruker og implementerer SVG i prosjekter over hele nettet og i trykt design. (Det er en av skjønnhetene i det vektorbaserte formatet.)
SVG Resources
Nå som du er litt mer spent på SVG og kan se hvorfor og hvordan det kan være nyttig for prosjektene dine, har vi en liste over ressurser som kan hjelpe deg i gang.
- Eksporterer SVG for Internett med Adobe Illustrator
- Bygg inn SVG direkte på HTML-sider
- Opp og kjører med SVG Video Series
- SVG-profiler
- CSS-triks: Bruke SVG
Konklusjon
Bruker du allerede SVG til prosjektene dine? Hvis ikke, er du klar til å gjøre endringen?
SVG vokser i popularitet nesten daglig, og fordi det er et open source-verktøy, leses disse endringene og fremskrittene umiddelbart for deg. Du er ikke bundet til noen leverandør eller produkt og kan lage bilder som er fullstendig kompatible på det moderne nettet.
Arkivbilder Med tillatelse fra det kreative markedet .
