SVG-Dateien: Öffnen, Erstellen, Bearbeiten und Konvertieren
Eine SVG-Datei beschreibt eine Vektorgrafik mit XML. Sie speichert Pfade, Formen, Füllungen und Linien statt eines festen Pixelrasters. Deshalb bleiben Logos, Icons, Diagramme und Illustrationen bei jeder Größe scharf.
Was ist SVG?
SVG bedeutet Scalable Vector Graphics und ist ein offener Webstandard des W3C. PNG speichert Pixel, SVG speichert Zeichenanweisungen. Das Element viewBox legt das interne Koordinatensystem fest; width und height bestimmen die Standardgröße.
Typische Einsatzgebiete
SVG eignet sich für Logos, Benutzeroberflächen-Icons, Karten, Diagramme, Strichillustrationen sowie animierte Grafiken. Fotos und Texturen sind mit PNG oder JPG meist besser aufgehoben. Eine komplexe automatische Vektorisierung kann außerdem größer als eine optimierte Rasterdatei werden.
SVG öffnen
Ziehen Sie die Datei in Chrome, Firefox, Safari oder Edge. Für Zoom, Anschnitt und viewBox nutzen Sie den SVG Viewer. Inkscape, Illustrator und Figma eignen sich zum Zeichnen; ein Code-Editor zeigt das XML und mögliche externe Referenzen.
SVG erstellen
Sie können eine Vektordatei exportieren oder einfache Formen selbst schreiben:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
Der Namespace ist für eigenständige Dateien erforderlich. Ein sinnvoller title verbessert die Barrierefreiheit.
Bearbeiten und konvertieren
Punkte und Kurven bearbeiten Sie in einem Vektorprogramm. Farben, viewBox oder Pfade lassen sich auch direkt im XML ändern. Prüfen Sie das Ergebnis im SVG Editor und SVG Viewer. Unbekannte Dateien sollten Sie mit dem SVG Sanitizer von Skripten und unerwarteten externen Ressourcen bereinigen.
- SVG to PNG für transparente Pixelbilder.
- SVG to JPG für Vorschauen ohne Transparenz.
- SVG to PDF für Review und Druck.
- SVG to Data URI für CSS- oder HTML-Inline-Nutzung.
Checkliste vor der Veröffentlichung
Prüfen Sie Darstellung, viewBox, Seitenverhältnis, Zuschnitt und Kontrast. Bereinigen Sie nicht vertrauenswürdige Dateien, entfernen Sie unnötige Metadaten und komprimieren Sie die fertige Version mit dem SVG Optimizer. Bewahren Sie die editierbare Quelle separat auf.
FAQ
Ist SVG besser als PNG?
SVG ist ideal für skalierbare Formen. PNG passt besser zu Fotos, Texturen und festen Pixelgrößen.
Kann ich SVG ohne Designprogramm öffnen?
Ja. Browser und SVG Viewer zeigen SVG direkt an.
Kann PNG zu SVG werden?
Tracing erzeugt eine Annäherung aus Pfaden. Einfache Motive liefern die besten Ergebnisse.
Warum bleibt die Datei leer?
Prüfen Sie viewBox, Zuschnitt, Hintergrundfarbe, Filter und XML-Syntax.
Sind SVG-Dateien sicher?
Behandeln Sie Uploads als nicht vertrauenswürdiges XML und bereinigen Sie sie vor dem Einbetten.
SVGView-Workflow
Vorschau im SVG Viewer, Änderungen im SVG Editor, Bereinigung mit SVG Sanitizer, Optimierung mit SVG Optimizer und Konvertierung nur für das tatsächlich benötigte Ziel.