Vad är SVG? När ska du välja SVG eller PNG?

Vad är en SVG-fil?

SVG står för Scalable Vector Graphics, alltså skalbar vektorgrafik. I stället för att bara lagra ett rutnät av färgade pixlar kan formatet beskriva former, banor, fyllningar och text. En webbläsare eller ett ritprogram använder instruktionerna för att rita bilden i önskad storlek. Du behöver inte skriva kod för att skapa en SVG: ett program för vektorgrafik kan exportera en sådan fil.

Tänk på en rund logotyp. En SVG kan beskriva cirkeln och dess färg, medan en PNG lagrar de pixlar som bildar cirkeln i en viss storlek. SVG-filen kan rita en större cirkel med en jämn kant. När PNG-bilden förstoras fördelas de befintliga pixlarna över en större yta, vilket kan göra kanten mjukare. MDN:s översikt över SVG förklarar hur formatet fungerar.

SVG och PNG: skillnaderna i praktiken

Inget av formaten är alltid mindre. En detaljerad SVG med tusentals banor kan vara större än en lämplig PNG. Jämför de faktiska filerna och kontrollera att de accepteras där de ska användas. För fotografier bör du överväga JPG, WebP eller AVIF i stället för att använda SVG som format för fotokomprimering.

När SVG är ett bra val

En logotyp som används i sidhuvudet på en webbplats, i en presentation och på en stor banner har nytta av ett vektororiginal. SVG passar också för ikoner och enkla diagram som ska fungera i flera storlekar. Kontrollera ändå den minsta versionen: skarp återgivning gör inte pytteliten text läsbar och hindrar inte tunna linjer från att bli svåra att se.

En SVG kan innehålla en vanlig pixelbild, till exempel en PNG eller JPG. Den bilden behåller sin ursprungliga upplösning. Att lägga ett litet fotografi i en SVG återställer inga detaljer och gör det inte till vektorformer. Inte heller ändras formatet om du byter filändelse från .png till .svg.

Förstå storlek, viewBox och tomma ytor

Bredd och höjd anger bildens mått. En viewBox definierar koordinatområdet där bilden placeras. Den hjälper teckningen att skalas till det utrymme där den visas; den är ingen inställning för filstorlek. MDN:s referens för viewBox beskriver sambandet.

Om logotypen ser liten ut i en stor tom yta, kontrollera ritytans eller sidans gränser i ditt designprogram. När du exporterar hela sidan kan oanvänt utrymme runt teckningen följa med. Anpassa sidan till bilden när det behövs, men lämna plats för konturer och skuggor. Om du bara ökar visningsbredden förstoras även det tomma utrymmet.

Använda SVG på en webbplats

En vanlig webbplatslogotyp kan användas som en SVG-bildfil. Ge bilder som förmedlar information en beskrivande alt-text och reservera rätt bredd och höjd i layouten. Dekorativa bilder ska ha tom alt-text. Exempel finns i guiden om alt-texter.

Att en webbläsare kan visa SVG betyder inte att alla publiceringssystem eller uppladdningsformulär accepterar formatet. Kontrollera plattformens regler innan du väljer den slutliga exporten. En SVG som används som bild fungerar också annorlunda än SVG som bäddas in direkt i sidans kod: skript och inläsning av externa resurser är begränsade när SVG används som bild. MDN:s guide om SVG som bild förklarar begränsningarna. Använd bilder från betrodda källor och den publiceringsmetod som din plattform stöder.

Förbereda en SVG för att dela den

• Exportera den avsedda bildytan, inte en onödigt stor sida.
• Inkludera länkade bilder och nödvändiga stilar i filen så att den inte är beroende av separata filer.
• Om texten måste se exakt likadan ut på en annan enhet, omvandla den till banor i ditt designprogram. Spara ett redigerbart original: text som blivit banor kan inte längre redigeras som vanlig text.
• Ta bort oanvända objekt och onödig information från redigeringsprogrammet i en kopia. Kontrollera resultatet innan du ersätter originalet.
• Öppna den exporterade SVG-filen i den avsedda appen eller på webbplatsen och kontrollera kanter, text, bakgrund och eventuella saknade delar.

Att omvandla text till banor kan öka antalet banor och filstorleken. Om banorna förenklas för mycket kan teckningen förändras. Bedöm optimeringen genom att jämföra det verkliga resultatet i stället för att ta bort data utan kontroll. Pixilos SVG-till-PNG-verktyg skapar en pixelbild; det optimerar inte SVG-filen och ger inte tillbaka en mindre SVG.

När du behöver en PNG-kopia

Skapa en PNG när mottagaren kräver det, när du behöver en statisk kopia som liknar en skärmbild eller när du behöver bestämda pixelmått. Exportera från SVG-originalet i den storlek som krävs. PNG behåller varken vektorbanorna eller interaktiva funktioner, och en senare förstoring kan göra bilden suddig. Spara SVG-filen för framtida exporter.

Med SVG till PNG kan du välja pixelmått och behålla genomskinliga områden eller lägga till en enfärgad bakgrund. Verktygssidan förklarar storleksgränser, typsnitt och innehåll som inte stöds. Alternativet för genomskinlig bakgrund bevarar befintlig transparens; det tar inte bort en bakgrundsform som är ritad i SVG-filen.

Innan du publicerar eller skickar bilden

1. Kontrollera vilka format som accepteras där bilden ska användas.
2. Behåll SVG när vektorformerna och flexibel storleksanpassning är till nytta; skapa PNG när en pixelbild behövs.
3. Kontrollera bildens gränser, typsnitten och eventuella inbäddade bilder.
4. Visa den färdiga filen i den avsedda visningsstorleken och på bakgrunden där bilden ska användas.
5. Jämför filstorlekar om laddningshastigheten är viktig och spara ditt redigerbara original.