Optimieren Sie SVG online – SVGO-Voreinstellungen in Ihrem Browser

Optimieren Sie SVG gründlich mit SVGO sicheren, standardmäßigen oder aggressiven Voreinstellungen. Geht über die schnelle Minimierung hinaus – die gesamte Verarbeitung bleibt lokal.

0 chars · 0 B

Voreingestellt

Teilen Sie dieses Tool:

SVG Eingang

Optimiert SVG

SVGO wird nach dem Laden bei Bedarf lokal ausgeführt – es wird nichts hochgeladen.

Laden…

SVG-Optimierer – SVGO-Playbook

Optimieren Sie SVG gründlich mit SVGO-Voreinstellungen, die über die schnelle Regex-Minimierung hinausgehen. Wählen Sie zwischen sicherer, ausgewogener oder aggressiver Reduzierung – alles bleibt in Ihrem Browser.

Hinweise des Entwicklers

• SVGO wird nur bei Bedarf geladen (~780 KB), wenn Sie optimieren – nicht auf Minify-svg-Seiten. • Safe hält Pfade und IDs intakt; Aggressiv kann Pfade für eine kleinere Ausgabe zusammenführen. • Die Eingabe ist auf 512 KB begrenzt, damit die Registerkarte reaktionsfähig bleibt. • Zum schnellen Entfernen von Leerzeichen ohne SVGO verwenden Sie stattdessen minify-svg.

Optionen

SVGO voreingestellt

Wählen Sie „Sicher“ (minimales Risiko), „Standard“ (ausgewogen SVGO) oder „Aggressiv“ (maximale Größenreduzierung – kann die Grafik verändern). Standard beginnt bei Standard.

Wenn Teams diese Route wählen

• Figma- oder Illustrator-Exporte verkleinern, bevor Symbole versendet werden. • Vergleichen Sie sichere und aggressive Ergebnisse bei Marketingillustrationen. • Bereiten Sie Sprite-Kandidaten vor und behalten Sie dabei Titel/Beschreibung für die Zugänglichkeit bei. • Batch-Prüfung eines Assets nach dem anderen ohne CLI-Einrichtung.

Ausgearbeitete Beispiele

Marketing-Abzeichen mit Metadaten

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Schnelllieferungsabzeichen</title>
  <desc id="badge-desc">Abgerundetes Abzeichen mit Blitzsymbol und Hintergrund mit Farbverlauf.</desc>
  <defs>
    <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
    <clipPath id="badgeClip">
      <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/>
    </clipPath>
  </defs>
  <g clip-path="url(#badgeClip)">
    <rect width="240" height="72" fill="url(#badgeGradient)"/>
    <g transform="translate(20 16)">
      <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/>
      <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/>
    </g>
    <g font-family="Inter, Arial, sans-serif" fill="#fff">
      <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text>
      <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimiertes SVG Asset</text>
    </g>
  </g>
</svg>

Ausgabe

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"><title id="badge-title">Abzeichen für schnelle Lieferung</title><desc id="badge-desc">Abgerundetes Abzeichen mit Blitzsymbol und Farbverlauf Hintergrund.</desc><defs><linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="100%" stop-color="#fb923c"/></linearGradient><clipPath id="badgeClip"><rect x="0" y="0" width="240" height="72" rx="18" ry="18"/></clipPath></defs>⟦T14 ⟧<rect width="240" height="72" fill="url(#badgeGradient)"/><g transform="translate(20 16)"><circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/><path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/></g><g font-family="Inter, Arial, sans-serif" fill="#fff"><text x="76" y="31" font-size="18" font-weight="700">FastMinify</text><text x="76" y="49" font-size="12" fill-opacity="0.92">Optimiert SVG Vermögenswert</text></g></g></svg>

Standardmäßig voreingestellte Einsparungen

Beispieleingabe

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
  <title>Stern</title>
  <path fill="currentColor" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z"/>
</svg>

Ausgabe

Kleineres SVG mit Kommentaren und Leerzeichen, die durch SVGO entfernt wurden.

Navigieren Sie durch verwandte SVG-Tools

Benötigen Sie eine schnellere Komprimierung nur für Leerzeichen? Verwenden Sie minify SVG. Konvertieren Sie in React mit SVG in JSX oder durchsuchen Sie den SVG Tools Hub.

SVG FAQ zum Optimierer

SVGO Voreinstellungen im Browser

Wann sollte minify-svg vs. Optimize-svg verwendet werden?

Verwenden Sie minify-svg für die sofortige Entfernung von Regex-Leerzeichen. Verwenden Sie Optimize-svg, wenn Sie eine SVGO-Pfadbereinigung und eine voreingestellte kontrollierte Tiefe benötigen.

Welche Voreinstellung soll ich wählen?

Sicher für Symbole mit IDs, Standard für die meisten Produktionsressourcen, aggressiv, wenn die Bytegröße wichtiger ist als die Pfadtreue.

Ist mein SVG hochgeladen?

Niemals – SVGO wird lokal ausgeführt, nachdem die Bibliothek geladen wurde.

Große Dateien?

Eingaben über 512 KB werden mit einer eindeutigen Meldung abgelehnt, um den Browserspeicher zu schützen.

Weitere SVG-Tools

SVG minimierenSVG optimierenSVG Betrachter SVG zu Daten URI Verschönern SVG SVG aufheben SVG zu JSX Größe ändern SVG SVG validieren

Suchen Sie nach Konvertern, Encodern, Formatierern und Minifiern an einem Ort? Hub für Entwicklertools Öffnen Sie den kuratierten Entwicklertools-Katalog.