Ratgeber

So optimieren Sie SVG Dateien und pruefen die Dateigroesse

Erfahren Sie, wie Sie SVG-Dateien online optimieren: Entfernen Sie unnoetige Metadaten und Kommentare, runden Sie numerische Attribute und senken Sie die Dateigroesse.

Tool SVG Optimizer

SVG-Vektorgrafiken enthalten nach dem Export aus Grafikprogrammen oft unnoetige Metadaten, XML-Kommentare, ueberfluessige Leerzeichen und uebermaessig viele Nachkommastellen. Mit dem passenden Werkzeug reduzieren Sie das Dateigewicht fuer kuerzere Ladezeiten im Web, ohne die visuelle Struktur zu beschaedigen.

Wofuer sich die SVG Optimierung eignet

Grafiksoftware wie Illustrator, Inkscape oder Figma bettet beim Speichern haeufig zusaetzliche Metadaten ein. Dazu gehoeren Generator-Tags, Ebeneninformationen, Bearbeitungshistorien und ausfuehrliche Kommentare. Zusaetzlich werden Koordinaten oft mit fuenf oder sechs Nachkommastellen ausgegeben, obwohl fuer die Bildschirmanzeige zwei Stellen voellig ausreichen.

Eine gezielte Optimierung entfernt diese ueberfluessigen Textbloecke und rundet numerische Werte einheitlich. Das spart Bandbreite auf Webseiten und beschleunigt das Rendering im Browser.

SVG Schritt fuer Schritt optimieren

Mit dem SVG Optimizer bereinigen Sie Ihre Vektordateien direkt im Browser:

  1. SVG-Datei waehlen: Laden Sie eine gueltige UTF-8-kodierte SVG-Datei mit maximal 2 MB Dateigroesse hoch.
  2. Bereinigungsoptionen festlegen: Waehlen Sie aus, ob Kommentare und Metadaten entfernt werden sollen. Beide Optionen sind standardmaessig aktiv.
  3. Genauigkeit einstellen: Bestimmen Sie die Anzahl der Nachkommastellen fuer numerische Attribute zwischen 0 und 6. Der Standardwert 2 bietet eine ideale Balance aus visueller Praezision und geringer Dateigroesse.
  4. Optimierung starten: Das Werkzeug entfernt ueberfluessige Leerzeilen, bereinigt die Tags und rundet ausgewaehlte Zahlenwerte.
  5. Ergebnis uebernehmen: Kopieren Sie den fertigen SVG-Code oder laden Sie die Datei als optimized.svg herunter. Die Auswertung zeigt Ihnen direkt die urspruengliche Groesse, die neue Groesse in Bytes sowie die prozentuale Ersparnis an.

Numerische Rundung und Bereinigung im Detail

Das Werkzeug verarbeitet das XML-Dokument gezielt. Beim Entfernen von Kommentaren und Metadaten werden Bloecke wie <!-- ... --> und <metadata>...</metadata> vollstaendig geloescht. Zusaetzliche Leerzeichen zwischen schliessenden und oeffnenden Tags sowie Zeilenumbrueche werden zusammengefasst.

Die Rundung betrifft viewBox-Werte und einheitenlose Attribute wie Koordinaten, Breiten, Hoehen, Deckkraft oder Strichbreiten. Werte mit festen Einheitenbezeichnungen oder komplexe Transformationen bleiben unberuehrt, um Anzeigefehler zu vermeiden.

Praktisches Beispiel fuer ein Web-Icon

Ein aus einem Vektorprogramm exportiertes Social-Media-Icon enthaelt oft Metadatenbloecke und Koordinaten mit fuenf Dezimalstellen. Die Originaldatei umfasst beispielsweise 12.450 Bytes.

Nach dem Hochladen aktivieren Sie das Entfernen von Kommentaren sowie Metadaten und setzen die Praezision auf 2 Nachkommastellen. Das Ergebnis liefert eine bereinigte SVG-Datei mit 6.120 Bytes. Dies entspricht einer Einsparung von rund 50,8 Prozent bei identischer visueller Darstellung im Browser.

Falls Sie das optimierte Vektor-Icon fuer aeltere Plattformen oder Dokumente in ein Rasterbild umwandeln muessen, koennen Sie dafuer den SVG zu PNG Konverter nutzen.

Grenzen und haeufige Fehler

  • Kein Sicherheitsfilter: Das Werkzeug ist kein SVG-Sanitizer. Eingebettete Skripte, externe Verweise oder Event-Handler werden nicht neutralisiert. Optimieren Sie nur Vektordateien aus vertrauenswuerdigen Quellen.
  • Ungueltiges XML oder DTD: Dateien mit DTD-Deklarationen, Entity-Definitionen oder fehlerhafter XML-Syntax werden aus Sicherheitsgruenden abgewiesen.
  • Dateigroessenlimit: Vektordateien ueber 2 MB koennen nicht verarbeitet werden.
  • Zu aggressive Rundung: Eine Rundung auf 0 Nachkommastellen kann bei filigranen Icons zu sichtbaren Verzerrungen fuehren. Pruefen Sie das optische Ergebnis nach der Reduktion.

Haeufig gestellte Fragen

Welche SVG-Dateien koennen verarbeitet werden?

Es werden alle standardkonformen, UTF-8-kodierten SVG-Dateien bis zu einer Maximalgroesse von 2 MB unterstuetzt. Die Datei muss ein gueltiges SVG-Wurzelelement besitzen.

Werden alle Zahlenwerte im Dokument gerundet?

Nein. Gerundet werden nur viewBox-Angaben und ausgewaehlte einheitenlose Attribute wie x, y, width, height oder opacity. Pfaddefinitionen mit festen Einheiten bleiben unveraendert.

Werden Skripte aus der SVG-Datei entfernt?

Nein. Das Werkzeug entfernt Metadaten und Kommentare, fungiert jedoch nicht als Sanitizer gegen ausfuehrbaren Code.

Tool

SVG Optimizer