Warum skaliert meine SVG nicht mit CSS?

Fast immer fehlt die viewBox. Ohne sie hat die Grafik kein eigenes Koordinatensystem, das sich auf eine neue Größe übertragen ließe, also wird sie in ihren festen Abmessungen dargestellt und ignoriert den Rahmen, den du ihr gibst.

Wird meine Datei zum Ansehen hochgeladen?

Nein. Die Darstellung passiert lokal, unveröffentlichte Grafiken oder das Logo eines Kunden kommen also nicht in die Nähe eines Servers.

Muss ich unter Windows oder auf dem Mac einen SVG Viewer installieren?

Nein. Füge das Markup ein oder öffne die Datei in einem beliebigen modernen Browser, und die Zeichnung wird mit Zoom von 10 % bis 800 %, einem optionalen Schachbrett-Hintergrund und dem Quelltext daneben dargestellt. Skripte in der SVG laufen nicht, und externe Ressourcen werden nicht geladen.

SVG Viewer online

Öffne eine SVG und sieh sowohl die Grafik als auch das Markup dahinter, mit ausgeschriebenen Abmessungen und viewBox. Füge Code ein oder öffne eine Datei.

Browser-Tool

SVG

Sieh dir ein SVG sicher an: Es wird als Bild dargestellt, Skripte laufen also nie und externe Ressourcen werden nie geladen.

SVG

Über SVG-Betrachter

Eine SVG öffnen und sowohl die Zeichnung als auch das Markup dahinter sehen, mit Angabe von Abmessungen und viewBox. Praktisch, wenn eine Grafik in der falschen Größe erscheint und der Grund in den Attributen liegt statt in deinem CSS. Das Öffnen ist kostenlos und online, ohne Anmeldung. Das Markup wird hier ausgewertet, ohne es hochzuladen, und nichts, was du speicherst, trägt ein Wasserzeichen oder ist an ein Konto gebunden.

So nutzt du SVG-Betrachter

Grafik ladenÖffne eine Datei oder füge das Markup ein, und die Zeichnung erscheint neben dem Quelltext, der sie erzeugt.
width, height und viewBox prüfenDiese drei bestimmen, wie eine Grafik skaliert, und Widersprüche zwischen ihnen verursachen die meisten Überraschungen bei der Größe.
Struktur untersuchenGruppen, Pfade und Definitionen, damit du das Element findest, das sich falsch verhält.

Die viewBox macht eine SVG skalierbar

width und height legen fest, wie viel Platz das Element einnimmt; die viewBox definiert das Koordinatensystem, das darin gezeichnet wird. Eine SVG mit viewBox passt sich jedem Rahmen an, den sie bekommt. Eine SVG nur mit width und height in Pixeln tut das nicht – deshalb reagiert ein Logo manchmal überhaupt nicht auf CSS, und deshalb behebt eine hinzugefügte viewBox das Problem.

Was das Tool nicht kann

Nur zum Ansehen. Eine kleinere, aufgeräumtere Datei zu erzeugen ist Aufgabe des Optimierers, nicht dieses Tools.
Skripte in einer SVG werden hier nicht ausgeführt, alles, was auf sie angewiesen ist, wird also statisch dargestellt.

SVG-Betrachter: häufige Fragen

Warum skaliert meine SVG nicht mit CSS?: Fast immer fehlt die viewBox. Ohne sie hat die Grafik kein eigenes Koordinatensystem, das sich auf eine neue Größe übertragen ließe, also wird sie in ihren festen Abmessungen dargestellt und ignoriert den Rahmen, den du ihr gibst.
Wird meine Datei zum Ansehen hochgeladen?: Nein. Die Darstellung passiert lokal, unveröffentlichte Grafiken oder das Logo eines Kunden kommen also nicht in die Nähe eines Servers.
Muss ich unter Windows oder auf dem Mac einen SVG Viewer installieren?: Nein. Füge das Markup ein oder öffne die Datei in einem beliebigen modernen Browser, und die Zeichnung wird mit Zoom von 10 % bis 800 %, einem optionalen Schachbrett-Hintergrund und dem Quelltext daneben dargestellt. Skripte in der SVG laufen nicht, und externe Ressourcen werden nicht geladen.

Fragen zu ToolsVerse selbst – Datenschutz, Kosten, was mit deinen Dateien passiert – beantworten die häufig gestellten Fragen.

Die Tools, die man zusammen mit SVG-Betrachter am häufigsten braucht.

Du findest das passende Tool nicht?

Sag uns, was du suchst, und wir prüfen, ob wir es hinzufügen.

Tool vorschlagen →