2018 blir SVGs år. Bildfilformatet har ökat i popularitet och användningen stadigt under de senaste åren, men 2018 är när det verkligen kommer att bryta igenom.
Du har kombinationen av användare med högupplösta bildskärmar och behovet av en snabb snabb laddningstid att tacka. Och medan bytet till SVG kan låta som en stor sak; det är inte.
SVG är lätt att använda och implementera, och du behöver inte verkligen ändra befintliga filer. lägg bara till nya bilder som SVG. Här är allt du behöver för att vara i vet när det gäller SVG.
SVG är gjord för webben
Mozilla beskriver det så här:
SVG är ett XML-baserat språk för att beskriva vektorgrafik. Det är i grunden markup, som HTML, förutom att du har många olika element för att definiera formerna som du vill se i bilden och effekterna du vill tillämpa på dessa former. SVG är för att markera grafik, inte innehåll. Vid det enklaste slutet av spektrat har du element för att skapa enkla former, som och. Mer avancerade SVG-funktioner inkluderar (omvandla färger med hjälp av en transformationsmatris) (animera delar av din vektorgrafik) och (använd en mask ovanpå bilden).
De viktigaste fördelarna med SVG för webbdesigners är möjligheten att skapa enkla SVG-renderingar i en kod eller textredigerare, medan komplexa grafik kan dras i ett program som Adobe Illustrator; SVG-text är tillgänglig SVGs är lätta att stil och manus och du skapar med ett vektorformat som gör det bra med alla storlekar. SVG-format stöds av moderna webbläsare, är framtidssäkra och mycket komprimerbara.
Några av nackdelarna är att designa SVGs kan bli komplicerade och är lite svårare att skapa initialt. Det andra problemet är att vissa nedbrutna webbläsare förstår inte vad de är.
Behöver du en bättre förståelse för SVG? Vi har en nybörjarguide till SVG.
Hur designers använder SVG
En av fördelarna med SVG är att du kan göra många olika saker med det. SVG kan användas för:
- Logos
- Bakgrund, mönster och texturer
- Animering
- Responsiva bilder
- ikoner
Designers kan använda SVG för alla element i en design där ett vektorformat är en tillämplig lösning. Kan ersätta JPG, PNG och GIF, bland annat.
Vektorformatregeln
Det finns en bra chans att du använder fler vektorformat. SVG är upplösningsoberoende. Och det är en stor bonus eftersom du vet att dina bilder ser bra ut överallt.
Det som är särskilt trevligt att arbeta med SVG-bilder är att du inte behöver ändra ditt arbetsflöde för att implementera dem. Om du utformar i programvara som Illustrator eller Sketch, är processen - annan än slutlig export - identisk. Den enda fångsten är att du förmodligen vill ändra textelement i skisser i Illustrator, men många gör det redan.
Vid prepping SVG-filer finns det en viktig sak att komma ihåg. För att hålla dem så små som möjligt, se till att radera skräp som du inte behöver. (Ta bort den här bordsskivan!) SVG på webben har några bra tips för att teckna element och spara SVG-filer på bästa möjliga sätt.
Textbaserat format är bra för SEO
Att använda SVG kommer med en bit av en bonus för sökmotorns kunniga designers. Eftersom SVG använder verklig text i formateringen kan sökmotorerna bättre läsa bilderna.
Ja, du kan lägga till alt information med andra bilder, men det finns bara så mycket utrymme för nyckelord. Med SVG kan du skapa mer sökvänliga bilder och bara ladda upp. Google indexerar allt SVG-innehåll, inklusive fristående filer och när SVG-enheter är inbäddade direkt i HTML.
SVG är lättviktigt
Till skillnad från några andra vektorbaserade filtyper som kan bli tunga, är SVG: er kod. Koden är snabb. Det är så enkelt. Väl? nästan.
När det gäller de fina vektorritningarna som du har sparat som SVG, kolla filstorlekarna innan du kommer för långt. Medan PNG-format kan växa nästan exponentiellt när transparens läggs till, tenderar SVG att växa baserat på antalet sökvägar och fyller i bilden.
Om SVG är enormt, överväg att exportera det och en JPG eller PNG. (Även om det verkar motsägelsefullt. Verkligheten är att de flesta designers fortsätter att använda en mix av filtyper med bilder, förvänta dig bara att använda mer SVG än vad du tidigare har gjort.)
Redigering är enkelt
Om du är van att dra ikoner eller logotyper eller vad som helst i vektorritningsprogram ändras inget om redigeringsprocessen för dig.
Men om du skriver SVG, är du ute efter en behandling. Ändra bara ordet eller koordinaterna eller färgen i textredigeraren och bom, ändringen görs. Det är svårt att göra redigeringen enklare än det.
Skapa stillbilder eller animerade bilder med SVG
Till skillnad från de flesta andra bildformat, som tillåter dig att få en stillbild eller rörlig bild, tillåter SVG antingen. Du kan skapa en stillbild eller animering. Och allt fungerar på samma sätt. (Detta fina exempel är en handledning om hur man animerar ett element längs en SVG-sökväg!)
Dessa små fördelar bidrar till att driva SVG i framkant av designers sinnen. Du behöver inte lära dig ett nytt verktyg eller en teknik. du har redan allt du behöver till ditt förfogande med SVG.
Slutsats
Här är den stora orsaken till 2018 blir året SVG börjar ta över: det är praktiskt.
Med alla som använder högupplösta skärmar är vektorformat verkligen vägen att gå. Allt skalar felfritt och du behöver inte oroa dig för pixelering. SVGs gör bra logotyper (statisk eller responsiv), grafer och bakgrunder, ikoner och små bilder och animeringar. Filerna är små och laddas snabbt, och det finns ingen enorm inlärningskurva när det gäller att implementera SVG i din webbdesign.
Du kan bokstavligen börja använda SVG-bilder just nu.