När du bygger upp en webbplats och lägger till bilder på den webbplatsen, en om de viktigaste sakerna du måste bestämma är vilka filformat som är de korrekta som ska användas. Beroende på grafiken kan ett format vara mycket bättre än andra.
Många webbdesigners är bekväma med JPG-filformatet, och detta format är perfekt för bilder med djupt färgdjup, som fotografier. Även om detta format också skulle fungera för enkel grafik, som illustrerade ikoner, är det inte det bästa formatet som ska användas i det fallet. För dessa ikoner skulle SVG vara ett bättre val. Låt oss ta en titt på exakt varför:
SVG är vektorteknik
Det betyder att det inte är rasterteknik. Vektorbilder är en kombination av linjer skapade med hjälp av matte. Raster-filer använder pixlar eller små kvadrater av färg. Detta är en orsak till att SVG är skalbar och perfekt för lyhörda webbplatser som måste skala tillsammans med en enhetens skärmstorlek. Eftersom vektorgrafik finns i matematikens värld, för att ändra storlek, ändrar du bara siffrorna. Raster-filer kräver ofta en betydande översyn när det gäller dimensionering. När du vill zooma in på en vektorbild är det ingen distorsion eftersom systemet är matematiskt och webbläsaren räknar om just den matematiken och gör linjerna så smidiga som någonsin. När du zooma in på en rasterbild förlorar du bildkvaliteten och filen börjar bli fuzzy när du börjar se dessa pixlar av färg. Matematik expanderar och kontrakterar, pixlar gör det inte. Om du vill att dina bilder ska vara upplösningsoberoende, ger SVG dig den förmågan.
SVG är textbaserad
När du använder en grafikredigerare för att producera en bild tar programmet en bild av ditt färdiga konstverk. SVG fungerar annorlunda. Du kan fortfarande använda vissa program och känna att du skriver en bild, men den slutliga produkten är en samling av vektorlinjer eller ens ord (vilka verkligen är bara vektorer på sidan). Sökmotorer tittar på ord, specifikt sökord. Om du laddar upp en JPG begränsar du dig själv till titeln på din grafik och kanske alt textfrasen. Med SVG-kodning utvidgar du möjligheterna och skapar bilder som är mer sökmotorvänliga.
SVG är XML och fungerar inom andra språkformat
Detta går tillbaka till den textbaserade koden. Du kan skapa din basbild i SVG och använda CSS för att polera den. Ja, du kan ha en bild som egentligen är en SVG-fil, men du kan också koda SVG direkt på sidan och redigera den i framtiden. Du kan ändra det med CSS på samma sätt som du skulle ändra sidtext, etc. Detta är mycket kraftfullt och det gör det enkelt att redigera.
SVG enkelt redigeras
Detta är förmodligen den största fördelen. När du tar en bild av en torg är det vad det är. För att göra en förändring måste du återställa scenen och ta en ny bild. Innan du vet det, har du 40 bilder av kvadrater och har det fortfarande inte rätt. Med SVG, om du gör ett misstag, ändra koordinaterna eller ett ord i en textredigerare, och du är klar. Jag kan relatera till detta eftersom jag ritade en SVG-cirkel som inte var placerad korrekt. Allt jag behövde var att justera koordinaterna.
JPG-bilder kan vara tunga
Om du vill att din bild ska växa i fysisk storlek, kommer den också att växa i filstorlek. Med SVG är ett pund fortfarande ett pund, oavsett hur stort du gör det. En kvadrat som är 2 tum bred kommer att väga samma som en kvadrat som är 100 tum bred. Filstorleken förändras inte, vilket är utmärkt från en prestationssynpunkt!
Så vilket är bättre?
Så vad är ett bättre format - SVG eller JPG? Det beror på själva bilden. Det här är som att fråga "vad är bättre, en hammare eller en skruvmejsel?" Det beror på vad du behöver göra! Detsamma gäller för dessa bildformat. Om du behöver visa ett foto, är JPG det bästa valet för dig. Om du lägger till en ikon är SVG troligen ett bättre val. Du kan lära dig mer om när det är lämpligt att använda SVG-filer här.
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard den 6/6/17
