Varför använda SVG?

Vad är SVG? ”Scalable Vector Graphics” är en XML definition och formatet går att redigera i vilken texteditor som helst. Det är dock lämpligast att använda ett ritprogram som Inkscape för att skapa symbolerna.

För några år sedan så var det lite si och så med stöd för SVG i olika program, speciellt webläsare, och då valde man hellre ett rasterformat som PNG för sin grafik. PNG fungerar fortfarande bra, och jag använder PNG lite då och då för att skapa symboler av mer ”bildlik” karaktär. Idag stödjer så gott som alla webläsare SVG och många av Open Source grafikprogrammen kan hantera formatet. Däremot så är det värre med stora och vanliga kommersiella program. Microsoft Office (Libre Office går bra) och ArcGIS (QGIS och GeoServer funkar fint) med flera har det sämre ställt med SVG stöd. För dessa så får man konvertera symbolerna till EMF i stället.

Varför skall man då använda SVG? Jo, det är för att det skapar enkelt skalbara symboler som blir snygga på skärm och i tryck. Rasterformat brukar kunna bli bra på skärm, men det är inte alltid det blir bra i tryck. Skalbart blir rasterformat bara om det är väldigt stora rasterbilder, men då får man i stället prestandaproblem när mycket data helt plötsligt skall hanteras.

Vad är lämpligt att avbilda med SVG? Enkel till medelavancerad grafik (inklusive allt som går att bygga i exempelvis ArcGIS symbolhantering) som går att bygga upp av kända symboldelar som punkter, linjer, cirklar, fyrkanter med mera. Går det att skapa symbolen i Power Point (LibreOffice Impress) så är den lämplig som SVG.

Det program som vanligen används för att skapa SVG filer är Inkscape. Det är inte jätte lätt att hantera för den som är ovan, så jag brukar rekommendera LibreOffice Impress i stället. Det är en OpenSource motsvarighet till Power Point och är lite enklare att skapa grafik i än Inkscape.

Börja med att skapa en rityta, detta blir grafikens gräns för ”formen”. Skall du skapa en rund symbol så skapa en kvadratisk rityta, skall du skapa en bred symbol så skapar du en bred rityta. Rita din symbol och exportera (inte ”spara”) till SVG. Nu går det att använda symbolen i både QGIS och GeoServer.

Något att tänka på. Även om det går att skapa symboler med linjer, så blir tjockleken inte så bra i mina försök. Linjer blir därför väldigt tunna oavsett vilken tjocklek som angivits i Impress. Lösningen är att använda flera polygoner på varandra med lite olika storlek och färg, för att på så sätt skapa en skalbar illusion av en kantlinje.

Tips! Om du har behov av mer avancerade symboler och kan rita den i ett vanligt ritprogram, ta en bild på den med en kamera eller redan har symbolen som rasterfil. Då kan symbolen ”kalkeras” av med Inkscape. Kanske lite redigeringar och sedan spara filen som SVG.

Exempel:

Denna PNG är i orginal 1,3 MB och 2700 x 2700 pixlar stor. Efter konvertering till SVG med 8 färglager så är filen 644 KB, och då har antalet brytpunkter inte reducerats i grafiken. Det går lätt att ta bort hälften av punkterna utan att utseendet påverkas nämnbart, men det tar lite tid att göra.

NinjaPNG-SVG

Till vänster är PNG bilden och till höger SVG (konverterat till raster). Med en stor bild så måste man zooma in mycket för att se egentliga skillnader, tänk dig då en PNG bild på några 100 pixlar.

För jämförelsens skull så minskade jag bilden till 220 x 220 pixlar och reducerade SVG grafikens punkter så att de båda filerna blev jämförbara i storlek, ca 120 KB.

NinjaSVG-PNG2

Nu blir skillnaderna tydligare. PNG filen fungerar fint om den bara skall visas i den tänkta upplösningen på en skärm, men om man vill skala upp symbolen eller ha hög kvalité i utskrifter så är SVG rätt väg att gå.

Slutligen har jag en SVG bild med PNG bilden inbakad! Nu kan du själv prova att öppna bilden i en webläsare i fullskärm eller använda ett annat program för att förstora och skriva ut bilden så mycket du vill för att jämföra.

 

Annonser

Taggar:, , , ,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: