Skip to content

GeoJSON zu SVG Konverter

Konvertieren Sie GeoJSON in SVG (Scalable Vector Graphics) für auflösungsunabhängige, bearbeitbare Karten. Perfekt für Logos, Druckmaterialien, Präsentationen und Webanwendungen.

Warum SVG?

Auflösungsunabhängigkeit

  • Skaliert perfekt auf jede Größe ohne Qualitätsverlust
  • Druckbereit in jeder Auflösung
  • Retina-/4K-Displays sehen perfekt aus
  • Unendlich zoomen ohne Pixelbildung

Bearbeitbarkeit

  • Öffnen in Illustrator, Inkscape oder Figma für fortgeschrittene Bearbeitung
  • Farben, Linien, Füllungen ändern nach dem Export
  • Text, Anmerkungen, Logos hinzufügen mit Designsoftware
  • Einfaches Kombinieren mit anderen Grafiken

Webfreundlich

  • Kleine Dateigrößen für einfache Karten
  • CSS-Styling — Mit CSS in Webseiten gestalten
  • JavaScript-Animation — Pfade und Eigenschaften animieren
  • Inline-Einbettung — Direkt in HTML einfügen
  • Barrierefrei — Screenreader können SVG-Inhalte lesen

Anwendungsbereiche

Logos und Branding — Unternehmensstandortkarten
Druckmaterialien — Broschüren, Poster, Bücher
Webgrafiken — Icons, Abzeichen, UI-Elemente
Datenvisualisierung — Infografiken, Dashboards
Merchandise — T-Shirts, Sticker, Tassen
Präsentationen — Folien, die sich perfekt skalieren lassen

So funktioniert die Konvertierung

  1. Laden Sie Ihre GeoJSON-Datei hoch (Drag-and-Drop oder durchsuchen)
  2. Vorschau der Kartenanzeige
  3. Format wird automatisch auf SVG eingestellt
  4. Laden Sie Ihre Vektorkarte herunter

Das Tool generiert sauberen, optimierten SVG-Code, der überall funktioniert.

SVG-Funktionen

Was Sie erhalten

  • Sauberer Code — Lesbarer SVG-Markup
  • Standardformat — Kompatibel mit allen Design-Tools
  • Optimierte Pfade — Vereinfacht für kleinere Dateigrößen
  • Richtige viewBox — Skaliert korrekt
  • Geografische Projektion — Für Nordausrichtung gedreht

Bearbeiten nach dem Export

Öffnen Sie Ihre SVG-Datei in:

  • Adobe Illustrator — Professionelle Vektorbearbeitung
  • Inkscape — Kostenlose, Open-Source-Alternative
  • Figma — Browserbasiertes Design-Tool
  • Sketch — Designsoftware für Mac
  • Beliebiger Texteditor — SVG ist einfach XML

Styling-Optionen

  • Linienfarbe — Farbe für Begrenzungen
  • Linienstärke — Dicke der Linien
  • Füllfarbe — Farbe der Innenflächen von Polygonen
  • Deckkraft — Transparenzstufen
  • Hintergrund — Transparent oder farbig

Häufige Anwendungsbereiche

Design & Branding

  • Unternehmensstandortkarten für Webseiten
  • Regionale Abdeckungsbereiche für Marketing
  • Dienstleistungsgebiete für Präsentationen
  • Icon-Sets aus einfachen Geometrien

Druckpublikationen

  • Buchillustrationen — Reiseführer, Lehrbücher
  • Magazingrafiken — Redaktionelle Karten
  • Poster — Veranstaltungskarten, Konferenzmaterialien
  • Visitenkarten — Standortkarten auf Karten

Webentwicklung

  • Interaktive Karten mit CSS/JS
  • Animierte Pfade — Zeichenanimationen
  • Responsive Grafiken — Skalierung mit dem Viewport
  • Icon-Bibliotheken — Wiederverwendbare Karten-Icons

Merchandise

  • T-Shirt-Designs — Umrisse von Staaten/Ländern
  • Sticker — Geografische Formen
  • Tassen und Becher — Produkte mit Standortbezug
  • Poster — Minimalistische Kartenkunst

Tipps für beste Ergebnisse

Dateigrößenoptimierung

  • Geometrien vereinfachen vor dem Export (verwenden Sie GeoJSON Minifier)
  • Unnötige Attribute aus GeoJSON-Eigenschaften entfernen
  • Benachbarte Polygone zusammenführen, wenn möglich
  • Weniger Präzisionsstellen in Koordinaten verwenden

Design-Tipps

  • Halten Sie es einfach — SVG funktioniert am besten für klare, übersichtliche Karten
  • Verwenden Sie Vollfarben — Vermeiden Sie komplexe Farbverläufe
  • Testen Sie in verschiedenen Größen — Stellen Sie sicher, dass die Karte lesbar bleibt
  • Beachten Sie das Verhältnis von Linien zu Füllungen — Dicke Linien können kleine Karten überwältigen

Web-Performance

  • Kleine SVGs inline einfügen — Direkt in HTML einbetten
  • Externe Dateien für große Karten — Verlinken Sie die .svg-Datei
  • Lazy Load — SVG laden, wenn sichtbar
  • Komprimieren — Verwenden Sie SVGO oder ähnliche Tools zur Optimierung

Technische Details

Projektion

  • Web Mercator standardmäßig (Standard für Webkarten)
  • Y-Achse gedreht, sodass Norden oben ist (SVG hat standardmäßig Y nach unten)
  • Koordinaten bleiben erhalten für eine genaue geografische Darstellung

SVG-Struktur

xml
<svg viewBox="minX minY width height">
  <path d="M x,y L x,y..." />
  <!-- Ein Pfad pro Feature -->
</svg>

Browser-Kompatibilität

  • ✅ Alle modernen Browser (Chrome, Firefox, Safari, Edge)
  • ✅ IE 9+ (Grundlegende Unterstützung)
  • ✅ Mobile Browser (iOS Safari, Chrome)

FAQs

Kann ich die SVG nach dem Export bearbeiten?
Ja! Öffnen Sie die Datei in einem beliebigen Vektoreditor (Illustrator, Inkscape, Figma usw.), um Farben zu ändern, Text hinzuzufügen oder Formen zu modifizieren.

Unterstützt SVG Transparenz?
Ja, SVG unterstützt von Natur aus transparente Hintergründe und Deckkraftstufen.

Wie groß ist die Datei?
SVG-Dateien sind in der Regel klein (einige KB) für einfache Karten. Komplexe Karten mit vielen Features sind größer.

Kann ich SVG für den Druck verwenden?
Absolut! SVG ist auflösungsunabhängig und perfekt für den Druck in jeder Größe geeignet.

Wie ändere ich Farben?
Öffnen Sie die Datei in einem Texteditor, suchen Sie die Attribute stroke und fill und ändern Sie die Farbwerte. Alternativ können Sie Designsoftware für die visuelle Bearbeitung verwenden.

Kann ich SVG-Karten animieren?
Ja! SVG kann mit CSS oder JavaScript animiert werden. Jeder Pfad kann individuell gestaltet und animiert werden.

Ist die Konvertierung verlustfrei?
Ja, die geografischen Daten bleiben genau erhalten. Bei sehr komplexen Formen kann es zu visuellen Vereinfachungen kommen.

Siehe auch