Fügen Sie SVG ein oder wählen Sie eine Datei und ein Komponentenziel. Das Entfernen von Metadaten, aktiven Elementen oder Attributen kann die Darstellung verändern.
Läuft lokal in deinem BrowserDiese Seite bereinigt SVG-Markup im Browser und gibt dieselbe Zeichnung als React-, Vue- oder Svelte-Komponente aus. Fügen Sie Markup ein oder wählen Sie eine lokale .svg-Datei: Vorschau, Byte-Zähler und generierter Code stammen alle aus dem bereinigten Element. Nichts wird hochgeladen, und die Seite arbeitet auch ohne Netzwerk weiter.
Die Bereinigung ist vorsichtig mit der Zeichnung und streng mit allem, was ausgeführt werden oder etwas nachladen kann: Koordinaten, IDs, Klassennamen und lokales CSS bleiben unverändert, während Skripte, Animationselemente, Event-Attribute und Remote-Verweise entfernt werden. Prüfen Sie die Vorschau vor der Verwendung, denn eine entfernte Animation oder eine gestrichene Remote-Regel ändert, was die Datei tut.
Entfernt werden: <script>, <foreignObject>, <iframe>, <object>, <embed>, <audio>, <video> und die Animationselemente <animate>, <animateMotion>, <animateTransform> und <set>; alle on*-Event-Attribute; href- und xlink:href-Werte, die keine internen #id-Verweise sind; jedes Attribut, dessen Wert eine entfernte url() aufruft; <style>-Blöcke mit @import oder Remote-url(); Kommentare, <metadata> und <desc>. Erhalten bleiben: Pfaddaten, IDs, Klassennamen, Präsentationsattribute wie rx, opacity und transform sowie CSS, das nur auf Dateiinhalte zeigt. Im Test überlebte url(#g1), während style="fill:url(https://…)" verschwand.
Umgeschrieben wird die Wurzel: Ein fehlendes viewBox entsteht aus width und height oder als 0 0 24 24, wenn beides fehlt; danach fallen width und height weg, xmlns wird gesetzt und Leerraum zwischen Tags wird zusammengezogen. Ein Minifier ist das nicht — Zahlen bleiben unangetastet, ein Pfad „M 4.000 4.0“ behält seine Nullen, und ein kleines Icon kann durch viewBox und xmlns sogar wachsen. Das Beispiel-Icon ging von 310 auf 248 Bytes; die Kacheln zählen UTF-8-Bytes, ein CJK-Text zählt also das, was er wirklich belegt.
React erhält eine Funktionskomponente, die {...props} auf die Wurzel verteilt; Attributnamen werden umgeschrieben, wo das Framework es verlangt: class wird zu className, und stroke-linecap, fill-opacity, font-size, text-anchor, stop-color oder clip-path werden zu camelCase, damit die Komponente keine Warnung über ungültige DOM-Properties ausgibt. Werte in Anführungszeichen und CSS innerhalb von <style> bleiben unverändert, und ein Icon ohne Kindelemente wird zu <svg … {...props} /> ohne Schluss-Tag.
Vue erhält eine Single-File-Komponente mit <script setup>, defineProps({ size }) und :width/:height an size gebunden; Svelte nutzt export let size mit width={size} height={size}. Beide ergänzen aria-hidden, und React setzt gar keine Größe — dort trägt die Wurzel nur die viewBox, width und height kommen also über Props oder CSS. Das Namensfeld wird zu einem PascalCase-Bezeichner: leer ergibt KivIcon, und ein Name, der keinen Bezeichner beginnen kann, bekommt ein Präfix — 3d-icon exportiert Svg3dIcon.
Es gibt keine Pfadoptimierung und kein Umschreiben von IDs: Zwei Icons, die beide id="g1" definieren, kollidieren auf einer Seite weiterhin, genau wie bei handgeschriebenem SVG. Animationen werden gelöscht statt erhalten, und ein <style>-Block, der eine lokale Regel mit einer Remote-url() mischt, fällt komplett weg — prüfen Sie die Vorschau, wenn das Original auf ein verlinktes Stylesheet gebaut hat.
Die Vorschau ist ein <img> mit Blob-URL, Skripte im Markup können also nicht laufen; das macht sie zu einem getreuen Abbild der bereinigten Datei, nicht zu einem Sicherheitsaudit. Ungültige Eingaben werden gemeldet und das vorherige Ergebnis wird gelöscht statt stehen gelassen: Nötig ist genau eine <svg>-Wurzel, und eine undefinierte XML-Entität wie wird abgelehnt, weil ein SVG als XML geparst wird — é und die fünf vordefinierten Entitäten sind erlaubt.