SVG-Betrachter

SVG-Eingabe
0 Zeichen
Lokale Vorschau, bitte keine Skriptinhalte aus nicht vertrauenswürdigen Quellen einfügen

Online-SVG-Betrachter. Fügen Sie SVG-Code ein, um gerenderte Vektorgrafiken sofort anzuzeigen, mit Unterstützung zum Kopieren und Herunterladen von .svg-Dateien. Lokale und sichere Verarbeitung.

Ähnliche Tools

Bild konvertieren

Bilder komprimieren

Bildgröße anpassen

Bild zuschneiden

Bildeditor

ICO Generator

Was ist SVG?

SVG (Scalable Vector Graphics, skalierbare Vektorgrafiken) ist ein XML-basiertes Bildformat zur Beschreibung geometrischer Formen. Im Gegensatz zu JPG und PNG, die Bitmaps (Pixelmatrizen) sind, verwendet SVG Tags wie <rect>, <circle> und <path>, um mathematische Pfade von Formen zu beschreiben – dadurch bleiben sie in jeder Größe scharf ohne Pixelbildung.

**Wann sollte man SVG verwenden?** Logos, UI-Icons, Flussdiagramme, Kartenmarkierungen, Diagramme, animierte Dekorationen und wiederverwendbare Illustrationen – jedes Szenario, das Klarheit, Farbanpassung, Skalierbarkeit oder CSS-Steuerung erfordert, ist ein natürlicher Anwendungsfall für SVG.

**SVG vs. Canvas:** Canvas ist eine imperative Zeichen-API, bei der die Ausgabe zu Pixeln wird; SVG besteht aus deklarativen DOM-Knoten, bei denen Sie jederzeit Attribute ändern, CSS-Stile anpassen und Ereignisse anhängen können. Verwenden Sie SVG für Icons, UI-Elemente und interaktive Grafiken; verwenden Sie Canvas für Spiele, Partikel und Pixel-Art.

**Häufige Komponenten:** Wurzelelement &lt;svg&gt;, Gruppen &lt;g&gt;, Pfade &lt;path&gt; (am häufigsten mit d-Attribut verwendet), Farbverläufe (&lt;linearGradient&gt;/&lt;radialGradient&gt;), Filter (&lt;filter&gt;) und Animationen (SMIL/CSS/JS).

**Wie anzeigen?** Fügen Sie Ihren SVG-Quellcode in den Editor auf dieser Seite ein und sehen Sie die Live-Darstellung rechts. Das per Ziehen anpassbare geteilte Layout hilft Ihnen in Sekunden zu prüfen, ob Ihr SVG-Code korrekt ist.

Anwendungsfälle

  • Frontend-Entwickler, die schnell die Darstellung von SVG-Icon-Code in der Vorschau prüfen
  • Überprüfung der SVG-Anzeige nach dem Kopieren aus Figma, Sketch oder anderen Design-Tools
  • Live-Vorschau von Änderungen beim Debuggen von SVG-Pfaden, Farben oder viewBox-Attributen
  • Prüfung und Validierung von SVG-Code vor der Integration in den Projektcode

Anleitung

  1. Fügen Sie SVG-Quellcode in den linken Editor ein oder klicken Sie auf "Beispiel laden", um eine Demo zu sehen
  2. Der rechte Bereich rendert die Vektorgrafik sofort – bearbeiten Sie den Code für Live-Aktualisierungen
  3. Bei Zufriedenheit klicken Sie auf Kopieren, um den Code zu kopieren, oder laden Sie als .svg mit eigenem Namen herunter

Funktionen

  • Live-Vorschau: Fügen Sie SVG-Code ein oder bearbeiten Sie ihn, um Vektorgrafiken sofort zu rendern – What You See Is What You Get
  • Geteiltes Layout: Nebeneinander liegende, per Ziehen anpassbare Bereiche am Desktop, Tab-Umschaltung auf Mobilgeräten
  • Ein-Klick-Export: SVG-Code in Zwischenablage kopieren oder mit eigenem Dateinamen als .svg herunterladen
  • Lokale Verarbeitung: Alle SVG-Verarbeitung erfolgt im Browser – Ihr Code verlässt Ihr Gerät nicht
  • Transparenter Hintergrund: Schachbrettmuster zeigt transparente Bereiche und Kantendetails deutlich
  • Zeichenzähler: Echtzeit-Zeichenzähler mit integriertem Beispiel zum schnellen Einstieg

Häufig gestellte Fragen

Wie kann ich SVG-Code online in der Vorschau anzeigen?

Fügen Sie Ihren SVG-Quellcode in den linken Editorbereich ein, und der rechte Bereich rendert die Vektorgrafik sofort. Sie können Code direkt im Editor bearbeiten, wobei die Vorschau live aktualisiert wird – ideal zum Debuggen von Frontend-Icons.

