Utilia
Kategorien ▾
Sprache: de ▾

SVG optimieren

SVG-Dateien online mit SVGO im Browser optimieren und minifizieren – mit Voreinstellungen, visuellem Vergleich und Anzeige der Ersparnis inkl. gzip.

Plugins

Ohne viewBox skaliert die Zeichnung nicht mehr, und das Kürzen oder Entfernen von IDs bricht CSS, JavaScript, <use> oder Ankerlinks, die darauf verweisen. Verwenden Sie für SVGs in Code, Sprites oder Animationen die Voreinstellung „Sicher“.

So optimieren Sie ein SVG

  1. Ziehen Sie eine SVG-Datei auf die Ablagefläche oder klicken Sie darauf, um eine auszuwählen. Sie können das Markup auch in das Feld SVG-Code einfügen.
  2. Wählen Sie eine Voreinstellung: Sicher, Ausgewogen (Standard) oder Maximal. Die Liste Plugins darunter zeigt genau, welche Schritte jede Voreinstellung aktiviert.
  3. Passen Sie bei Bedarf Dezimalgenauigkeit (0 bis 8 Stellen), Mehrere Durchgänge und Formatiert ausgeben (mit Einrückung) an, wenn Sie lesbaren Code möchten. Sobald Sie ein Plugin, die Genauigkeit oder die Durchgänge ändern, wechselt die Voreinstellung zu Benutzerdefiniert.
  4. Klicken Sie auf SVG optimieren. Eine abgelegte Datei wird sofort optimiert, und sobald ein Ergebnis vorliegt, löst jede Änderung der Einstellungen die Optimierung automatisch neu aus.
  5. Prüfen Sie die Werte Originalgröße, Optimierte Größe, Ersparnis und Mit gzip und vergleichen Sie die beiden Zeichnungen nebeneinander.
  6. Klicken Sie auf Kopieren, um den Optimierten SVG-Code zu kopieren, oder auf Optimiertes SVG herunterladen, um ihn als name.min.svg zu speichern.

Die Optimierung übernimmt SVGO 4, der Standard-Open-Source-Optimierer für SVG (MIT-Lizenz), den die meisten Web-Build-Tools nutzen. Seine Browserversion wird beim ersten Klick geladen und läuft vollständig auf Ihrem Gerät: Ihr SVG wird nie hochgeladen.

Warum SVGs aus Designprogrammen so schwer sind

Ein aus Illustrator, Inkscape, Figma oder Sketch exportiertes SVG enthält viel mehr als die Zeichnung. Editoren fügen eigene Namensräume und Attribute hinzu (Ebenennamen, Hilfslinien, Exporteinstellungen), einen <metadata>-Block, Kommentare wie „Generator: Adobe Illustrator“, Koordinaten mit sechs oder mehr Nachkommastellen, Gruppen mit nur einem Element und ausführliche Farben wie #ffffff. Nichts davon ändert, was der Browser zeichnet. SVGO entfernt all das, rundet Zahlen, schreibt Pfaddaten mit kürzeren Befehlen neu, kürzt Farben und führt überflüssige Elemente zusammen oder löst sie auf. Eine Reduktion um 40–60 % ist bei exportierten Symbolen und Illustrationen üblich.

