SVG-filer.

SVG-formatet är ett populärt verktyg för att visa tvådimensionell grafik, diagram och illustrationer på webbplatser. Eftersom det är ett vektorformat kan det skaländras utan att tappa i upplösning. Läs mer om funktionerna för SVG-bilderna, deras för- och nackdelar samt hur SVG-formatet har utvecklats.

Vad är en SVG-fil?

Skalbar vektorgrafik (SVG) är ett webbvänligt vektorformat. Till skillnad från pixelbaserade rasterfiler som JPEG lagrar vektorfiler bilderna via matematiska formler som bygger på punkter och linjer i ett rutnät. Det innebär att vektorfiler, som SVG, kan storleksändras avsevärt utan att tappa i kvalitet, vilket gör dem idealiska för logotyper och komplex onlinegrafik.

Det är inte bara skalförmågan som gjort SVG till ett enormt populärt format bland webbdesigners. SVG-filer är skrivna i XML-kod, vilket innebär att de lagrar textinformation som bokstavlig text snarare än som former. Det innebär att sökmotorer som Google kan läsa SVG-grafik med sökord, vilket kan hjälpa en webbplats att flytta upp i sökrankningen.

Du känner igen SVG-filer på filändelsen .svg.

Historien bakom SVG.

Historien bakom SVG går tillbaka till slutet av 1990-talet när World Wide Web Consortium (W3C) bad utvecklare om förslag till en ny typ av vektorgrafikformat. Sex konkurrerande förslag lämnades in och låg till grund för det som så småningom blev W3C:s SVG-format.

Det tog tid innan SVG-filer blev populära. De fanns relativt lite stöd för dem före 2017, då folk började se fördelarna med SVG-filer i moderna webbläsare. SVG-filer används nu brett till 2D-bilder på webben eftersom de flesta webbläsare och ritprogram för vektorfiler enkelt kan hantera dem.

För- och nackdelar med SVG.

Det är värt att ta reda på mer om SVG-formatets för- och nackdelar innan du börjar att spara bilderna i det formatet.

Fördelar med SVG.

Till skillnad från rasterfiler, som består av pixlar, bibehåller vektorgrafik som SVG alltid upplösningen – oavsett hur små eller stora du gör dem. Du behöver inte oroa dig för SVG-bilder som tappar i kvalitet i vissa webbläsare eller när du storleksändrar dem för att visa dem på olika ställen.
Enkla SVG-filer är ofta mindre än rasterbilder som byggts upp från mängder av färgade pixlar snarare än matematiska algoritmer.
Eftersom SVG behandlar text som text (och inte design) kan skärmläsare skanna alla ord som ingår i SVG-bilder. Det är mycket praktiskt för personer som behöver hjälp med att läsa webbsidor. Sökmotorer kan också läsa och indexera SVG-bildtext.

Nackdelar med SVG-filer.

SVG-filer är bra för webbgrafik som logotyper, illustrationer och diagram. Men bristen på pixlar gör det svårt att visa högkvalitativa digitalfoton. JPEG är ofta bättre för detaljerade foton.
Endast moderna webbläsare har stöd för SVG-bilder. Du kan få problem att använda SVG-filer med Internet Explorer 8 och andra äldre webbläsare.
Koden i SVG-bilderna kan vara svårt att förstå om du inte är van vid filformatet.

Hur öppnar man en SVG-fil.

Alla större webbläsare, från Chrome och Edge till Safari och Firefox, medger visning av SVG-filer numera – både på Mac och Windows. Du bara startar webbläsaren och klickar på Arkiv

Öppna för att välja den fil du vill visa. Den visas då i webbläsaren.

Det är lika enkelt att öppna en SVG-bild i ett inbyggt program på datorn. Dubbelklicka på filnamnet så får du en lista över program som öppnar filen – eller automatiskt öppnar den i ett kompatibelt program.

Hur man skapar och redigerar en SVG-fil.

Följ dessa steg när du använder Adobe Photoshop:

När du har skapat en bild i Photoshop klickar du på Arkiv > Exportera > Exportera som.
Klicka på menyn Format i den ruta som visas och välj sedan SVG.
Välj Exportera alla och spara filen.

Tips: eftersom Photoshop är en redigerare för rastergrafik föredrar många att skapa och redigera SVG-filer i Adobe Illustrator, redigerare för vektorgrafik.

SVG: vanliga frågor.

Vad är en SVG-fil?

Du känner igen SVG-filer på filändelsen .svg.

Vad används SVG till?

Skalbar vektorgrafik har nått långt på senare år – men vad används SVG-filer till i praktiken?

Webbplatsikoner och logotyper.

Designers använder ofta SVG till webbplatsikoner som knappar och också företagslogotyper. Filtypens förmåga att skaländra utan att tappa i kvalitet innebär att de är idealiska för grafik som behöver kunna visas på många olika ställen i en rad olika storlekar.

Infografik och illustrationer.

Tack vare användningen av XML i SVG-filer kan sökmotorer som Google läsa texttunga diagram och grafik, något som är bra vid sökmotoroptimering. Eftersom Google kan detektera nyckelord i SVG-filer kan detta potentiellt flytta en webbsida till en högre rankning i sökresultaten. För att göra webbsidor lite intressantare har SVG också stöd för animeringar.

Hitta fler vektorfiltyper

Har SVG-filer stöd för animering?

SVG-formatet är inte bara för statiska bilder. Du hittar en mängd onlineverktyg som hjälp när du ska introducera rörliga element i webbgrafiken. SVG-animeringar kan innehålla relativt grundläggande element som ett reglage som flyttar sig mellan olika bilder i en infograf. Illustrationer kan också bli rörliga, till exempel visarna på en urtavla.

Hur ser jag att det är en SVG-fil?

Det enklaste sättet att känna igen en SVG-fil är att titta på filändelsen. En SVG-fil visas som .svg. Du kan också identifiera vektorbilder, som SVG, genom att förstora dem till 200 % eller högre på datorskärmen. En vektorbild bibehåller de rena linjerna och solida färgerna istället för att bli pixliga eller suddiga.

Kan SVG-filer användas endast på internet?

Även om SVG-bilder huvudsakligen används på webben har de ett liv även bortom onlinevärlden. Exempel: eftersom SVG inte blir förvrängda när de storleksändras från de ursprungliga dimensionerna är de praktiska att använda som mallar för tryck på kläder som T-shirts. En JPEG som är uppbyggd av mängder av pixlar kan inte överföras lika rent.

Hur stora blir SVG-filer?

Storleken på en SVG-fil beror på hur mycket bilddata den innehåller – men den är vanligen mindre än flertalet andra filtyper. Komplex grafik med många banor och ankarpunkter tar upp mer lagringsutrymme än enklare, renare design. Försök att minimera antalet komplexa instruktioner inuti filen.

Vad är skillnaden mellan SVG- och PNG-filer?

I korthet: SVG-filer är vektorfiler medan PNG är rasterfiler. Om du tänjer för mycket på en PNG-fil eller trycker ihop den för mycket blir den suddig eller pixlig. SVG innehåller inga pixlar så de tappar aldrig i upplösning. PNG har inte heller stöd för animeringar.

style

grid width 8

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/express-blade