Även om formatet inte är särskilt nytt, blir SVG-bilder alltmer populära i utformningen av webbplatser. Alla större webbläsare stöder formatet och SVG ändrar hur vi tänker på och gör bilder för webben.
Varför är de så populära? Och vad exakt är annorlunda med en SVG-fil? Idag har vi svaren och allt annat du behöver veta för att komma igång med den här filtypen. (Som en liten bonus finns alla bilder i det här inlägget i SVG från Creative Market.)
Vad är SVG?
Skalerbar vektorgrafik, eller SVG, är ett vektorbaserat bildformat som är utvecklat för webben. (Du kan lära dig mer om vektor mot rasterformat i en tidigare Design Shack-artikel.)
Formatet har ökat i popularitet tack vare högupplösta skärmar, där användare kan se varje bildpunkt (om de finns). Eftersom SVG är ett vektorformat, gör bilden på samma sätt - och i perfekt detalj - oavsett storlek.
Markup-språket utvecklades först av World Wide Web Consortium, vilket är mer känt som W3C, 1999. W3C definierar SVG som ett markup-språk för att beskriva tvådimensionella grafikprogram och bilder samt en uppsättning relaterade grafikskriptgränssnitt .? Den stöds av alla moderna webbläsare - så du behöver inte oroa dig för om SVG-filer kommer att fungera korrekt eller inte - och fungerar oberoende av enhetstyp.
Praktiska tillämpningar
Så vad gör SVG så populär och varför använder fler designers det? Helt enkelt, för att det fungerar.
SVG-filer är små och skalbara. Medan formatet passar bäst för former, har det en rad praktiska tillämpningar. Varumärkeslogotyper, ikoner, användargränssnitt och många andra designbitar kan fungera i SVG-format. Den största bonusen är att de är vektorer. Så en SVG-bild kan användas i nästan vilken storlek som helst. (Några av de minsta filerna kan bara vara så stora.)
SVG-filer är lätta att manipulera och styra också. Inte bara kan en SVG sparas som en statisk bild, men du kan också lägga till interaktivitet och filter för att göra bilden ännu roligare. (SVG-filer kan animeras och färgas.)
Här är några praktiska tillämpningar för SVG-användning:
- Logotyper eller bilder
- Som bakgrundsbild
- Som ett objekt, som en knapp
- kartläggning
- Diagram eller ritningar
SVG är som regel en bäst lämpad för bilder som kan utvecklas eller förändras över tid eller efter enhetstyp eller inkluderar animering eller andra dynamiska effekter. Använd formatet för bilder som logotyper, skisser, former, grafik och diagram eller andra enkla bilder.
Fördelar med att använda SVG
Så varför skulle du flytta dig från den pålitliga JPG eller GIF till SVG? Det finns många anledningar till varför detta format kan vara den bästa användningen i dina projekt. (Och det finns även potential att använda SVG för utskrift också.)
- SVG är ett vektorformat. Detta ensamt är viktigt när man tänker på lyhörd design, där bildstorleken ofta ändras baserat på enheten. En SVG är liten nog att en fil kan göra allt arbete och det finns ingen förlust av kvalitet på större skärmar.
- SVG-bilder och beteenden definieras med XML, vilket innebär att bilder kan sökas indexeras, skrivas och komprimeras.
- Du kan göra nästan vad som helst med en SVG-bild som du kan göra med vilken annan bild som helst, inklusive en mängd olika designtekniker. Det är lätt att lägga till filter, blandningslägen, bur effekter, färg, klippning och maskering, droppe skuggor och nästan vilken annan teknik du vill.
- SVG-filer är tillgängliga.
- SVG arbetar med öppna webbstandarder.
- Du kan skapa SVG med textbaserad kod eller med bild som du ritar. Detta medger viss frihet, beroende på ditt behov och kompetensnivå inom olika områden.
- Filstorlekarna är små och kan minimeras. Det betyder att grafik som kan ha varit stor annan vis är inte, vilket ökar belastningstiden. (Alltid en bonus.)
Nackdelar med att använda SVG
Du är förmodligen såld på SVG efter att ha läst igenom alla fördelar, eller hur? Men det finns också några negativa att överväga.
- Äldre webbläsare - som Internet Explorer 8 eller lägre - stöder inte SVG. Du kan förmodligen hitta ett arbete (eller kanske inte bryr sig), men borde veta att det kan finnas några användare som inte ser dina bilder.
- SVG fungerar inte för komplexa bilder som foton. Det är ett format som endast är utformat för former och linjer.
Vad är nästa för SVG?
SVGs framtid har just börjat. Som ett antatt mobilt bildformat (och standard) kommer användningen och utvecklingen av SVG att fortsätta att växa.
Enligt W3C är SVG 2 för närvarande under utveckling och kommer att lägga till nya användarvänliga funktioner för SVG, samt att närmare integrera med HTML, CSS och DOM och avlägsna funktioner som inte stöds av alla webbläsare.?
Andra tillägg kastas också runt. Skriva hårdvaruföretag tittar på sätt att bättre använda SVG för utskriftsprocesser och har stöd av branschledare som Adobe och Canon. Användningen av kartläggning och GIS expanderar också, vilket möjliggör bättre kartläggning och zoomfunktioner.
När du verkligen börjar tänka på det finns det nästan oändliga möjligheter att använda och implementera SVG i projekt på webben och i tryckt design. (Det är en av skönheterna i det vektorbaserade formatet.)
SVG Resources
Nu när du är lite mer upphetsad över SVG och kan se varför och hur det kan vara användbart för dina projekt, har vi en lista över resurser som hjälper dig att komma igång.
- Exportera SVG till webben med Adobe Illustrator
- Bädda in SVG direkt till HTML-sidor
- Upp och Running med SVG Video Series
- SVG Profiler
- CSS Tricks: Använda SVG
Slutsats
Använder du redan SVG för dina projekt? Om inte, är du redo att göra ändringen?
SVG växer i popularitet nästan dagligen och eftersom det är ett open source-verktyg, läses dessa förändringar och framsteg för dig omedelbart.Du är inte knuten till någon leverantör eller produkt och kan skapa bilder som är helt kompatibla över den moderna webben.
Arkivfoton Courtesy of Creative Market.