Wie lade ich die angezeigte SVG-Datei herunter?

Klicken Sie auf die Download-Schaltfläche oben rechts im Vorschaubereich. Sie können den Dateinamen anpassen, bevor Sie die Datei als Standard-.svg speichern. Alternativ kopieren Sie den SVG-Code per Klick direkt in die Zwischenablage.

Wird mein SVG-Code auf einen Server hochgeladen? Ist es sicher?

Nein. Die gesamte SVG-Analyse und -Darstellung erfolgt lokal in Ihrem Browser. Ihr SVG-Code wird niemals auf einen Server hochgeladen – er wird vollständig auf Ihrem Gerät verarbeitet und beim Verlassen verworfen.

Unterstützt es SVG-Code aus Design-Software?

Ja. SVG-Code aus Figma, Sketch, Adobe Illustrator oder anderen Design-Tools kann direkt eingefügt werden. Wir empfehlen, das gerenderte Ergebnis zuerst zu prüfen, bevor Sie es in Ihr Projekt integrieren.

Warum wird mein SVG nicht angezeigt? Häufige Gründe?

Häufige Probleme: ① Fehlende Namespace-Deklaration xmlns="http://www.w3.org/2000/svg"; ② Nicht geschlossene Tags im Code; ③ Sonderzeichen nicht korrekt maskiert; ④ Syntaxfehler im SVG selbst. Bitte prüfen Sie diese Punkte.

Kann ich den Namen der heruntergeladenen SVG-Datei anpassen?

Ja. Nach dem Klick auf die Download-Schaltfläche erscheint ein Eingabefeld für den Dateinamen. Sie können den Namen anpassen (Standard: image.svg), dann Enter drücken oder auf Bestätigen klicken. Die Endung .svg wird automatisch ergänzt.

Glossar

viewBox
Das interne Koordinatensystem von SVG im Format "x y width height". Das gängige "0 0 24 24" bedeutet 24 Einheiten breit und hoch. Die tatsächliche Anzeigegröße einer SVG wird durch width/height-Attribute oder externes CSS gesteuert.
XML-Namensraum (namespace)
SVG muss xmlns="http://www.w3.org/2000/svg" deklarieren, damit Browser es korrekt als SVG-Dokument erkennen. Fehlender Namensraum ist der häufigste Grund, warum SVG in HTML nicht angezeigt wird.MDN - SVG-Namensraum
path-d-Attribut
Der Pfadbefehlssatz, bestehend aus Buchstaben wie M/L/C/Q/H/V/Z plus Koordinaten. M=Move to (Zu), L=Line to (Linie zu), C=Cubic Bézier (Kubische Bézier), Q=Quadratic Bézier (Quadratische Bézier), Z=Close path (Pfad schließen). Komplexe Icons werden oft nur mit einem path-Element und seinem d-Attribut ausgedrückt.
currentColor
Ein CSS-Schlüsselwort, das auf die color-Eigenschaft des aktuellen Elements verweist. Wenn Sie fill oder stroke in SVG auf currentColor setzen, können Sie Icon-Farben über externe CSS-Farbänderungen ändern – ein gängiges Muster in Designsystemen.

SVG-Referenz: Häufige Elemente

ElementTypVerwendung
<svg>WurzelelementContainer für alle SVG-Inhalte, erforderlich
<rect>GrundformRechtecke, abgerundete Rechtecke
<circle> / <ellipse>GrundformKreise / Ellipsen
<line> / <polyline>GrundformLinien / Polylinien
<polygon> / <path>PfadPolygone / beliebige Kurven (d-Attribut)
<text> / <tspan>TextIn SVG eingebetteter Text
<g>GruppeElemente für einheitliche Transformationen gruppieren
<defs> / <symbol>DefinitionWiederverwendbare Formen und Farbverläufe
<linearGradient> / <radialGradient>FarbverlaufLineare / radiale Farbverlaufsfüllungen
<use>ReferenzElemente aus defs referenzieren
<filter>FilterErweiterte Effekte wie Weichzeichner, Schatten

Vergleich: SVG vs. Bitmap-Formate

DimensionSVG (Vektor)PNG (Bitmap)JPG (Bitmap)
ZusammensetzungXML beschreibt geometrische PfadePixelmatrixPixelmatrix (DCT-Komprimierung)
SkalierungBleibt scharf in jeder GrößeWird beim Vergrößern pixeligWird pixelig mit sichtbaren Artefakten
DateigrößeVariiert je nach Komplexität, Logos meist < 10KBMittel (verlustfrei)Kleiner (verlustbehaftet)
Transparenz✅✅❌
Animation✅ SMIL / CSS / JS❌ (erfordert APNG)❌
CSS-Farbsteuerung✅ currentColor / fill-Variablen❌❌
Am besten fürIcons, Logos, UI-VektorenTransparente Assets, ScreenshotsFotos, große Farbverläufe

Authoritative References