Voreinstellungen und riskante Plugins

  • Sicher nutzt die Standard-Voreinstellung von SVGO, behält aber IDs, <desc>, getrennte Pfade und <style>-Regeln, mit 3 Nachkommastellen und einem Durchgang. Verwenden Sie sie für SVGs, auf die CSS oder JavaScript verweisen, für Sprites und Animationen.
  • Ausgewogen ist die Standard-Voreinstellung von SVGO mit 3 Nachkommastellen und mehreren Durchgängen. Sie passt für die meisten Symbole und Illustrationen, die als Bild angezeigt werden.
  • Maximal ergänzt entfernen</strong>, <strong>Skripte und Event-Attribute entfernen</strong>, <strong>width/height entfernen (viewBox behalten)</strong> und <strong>xlink:href durch href ersetzen</strong>, mit 2 Nachkommastellen und mehreren Durchgängen.</li> </ul> <p>Keine Voreinstellung entfernt die viewBox. <strong>viewBox entfernen</strong> ist nur für Sonderfälle gedacht: Ohne viewBox kann die Zeichnung nicht mehr auf die in CSS festgelegte Größe skalieren.</p> <p>Das können die anderen Plugins kaputt machen:</p> <ul> <li><strong>IDs kürzen und ungenutzte entfernen</strong> benennt IDs wie <code>#icon-home</code> in <code>a</code> um. Jeder CSS-Selektor, jede JavaScript-Abfrage, jeder Sprite-Verweis <code><use href="#…"></code>, jeder Seitenanker und jede SMIL- oder CSS-Animation, die den alten Namen anspricht, funktioniert dann nicht mehr.</li> <li><strong><title> entfernen</strong> und <strong><desc> entfernen</strong> löschen den barrierefreien Namen und die Beschreibung. Behalten Sie sie bei aussagekräftigen Symbolen und Diagrammen, die Screenreader vorlesen müssen.</li> <li>Eine niedrige <strong>Dezimalgenauigkeit</strong> kann kleine Symbole verformen: Kurven wackeln, Kanten verrutschen. Prüfen Sie immer den visuellen Vergleich; 3 ist ein sicherer Standardwert.</li> <li><strong>Pfade zusammenführen</strong> verbindet benachbarte Pfade zu einem, sodass ein Hover-Effekt oder eine Animation, die auf einen einzelnen Pfad zielte, ihr Ziel verliert.</li> </ul> <h2>Tipps</h2> <ul> <li>Behalten Sie eine unoptimierte Masterkopie zum Bearbeiten; behandeln Sie die <code>.min.svg</code> wie kompilierten Code.</li> <li>Aktivieren Sie gzip oder Brotli auf Ihrem Server: Textformate wie SVG lassen sich sehr gut komprimieren, und der Wert <strong>Mit gzip</strong> zeigt, was Besucher tatsächlich herunterladen (angezeigt, wenn Ihr Browser <code>CompressionStream</code> unterstützt).</li> <li>Inline-SVG lässt sich per CSS gestalten und animieren, wird aber nicht separat zwischengespeichert; ein SVG in <code><img></code> wird zwischengespeichert, lässt sich aber nicht von der Seite aus gestalten.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Häufige Fragen</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Wird mein SVG auf einen Server hochgeladen?</summary> <div class="prose px-5 pb-5"><p>Nein. SVGO läuft in Ihrem Browser. Heruntergeladen wird nur einmalig der Code des Optimierers, beim ersten Optimieren.</p></div> </details> <details class="faq group"> <summary>Warum wird die Vorschau als Bild angezeigt?</summary> <div class="prose px-5 pb-5"><p>SVG ist ein Dokumentformat, das JavaScript enthalten und externe Dateien laden kann. Beide Vorschauen werden als <code><img></code> von lokalen Blob-URLs gerendert; in diesem Modus führen Browser nie Skripte aus und laden keine externen Ressourcen, die Vorschau eines nicht vertrauenswürdigen SVG ist hier also sicher. Der optimierte Code selbst enthält eventuelle Skripte weiterhin, außer <strong>Skripte und Event-Attribute entfernen</strong> ist aktiv (bei <strong>Maximal</strong> ist es das).</p></div> </details> <details class="faq group"> <summary>Mein optimiertes SVG skaliert nicht mehr. Was ist passiert?</summary> <div class="prose px-5 pb-5"><p>Vermutlich wurde die viewBox entfernt, entweder durch <strong>viewBox entfernen</strong> oder schon früher durch ein anderes Werkzeug. Optimieren Sie das Original erneut mit deaktiviertem Plugin.</p></div> </details> <details class="faq group"> <summary>Warum funktionieren mein Icon-Sprite oder meine Animation nicht mehr?</summary> <div class="prose px-5 pb-5"><p><strong>IDs kürzen und ungenutzte entfernen</strong> oder <strong>Pfade zusammenführen</strong> haben die Elemente verändert, auf die Ihr Code verweist. Verwenden Sie die Voreinstellung <strong>Sicher</strong>, die beides beibehält.</p></div> </details> <details class="faq group"> <summary>Die optimierte Datei ist nicht kleiner. Warum?</summary> <div class="prose px-5 pb-5"><p>Das SVG ist vermutlich bereits minifiziert. Versuchen Sie <strong>Maximal</strong> oder eine geringere <strong>Dezimalgenauigkeit</strong> und deaktivieren Sie <strong>Formatiert ausgeben (mit Einrückung)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Ähnliche Tools</h2> <ul class="card-grid mt-4"><li><a class="card" href="/de/svg-in-png/"> <span class="card-title">SVG in PNG umwandeln</span> <span class="card-text">SVG im Browser in PNG, JPG oder WebP umwandeln – in beliebiger Breite, Höhe, Skalierung oder DPI, mit transparentem oder farbigem Hintergrund.</span> </a></li> <li><a class="card" href="/de/bild-in-svg/"> <span class="card-title">Bild in SVG umwandeln (Vektorisieren)</span> <span class="card-text">PNG- oder JPG-Logo oder Zeichnung im Browser in SVG-Vektorpfade umwandeln – mit Voreinstellungen, Farbanzahl, Fleckenfilter und sicherer Vorschau.</span> </a></li> <li><a class="card" href="/de/bild-komprimieren/"> <span class="card-title">Bild komprimieren</span> <span class="card-text">JPG-, PNG- und WebP-Bilder mit Qualitätsregler komprimieren, Größe vorher und nachher vergleichen und viele Fotos auf einmal verarbeiten – ohne Upload.</span> </a></li> <li><a class="card" href="/de/css-formatierer/"> <span class="card-title">CSS-Formatierer und -Minifier</span> <span class="card-text">Unordentliches CSS sauber einrücken oder mit csso minifizieren und die Größe vorher und nachher sehen. Läuft im Browser, nichts wird hochgeladen.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Anzeige"><span class="ad-label">Anzeige</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Kostenlose Online-Tools, die in Ihrem Browser laufen. Ihre Daten bleiben auf Ihrem Gerät.</p> </div> <nav aria-label="Kategorien"> <p class="font-semibold">Tools</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/de/textwerkzeuge/">Textwerkzeuge</a></li><li><a class="link-muted" href="/de/entwickler-tools/">Entwickler-Tools</a></li><li><a class="link-muted" href="/de/web-seo-marketing/">Web, SEO und Marketing</a></li><li><a class="link-muted" href="/de/farben-design/">Farben und Design</a></li><li><a class="link-muted" href="/de/bildbearbeitung/">Bildbearbeitung</a></li><li><a class="link-muted" href="/de/pdf-dokumente/">PDF und Dokumente</a></li><li><a class="link-muted" href="/de/mathe-rechner/">Mathe-Rechner</a></li><li><a class="link-muted" href="/de/finanzrechner/">Finanzrechner</a></li><li><a class="link-muted" href="/de/datum-uhrzeit/">Datum und Uhrzeit</a></li><li><a class="link-muted" href="/de/einheitenumrechner/">Einheitenumrechner</a></li><li><a class="link-muted" href="/de/gesundheitsrechner/">Gesundheit und Fitness</a></li><li><a class="link-muted" href="/de/haus-kueche-auto/">Haus, Heimwerken, Küche und Auto</a></li><li><a class="link-muted" href="/de/generatoren/">Generatoren</a></li><li><a class="link-muted" href="/de/geraetetests/">Geräte- und Browsertests</a></li><li><a class="link-muted" href="/de/audio-video/">Audio und Video</a></li><li><a class="link-muted" href="/de/bildung-sprachen/">Bildung und Sprachen</a></li><li><a class="link-muted" href="/de/spiele/">Spiele</a></li></ul> </nav> <nav aria-label="Informationen"> <p class="font-semibold">Informationen</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/de/ueber-uns/">Über uns</a></li> <li><a class="link-muted" href="/de/kontakt/">Kontakt</a></li> <li><a class="link-muted" href="/de/datenschutz/">Datenschutzerklärung</a></li> <li><a class="link-muted" href="/de/nutzungsbedingungen/">Nutzungsbedingungen</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>