SVG-Optimierer
SVG-Code optimieren – kleinere Vektoren, identisches Rendering.
Sep 2026 aktualisiert
So verwenden Sie SVG-Optimierer
- Fügen Sie den SVG-Code ein – direkt aus dem Design-Tool-Export.
- Lesen Sie die optimierte Ausgabe und Größeneinsparung – 30–70 % sind typisch.
- Kopieren Sie die saubere SVG-Datei – integrieren Sie sie in HTML oder speichern Sie sie als Asset.
- Behalten Sie
bei aussagekräftigen Grafiken bei</strong> – es ist die Bezeichnung des Bildschirmlesegeräts.</li></ol> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">Was ist SVG-Optimierer?</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Ein SVG-Optimierer reinigt Vektordateien von allem, was nicht gezeichnet wird: Editor-Metadaten (Illustrator-/Figma-/Inkscape-Stempelexporte großzügig), Kommentare, versteckte Elemente, Standardwertattribute, übermäßige Pfadgenauigkeit (8 Dezimalstellen, wobei 2 ausreichen) und redundante Gruppierung. Das Rendering ist identisch; Dateien schrumpfen normalerweise um 30–70 %.</p><p>Exportierte SVGs sind notorisch aufgebläht – ein einfaches Symbol hinterlässt ein Designtool mit 8 KB und 6 KB Editor-Rest. Da SVGs als Code geliefert werden (häufig inline in HTML), ist dieser Rest das Seitengewicht und das DOM-Rauschen multipliziert mit jedem Symbol.</p> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">Über den SVG-Optimierer</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Fügen Sie den SVG-Code ein, lesen Sie die optimierte Version und die Größeneinsparung, kopieren Sie das saubere Ergebnis.</p><p>Was bereinigt wird und warum es sicher ist: Metadaten und Editor-Namespaces (reine Exportreste), Kommentare und Titel (es sei denn, Sie behalten sie aus Gründen der Barrierefreiheit – siehe unten), unsichtbare/leere Elemente, Pfadkoordinatengenauigkeit über die visuelle Relevanz hinaus und reduzierbare Transformationen/Gruppen. Was unberührt bleibt: alles, was gerendert wird – die Zeichnung ist byte-unterschiedlich, pixelidentisch.</p><p>Bereitstellungshinweise: Optimierte SVGs sind wunderbar in HTML integriert (Symbole ohne Anfragen – vergleiche die Base64-Route, die SVG normalerweise schlägt), und eine Einschränkung der Barrierefreiheit – <code><title></code>-Elemente dienen Bildschirmleseprogrammen, also behalten Sie sie bei aussagekräftigen (nicht dekorativen) Grafiken bei oder fügen Sie sie erneut hinzu. Optimieren Sie bei Symbolsystemen einmal zum Commit-Zeitpunkt. SVGO in der Build-Pipeline ist das automatisierte Geschwister dieses Tools. Der Code wird in Ihrem Browser verarbeitet.</p> </div> </section> <section class="glass-card p-6 sm:p-8" x-data="{ active: null }"> <h2 class="font-heading text-2xl font-semibold text-gold">Häufig gestellte Fragen</h2> <div class="mt-4 divide-y divide-gold/10"> <div class="py-3"> <button @click="active === 0 ? active = null : active = 0" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Wird sich durch die Optimierung das Aussehen meiner SVG-Datei ändern?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 0 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 0" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Nein – es werden nur nicht gerenderte Inhalte und redundante Präzision entfernt. Die Zeichnungsausgabe ist pixelidentisch; Vergleichen Sie die gerenderten Ergebnisse, wenn Ihnen die Bestätigung Spaß macht. </div> </div> <div class="py-3"> <button @click="active === 1 ? active = null : active = 1" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Warum sind SVG-Exporte von Designtools so aufgebläht?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 1 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 1" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Editoren betten ihre Arbeitsdaten ein – Ebenennamen, Editor-Namespaces, Metadatenblöcke, maximale Genauigkeit –, sodass die Datei im Tool originalgetreu wieder geöffnet wird. Das Web braucht nichts davon; Die Optimierung löscht das Gepäck des Herausgebers. </div> </div> <div class="py-3"> <button @click="active === 2 ? active = null : active = 2" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Wie viel Pfadgenauigkeit benötige ich eigentlich?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 2 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 2" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 1-2 Dezimalstellen für typische Symbol-ViewBoxen – der visuelle Unterschied zu 7-Dezimal-Koordinaten beträgt buchstäblich Subpixel. Die Reduzierung der Präzision ist oft der größte Byte-Gewinn. </div> </div> <div class="py-3"> <button @click="active === 3 ? active = null : active = 3" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Ist Inline-SVG besser als ein <img>-Tag?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 3 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 3" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Inline für Symbole, die Sie mit CSS formatieren/animieren (currentColor-Design ist das Killer-Feature) und zum Überspringen von Anfragen; <img>/CSS-url für große oder wiederholte Abbildungen, bei denen Caching von Vorteil ist. Optimierter Code macht Inlining in beiden Fällen kostengünstig. </div> </div> <div class="py-3"> <button @click="active === 4 ? active = null : active = 4" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">Was ist mit Barrierefreiheitselementen wie <title>?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 4 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 4" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Halten Sie sie auf aussagekräftigen Grafiken – <title> ist das, was Screenreader ankündigen. Dekorative Symbole nehmen stattdessen aria-hidden="true" an. Optimieren Sie die Bytes, nicht die Semantik. </div> </div> </div> </section> </div> <div class="space-y-6"> <aside class="glass-card p-5"> <h2 class="font-heading text-xl font-semibold text-gold">Verwandte Tools</h2> <ul class="mt-3 divide-y divide-gold/10"> <li> <a href="https://tonton-tools.com/de/png-to-gif" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG zu GIF</span> </a> </li> <li> <a href="https://tonton-tools.com/de/png-to-webp" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG zu WebP</span> </a> </li> <li> <a href="https://tonton-tools.com/de/webp-to-png" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">WebP zu PNG</span> </a> </li> <li> <a href="https://tonton-tools.com/de/webp-to-jpg" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">WebP zu JPG</span> </a> </li> <li> <a href="https://tonton-tools.com/de/image-converter" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Bildkonverter</span> </a> </li> <li> <a href="https://tonton-tools.com/de/image-resizer" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Bild-Resizer</span> </a> </li> </ul> <a href="https://tonton-tools.com/de/tools/image-tools" class="mt-3 inline-block text-xs font-medium text-gold hover:underline"> Alle anzeigen: Bildwerkzeuge → </a> </aside> </div> </div> <div class="my-6 flex justify-center" aria-label="Advertisement"> <ins class="adsbygoogle block w-full" style="display:block" data-ad-client="ca-pub-1594540167961527" data-ad-slot="6784859214" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </main> <footer class="relative mt-20 border-t border-gold/15 bg-charcoal-surface/40"> <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold/50 to-transparent"></div> <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6"> <div class="grid gap-10 md:grid-cols-4"> <div class="md:col-span-1"> <a href="https://tonton-tools.com/de" class="inline-block transition hover:opacity-90" aria-label="TontonTools home"> <img src="https://tonton-tools.com/images/logo.png" alt="TontonTools" width="1116" height="269" class="h-11 w-auto"> </a> <p class="mt-4 text-sm text-cream/60"> TontonTools is a free, ad-supported collection of 330+ online tools for SEO professionals, developers, YouTubers, content creators, and students. </p> </div> <div class="md:col-span-2 grid grid-cols-2 gap-6 sm:grid-cols-3"> <a href="https://tonton-tools.com/de/tools/text-tools" class="text-sm text-cream/70 transition hover:text-gold">Textwerkzeuge</a> <a href="https://tonton-tools.com/de/tools/youtube-tools" class="text-sm text-cream/70 transition hover:text-gold">YouTube-Tools</a> <a href="https://tonton-tools.com/de/tools/seo-tools" class="text-sm text-cream/70 transition hover:text-gold">SEO-Tools</a> <a href="https://tonton-tools.com/de/tools/domain-ip-tools" class="text-sm text-cream/70 transition hover:text-gold">Domain- und IP-Tools</a> <a href="https://tonton-tools.com/de/tools/website-management" class="text-sm text-cream/70 transition hover:text-gold">Website-Management</a> <a href="https://tonton-tools.com/de/tools/web-development" class="text-sm text-cream/70 transition hover:text-gold">Webentwicklung</a> <a href="https://tonton-tools.com/de/tools/image-tools" class="text-sm text-cream/70 transition hover:text-gold">Bildwerkzeuge</a> <a href="https://tonton-tools.com/de/tools/calculators" class="text-sm text-cream/70 transition hover:text-gold">Taschenrechner</a> <a href="https://tonton-tools.com/de/tools/unit-converters" class="text-sm text-cream/70 transition hover:text-gold">Einheitenumrechner</a> </div> <div> <h3 class="font-heading text-lg text-gold">Unternehmen</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/de/about" class="text-cream/70 hover:text-gold">Über</a></li> <li><a href="https://tonton-tools.com/de/contact" class="text-cream/70 hover:text-gold">Kontakt</a></li> <li><a href="https://tonton-tools.com/de/blog" class="text-cream/70 hover:text-gold">Blog</a></li> <li><a href="https://tonton-tools.com/de/developers" class="text-cream/70 hover:text-gold">Entwickler-API</a></li> <li><a href="https://tonton-tools.com/de/report-tool" class="text-cream/70 hover:text-gold">Melden Sie ein Tool</a></li> </ul> <h3 class="mt-6 font-heading text-lg text-gold">Rechtlich</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/de/privacy-policy" class="text-cream/70 hover:text-gold">Datenschutzrichtlinie</a></li> <li><a href="https://tonton-tools.com/de/terms-of-service" class="text-cream/70 hover:text-gold">Nutzungsbedingungen</a></li> <li><a href="https://tonton-tools.com/de/disclaimer" class="text-cream/70 hover:text-gold">Haftungsausschluss</a></li> </ul> </div> </div> <div class="mt-10 flex flex-col items-center justify-between gap-3 border-t border-gold/10 pt-6 text-sm text-cream/60 sm:flex-row"> <p>© 2026 TontonTools. Alle Rechte vorbehalten.</p> <p>Erstellt von Tonton Business Digital Agency</p> </div> </div> </footer> <div x-data="{ show: false }" x-init="show = ! localStorage.getItem('cookie_consent')" x-show="show" x-cloak x-transition.duration.300ms class="fixed inset-x-0 bottom-0 z-50 p-3 sm:p-4"> <div class="glass-card mx-auto flex max-w-4xl flex-col items-center gap-3 p-4 sm:flex-row sm:gap-4"> <p class="flex-1 text-center text-sm text-cream/70 sm:text-left"> We use cookies for analytics and to keep the tools free via ads. See our <a href="https://tonton-tools.com/de/privacy-policy" class="text-gold hover:underline">Privacy Policy</a>. </p> <div class="flex shrink-0 gap-2"> <button @click="localStorage.setItem('cookie_consent','declined'); show=false" class="btn-ghost text-sm">Decline</button> <button @click="localStorage.setItem('cookie_consent','accepted'); window.loadAnalytics && window.loadAnalytics(); show=false" class="btn-gold text-sm">Accept</button> </div> </div> </div> <script> // Fire a GA4 "tool_used" event the first time a visitor interacts with this tool. (function () { var section = document.getElementById('tool-interface'); if (!section) return; var fired = false; function fire() { if (fired) return; fired = true; window.trackToolUsed && window.trackToolUsed('svg-optimizer', 'image-tools'); } ['input', 'change', 'click', 'submit'].forEach(function (ev) { section.addEventListener(ev, fire, { passive: true }); }); })(); </script> </body> </html>