SVG optimieren und die Dateigröße verkleinern
Auf dieser Seite
Kurz gesagt: Öffnen Sie den SVG-Optimierer von Imgovo, fügen Sie Ihre SVG hinzu (bis 3 MB), lassen Sie Kommentare und Editordaten entfernen eingeschaltet, runden Sie bei Bedarf die Zahlen und vergleichen Sie die Vorschau mit dem Original. Laden Sie dann die SVG herunter oder kopieren Sie den Code. Die Datei wird in Ihrem Browser verarbeitet und nie hochgeladen.
Warum SVG-Dateien groß werden
Ein einfaches Logo besteht aus wenigen Codezeilen. Zeichenprogramme wie Inkscape, Sketch oder Illustrator fügen aber oft viel mehr hinzu: Kommentare, Editor-Einstellungen, leere Gruppen, leere Attribute, großzügige Leerzeichen und Koordinaten mit vielen Dezimalstellen. Nichts davon verändert, was Sie sehen, aber alles muss geladen werden. Bei einer Website mit vielen Icons summiert sich das. Kleinere Dateien helfen auch, Ihre Seiten schneller zu laden; mehr dazu in Bilder für die Website optimieren: Größe, Format und Qualität.
Was der Optimierer macht
- Entfernt Kommentare und Editordaten.
- Entfernt leere Gruppen und leere Attribute.
- Entfernt überflüssige Leerzeichen.
- Kann lange Zahlen auf 3, 2 oder 1 Dezimalstelle runden oder unverändert lassen.
- Behält auf Wunsch Titel und Beschreibung, die Screenreader verwenden.
- Behält die viewBox, Formen, Verläufe, Beschneidungspfade, Masken und die IDs, die andere Teile der Datei verwenden.
Schritt für Schritt
- Öffnen Sie den SVG-Optimierer und ziehen Sie eine SVG-Datei auf die Seite, klicken Sie zum Auswählen oder fügen Sie sie ein.
- Wählen Sie unter Zahlengenauigkeit Zahlen unverändert lassen, 3 Dezimalstellen, 2 Dezimalstellen oder 1 Dezimalstelle.
- Lassen Sie Kommentare und Editordaten entfernen an. Aktivieren Sie Titel und Beschreibung behalten, wenn die Zeichnung ein Inhalt ist, den Screenreader vorlesen sollen.
- Sehen Sie sich den Bereich Ergebnis an. Er zeigt die Größe vorher und nachher und stellt Original und Ergebnis nebeneinander dar.
- Lesen Sie die Vergleichszeile. Imgovo zeichnet beide in derselben Größe und zeigt Pixel für Pixel, wie stark sie sich unterscheiden.
- Klicken Sie auf SVG herunterladen oder auf SVG-Code kopieren, um ihn in Ihre Seite einzufügen.
Zahlen runden?
Beginnen Sie ohne Rundung: Die Zeichnung bleibt gleich, und die Editordaten werden trotzdem entfernt. Probieren Sie dann 3 Dezimalstellen und, wenn die Vorschau noch passt, 2. Runden spart mehr Platz, kann aber dünne Linien oder winzige Details leicht verändern. Meldet Imgovo einen sichtbaren Unterschied, gehen Sie zu einer höheren Genauigkeit zurück.
Farben ändern, ohne einen Editor zu öffnen
Imgovo listet die einfarbigen Farben auf, die direkt in Formen und Stilen stehen. Wählen Sie für eine davon eine neue Farbe, und jede Verwendung genau dieser Farbe wird ersetzt. Das ist praktisch, um ein Icon in mehreren Markenfarben zu erzeugen.
Verläufe, Farben aus Stylesheets und das Wort currentColor bleiben unberührt. Der Pixelvergleich entfällt, wenn Sie Farben ändern, weil das Ergebnis dann erwartungsgemäß abweicht.
Text in einer SVG
Text wird mit einer Schrift gezeichnet. Hat das Gerät des Betrachters diese Schrift nicht, wird eine andere benutzt, und die Zeichnung verändert sich. Imgovo zeigt eine Warnung, wenn die Datei Text enthält. Das Umwandeln des Textes in Pfade in Ihrem Zeichenprogramm vermeidet das Problem.
Was aus Sicherheitsgründen entfernt wird
Eine SVG kann Skripte, eingebettete Webseiten, Animationen, die Links ändern können, Links zu anderen Seiten und Ereignisbehandler enthalten. Imgovo entfernt diese; ein Hinweis unter der Datei sagt, wie viele Elemente entfernt wurden. Das ist ein eigener Schritt, getrennt vom Verkleinern der Datei.
Nach dem Optimieren
- Um die SVG in ein Pixelbild umzuwandeln, nutzen Sie den SVG-Konverter.
- Als Website-Icon fügen Sie sie im Favicon-Generator hinzu, der eine
favicon.svgenthalten kann. - Bewahren Sie immer Ihre Originaldatei auf. Die Editordaten lassen sich aus der optimierten Kopie nicht wiederherstellen.
Datenschutz
Die SVG wird in Ihrem Browser gelesen und neu geschrieben. Es wird nichts hochgeladen.
Jetzt ausprobieren
Öffnen Sie den SVG-Optimierer, fügen Sie eine aus Ihrem Zeichenprogramm exportierte SVG hinzu und sehen Sie, wie viel kleiner sie wird.
Häufig gestellte Fragen
Was verändert der SVG-Optimierer?
Er entfernt Kommentare und Editordaten (zum Beispiel von Inkscape oder Sketch), leere Gruppen, leere Attribute und überflüssige Leerzeichen und kann lange Zahlen auf 1, 2 oder 3 Dezimalstellen runden. Die viewBox, Formen, Verläufe, Beschneidungspfade, Masken und die Ids, die andere Teile verwenden, bleiben erhalten.
Sieht meine Zeichnung danach anders aus?
Ohne Rundung sollte sie gleich aussehen. Imgovo zeichnet das Original und das Ergebnis in derselben Größe, vergleicht sie Pixel für Pixel und zeigt, wie stark sie sich unterscheiden. Beim Runden auf weniger Dezimalstellen können dünne Linien oder winzige Details sich leicht ändern, prüfen Sie deshalb die Vorschau.
Wie viel kleiner wird die Datei?
Das hängt von der Datei ab. Aus Editoren exportierte Zeichnungen schrumpfen oft stark, weil sie Editordaten enthalten; bereits kompakte Dateien ändern sich kaum. Das Ergebnis zeigt die echte Größe vorher und nachher.
Wie funktioniert das Ändern von Farben?
Imgovo listet die einfarbigen Farben auf, die direkt in Formen und Stilen stehen. Wählen Sie für eine davon eine neue Farbe, und jede Verwendung genau dieser Farbe wird ersetzt. Verläufe, per Stylesheet gesetzte Farben und das Wort currentColor bleiben unberührt.
Was wird aus Sicherheitsgründen entfernt?
Skripte, eingebettete Webseiten, Animationen, die Links ändern können, Links zu anderen Websites und Ereignis-Handler werden entfernt. Der Hinweis unter der Datei sagt, wie viele Elemente entfernt wurden. Das ist etwas anderes als das Verkleinern der Datei.
Wird meine SVG hochgeladen?
Nein. Die SVG wird in Ihrem Browser gelesen und neu geschrieben, nichts verlässt Ihr Gerät.