SVG Opschoner Online

Optimaliseer en maak SVGs schoon die geëxporteerd zijn vanuit Figma, Adobe Illustrator of Inkscape. Verwijder metadata, overbodige attributen en lege groepen voor een productieklare SVG.

Hulpmiddelenstudio

Wil je dit hulpmiddel op je website?

Pas kleuren en de donkere modus aan voor WordPress, Notion of je eigen site.

Veelgestelde vragen

Kan ik de volledige HTML van een pagina met ingesloten SVG plakken?

Ja. De opschoner detecteert het SVG-element in de HTML en extraheert alleen dat blok voor verwerking. Het werkt ook als je het SVG-fragment direct plakt.

Werkt het ook met SVGs van Illustrator?

Ja. Illustrator exporteert SVGs met XML-declaraties, metadata en eigen namespaces die de opschoner verwijdert. Het resultaat is een SVG die compatibel is met alle moderne browsers.

Wat is het verschil tussen opschonen en minificeren?

Opschonen verwijdert overbodige attributen en tags, maar behoudt het ingesprongen formaat zodat je de code kunt lezen en bewerken. Minificeren comprimeert alles ook nog eens tot één regel om de bestandsgrootte maximaal te beperken.

Kan het verwijderen van ID's de SVG beschadigen?

Alleen als een element in de SVG een ander element via ID aanroept, bijvoorbeeld via fill="url(#gradient)". Schakel in dat geval de optie ID's verwijderen uit. Die is standaard uitgeschakeld om dit probleem te voorkomen.

Wordt mijn SVG-code naar een server gestuurd?

Nee. Alle verwerking vindt plaats in je browser via de ingebouwde DOMParser- en XMLSerializer-API's. De code verlaat je apparaat nooit.

# SVG Opschoner: Code van Figma en Illustrator schoonmaken

Plak een willekeurige SVG geëxporteerd vanuit Figma, Adobe Illustrator of de browser-inspector en ontvang een schone, geoptimaliseerde vectorafbeelding klaar voor productie.

# Waarom zijn geëxporteerde SVGs zo rommelig?

Wanneer je een SVG exporteert vanuit Figma, krijg je een bestand vol attributen die alleen binnen de applicatie zinvol zijn: data-name, xml:space, verwijzingen naar interne lagen en designmetadata. Het resultaat is een SVG die 40 tot 70% groter kan zijn dan nodig.

# Wat de opschoner verwijdert

  • Editormetadata: de tags metadata, title en desc die Figma en Illustrator automatisch toevoegen.
  • Inkscape-namespaces: alle elementen met het prefix inkscape: en sodipodi:.
  • Overbodige attributen: xml:space, version, overbodige xmlns:* en Figma-data-*-attributen.
  • Lege groepen: <g>-elementen zonder inhoud die als resten van verwijderde lagen overblijven.
  • XML-declaraties: de <?xml version="1.0"?>-declaratie en het DOCTYPE die niet nodig zijn bij het insluiten van SVG in HTML.

Bibliografische Referenties