Skip to content

GeoJSON till SVG-konverterare

Konvertera GeoJSON till SVG (Scalable Vector Graphics) för upplösningsoberoende, redigerbara kartor. Perfekt för logotyper, tryckmaterial, presentationer och webbbruk.

Varför SVG?

Upplösningsoberoende

  • Skalar perfekt till vilken storlek som helst utan kvalitetsförlust
  • Tryckklart vid vilken upplösning som helst
  • Retina/4K-skärmar ser perfekta ut
  • Zooma oändligt utan pixellering

Redigerbarhet

  • Öppna i Illustrator, Inkscape eller Figma för avancerad redigering
  • Ändra färger, linjer, fyllningar efter export
  • Lägg till text, anteckningar, logotyper med designprogram
  • Kombinera med andra grafiska element enkelt

Webbvänlig

  • Små filstorlekar för enkla kartor
  • CSS-styling — Styla med CSS på webbsidor
  • JavaScript-animation — Animera linjer och egenskaper
  • Inbäddning inline — Klistra in direkt i HTML
  • Tillgänglig — Skärmläsare kan läsa SVG-innehåll

Användningsområden

Logotyper och varumärke — Företagskartor ✅ Tryckmaterial — Broschyrer, affischer, böcker ✅ Webbgrafik — Ikoner, märken, UI-element ✅ Datavisualisering — Infografik, instrumentpaneler ✅ Merchandise — T-shirts, klistermärken, muggar ✅ Presentationer — Bildspel som skalar vackert

Hur man konverterar

  1. Ladda upp din GeoJSON-fil (dra och släpp eller bläddra)
  2. Förhandsgranska kartåtergivningen
  3. Formatet ställs automatiskt in på SVG
  4. Ladda ner din vektorkarta

Verktyget genererar ren, optimerad SVG-markup som fungerar överallt.

SVG-funktioner

Vad du får

  • Ren kod — Läsbar SVG-markup
  • Standardformat — Kompatibelt med alla designverktyg
  • Optimerade linjer — Förenklade för mindre filstorlekar
  • Korrekt viewBox — Skalar korrekt
  • Geografisk projektion — Flippad för nord-upp orientering

Redigera efter export

Öppna din SVG i:

  • Adobe Illustrator — Professionell vektorredigering
  • Inkscape — Gratis, öppen källkod-alternativ
  • Figma — Webbaserat designverktyg
  • Sketch — Designprogram för Mac
  • Valfri textredigerare — SVG är bara XML

Stylingalternativ

  • Linjefärg — Färg på gränslinjer
  • Linjebredd — Tjocklek på linjer
  • Fyllningsfärg — Färg på polygonens insida
  • Opacitet — Transparensnivåer
  • Bakgrund — Transparent eller färgad

Vanliga användningsområden

Design & Varumärke

  • Företagskartor för webbplatser
  • Regionala täckningskartor för marknadsföring
  • Tjänsteområdeskartor för presentationer
  • Ikonuppsättningar från enkla geometriska former

Tryckpublicering

  • Bokillustrationer — Reseguider, läroböcker
  • Tidningsgrafik — Redaktionella kartor
  • Affischer — Eventkartor, konferensmaterial
  • Visitkort — Kartor på kort

Webbutveckling

  • Interaktiva kartor med CSS/JS
  • Animerade linjer — Ritningsanimationer
  • Responsiv grafik — Skala med visningsfönstret
  • Ikonbibliotek — Återanvändbara kartikoner

Merchandise

  • T-shirt-design — Konturer av stater/länder
  • Klistermärken — Geografiska former
  • Muggar och koppar — Produkter baserade på platser
  • Affischer — Minimalistisk kartkonst

Tips för bästa resultat

Filstorleksoptimering

  • Förenkla geometrier innan export (använd GeoJSON Minifier)
  • Ta bort onödiga attribut från GeoJSON-egenskaper
  • Slå samman angränsande polygoner när det är möjligt
  • Använd färre precisionssiffror i koordinater

Designtips

  • Håll det enkelt — SVG fungerar bäst för rena, tydliga kartor
  • Använd solida färger — Undvik komplexa gradienter
  • Testa i olika storlekar — Säkerställ läsbarhet vid skalning
  • Överväg linje-till-fyllningsförhållande — Tjocka linjer kan överväldiga små kartor

Webbprestanda

  • Bädda in små SVG-filer inline — Direkt i HTML
  • Externa filer för stora kartor — Länka till .svg-fil
  • Lazy load — Ladda SVG när den är synlig
  • Komprimera — Använd SVGO eller liknande verktyg för optimering

Tekniska detaljer

Projektion

  • Web Mercator som standard (standard för webbkartor)
  • Y-axeln flippad så att norr är uppåt (SVG har Y nedåt som standard)
  • Koordinater bevarade för korrekt geografisk representation

SVG-struktur

xml
<svg viewBox="minX minY width height">
  <path d="M x,y L x,y..." />
  <!-- En linje per funktion -->
</svg>

Webbläsarkompatibilitet

  • ✅ Alla moderna webbläsare (Chrome, Firefox, Safari, Edge)
  • ✅ IE 9+ (grundläggande stöd)
  • ✅ Mobilwebbläsare (iOS Safari, Chrome)

Vanliga frågor

Kan jag redigera SVG efter export? Ja! Öppna den i valfri vektorredigerare (Illustrator, Inkscape, Figma, etc.) för att ändra färger, lägga till text eller ändra former.

Stöder SVG transparens? Ja, SVG stöder transparenta bakgrunder och opacitetsnivåer.

Hur är filstorleken? SVG-filer är vanligtvis små (några KB) för enkla kartor. Komplexa kartor med många funktioner blir större.

Kan jag använda SVG för tryck? Absolut! SVG är upplösningsoberoende och perfekt för tryck i vilken storlek som helst.

Hur ändrar jag färger? I en textredigerare, hitta attributen stroke och fill och ändra färgvärdena. Eller använd designprogram för visuell redigering.

Kan jag animera SVG-kartor? Ja! SVG kan animeras med CSS eller JavaScript. Varje linje kan individuellt stylas och animeras.

Är konverteringen förlustfri? Ja, den geografiska datan bevaras exakt. Viss visuell förenkling kan ske för mycket komplexa former.

Se även