Wordt mijn SVG naar een server geüpload?

Nee. SVGO draait in je browser. Het enige wat wordt gedownload, is de code van de optimalisator zelf, de eerste keer dat je optimaliseert.

Waarom wordt het voorbeeld als afbeeldingen getoond?

SVG is een documentformaat dat JavaScript kan bevatten en externe bestanden kan laden. Beide voorbeelden worden als <img weergegeven vanaf lokale blob URL’s, en in die modus voeren browsers nooit scripts uit en halen ze geen externe bronnen op, dus een onbetrouwbare SVG hier bekijken is veilig. De geoptimaliseerde code zelf bevat nog wel eventuele scripts, tenzij Scripts en eventattributen verwijderen aan staat dat is zo bij Maximaal .

Mijn geoptimaliseerde SVG schaalt niet meer. Wat is er gebeurd?

De viewBox is waarschijnlijk verwijderd, door viewBox verwijderen of eerder door een andere tool. Optimaliseer het origineel opnieuw met die plug in uit.

Waarom werkt mijn pictogramsprite of animatie niet meer?

ID’s inkorten en ongebruikte ID’s verwijderen of Paden samenvoegen heeft de elementen veranderd waarnaar je code verwijst. Gebruik de voorinstelling Veilig , die beide behoudt.

Het geoptimaliseerde bestand is niet kleiner. Hoe kan dat?

De SVG is waarschijnlijk al geminificeerd. Probeer Maximaal of een lagere Decimale precisie , en zet Netjes opmaken ingesprongen uitvoer uit.

SVG optimaliseren online – SVG-code verkleinen en opschonen

Optimaliseer en verklein SVG-bestanden online met SVGO, in je browser. Kies een voorinstelling, vergelijk het resultaat visueel en zie de besparing met gzip.

Zo optimaliseer je een SVG

Sleep een SVG-bestand naar het uploadvlak of klik erop om er een te kiezen. Je kunt de code ook in het vak SVG-code plakken.
Kies een Voorinstelling: Veilig, Gebalanceerd (de standaard) of Maximaal. De lijst Plug-ins eronder toont precies welke stappen elke voorinstelling aanzet.
Pas zo nodig aan: de Decimale precisie (0 tot 8 cijfers), Meerdere rondes, en Netjes opmaken (ingesprongen uitvoer) als je leesbare code wilt. Zodra je een plug-in, de precisie of het aantal rondes verandert, springt de voorinstelling op Aangepast.
Klik op SVG optimaliseren. Een gesleept bestand wordt meteen geoptimaliseerd, en zodra er een resultaat is, wordt de optimalisatie bij elke wijziging in de instellingen automatisch opnieuw uitgevoerd.
Bekijk de cijfers Oorspronkelijke grootte, Geoptimaliseerde grootte, Besparing en Met gzip, en vergelijk de twee tekeningen naast elkaar.
Klik op Kopiëren om de Geoptimaliseerde SVG-code te kopiëren, of op Geoptimaliseerde SVG downloaden om haar op te slaan als naam.min.svg.

De optimalisatie wordt uitgevoerd door SVGO 4, de standaard opensource-SVG-optimalisator (MIT) die in de meeste buildtools voor het web wordt gebruikt. De browserversie wordt geladen bij de eerste klik en draait volledig op je apparaat: je SVG wordt nooit geüpload.

Waarom SVG’s uit ontwerpprogramma’s zo zwaar zijn

Een SVG die uit Illustrator, Inkscape, Figma of Sketch is geëxporteerd, bevat veel meer dan de tekening. Editors voegen hun eigen namespaces en attributen toe (laagnamen, hulplijnen, exportinstellingen), een blok <metadata>, opmerkingen zoals “Generator: Adobe Illustrator”, coördinaten met zes of meer decimalen, groepen met één enkel element en omslachtige kleuren zoals #ffffff. Niets daarvan verandert wat de browser tekent. SVGO verwijdert het, rondt getallen af, herschrijft padgegevens met kortere commando’s, kort kleuren in en voegt overbodige elementen samen of pakt ze uit. Een besparing van 40–60% is gebruikelijk bij geëxporteerde pictogrammen en illustraties.

Voorinstellingen en riskante plug-ins

Veilig draait de standaardvoorinstelling van SVGO, maar behoudt ID’s, <desc>, afzonderlijke paden en <style>-regels, met 3 decimalen en één ronde. Gebruik deze voor SVG’s waarnaar vanuit CSS of JavaScript wordt verwezen, sprites en animaties.
Gebalanceerd is de standaardvoorinstelling van SVGO, met 3 decimalen en meerdere rondes. Geschikt voor de meeste pictogrammen en illustraties die als afbeelding worden getoond.
Maximaal voegt verwijderen</strong>, <strong>Scripts en eventattributen verwijderen</strong>, <strong>width/height verwijderen (viewBox behouden)</strong> en <strong>xlink:href vervangen door href</strong> toe, met 2 decimalen en meerdere rondes.</li> </ul> <p>Geen enkele voorinstelling verwijdert de viewBox. <strong>viewBox verwijderen</strong> is er alleen voor speciale gevallen: zonder viewBox kan de tekening niet meer schalen naar het formaat dat je in CSS opgeeft.</p> <p>Weet wat de andere plug-ins kunnen breken:</p> <ul> <li><strong>ID’s inkorten en ongebruikte ID’s verwijderen</strong> hernoemt ID’s zoals <code>#icon-home</code> naar <code>a</code>. Elke CSS-selector, JavaScript-query, spriteverwijzing <code><use href="#…"></code>, paginalink of SMIL-/CSS-animatie die de oude naam gebruikt, werkt dan niet meer.</li> <li><strong><title> verwijderen</strong> en <strong><desc> verwijderen</strong> wissen de toegankelijke naam en beschrijving. Behoud ze bij betekenisvolle pictogrammen en grafieken die schermlezers moeten voorlezen.</li> <li>Een lage <strong>Decimale precisie</strong> kan kleine pictogrammen vervormen: curven gaan wiebelen en randen verschuiven. Controleer altijd de visuele vergelijking; 3 is een veilige standaard.</li> <li><strong>Paden samenvoegen</strong> voegt aangrenzende paden samen tot één, zodat een hovereffect of animatie die op één pad was gericht, haar doel kwijtraakt.</li> </ul> <h2>Tips</h2> <ul> <li>Bewaar een niet-geoptimaliseerde masterkopie om te bewerken; behandel de <code>.min.svg</code> als gecompileerde code.</li> <li>Zet gzip of brotli aan op je server: tekstformaten zoals SVG laten zich heel goed comprimeren, en het cijfer <strong>Met gzip</strong> toont wat bezoekers echt downloaden (zichtbaar als je browser <code>CompressionStream</code> ondersteunt).</li> <li>Inline SVG kun je met CSS stylen en animeren, maar wordt niet apart gecachet; een SVG in <code><img></code> wordt gecachet maar kan niet vanuit de pagina worden gestyled.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Veelgestelde vragen</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Wordt mijn SVG naar een server geüpload?</summary> <div class="prose px-5 pb-5"><p>Nee. SVGO draait in je browser. Het enige wat wordt gedownload, is de code van de optimalisator zelf, de eerste keer dat je optimaliseert.</p></div> </details> <details class="faq group"> <summary>Waarom wordt het voorbeeld als afbeeldingen getoond?</summary> <div class="prose px-5 pb-5"><p>SVG is een documentformaat dat JavaScript kan bevatten en externe bestanden kan laden. Beide voorbeelden worden als <code><img></code> weergegeven vanaf lokale blob-URL’s, en in die modus voeren browsers nooit scripts uit en halen ze geen externe bronnen op, dus een onbetrouwbare SVG hier bekijken is veilig. De geoptimaliseerde code zelf bevat nog wel eventuele scripts, tenzij <strong>Scripts en eventattributen verwijderen</strong> aan staat (dat is zo bij <strong>Maximaal</strong>).</p></div> </details> <details class="faq group"> <summary>Mijn geoptimaliseerde SVG schaalt niet meer. Wat is er gebeurd?</summary> <div class="prose px-5 pb-5"><p>De viewBox is waarschijnlijk verwijderd, door <strong>viewBox verwijderen</strong> of eerder door een andere tool. Optimaliseer het origineel opnieuw met die plug-in uit.</p></div> </details> <details class="faq group"> <summary>Waarom werkt mijn pictogramsprite of animatie niet meer?</summary> <div class="prose px-5 pb-5"><p><strong>ID’s inkorten en ongebruikte ID’s verwijderen</strong> of <strong>Paden samenvoegen</strong> heeft de elementen veranderd waarnaar je code verwijst. Gebruik de voorinstelling <strong>Veilig</strong>, die beide behoudt.</p></div> </details> <details class="faq group"> <summary>Het geoptimaliseerde bestand is niet kleiner. Hoe kan dat?</summary> <div class="prose px-5 pb-5"><p>De SVG is waarschijnlijk al geminificeerd. Probeer <strong>Maximaal</strong> of een lagere <strong>Decimale precisie</strong>, en zet <strong>Netjes opmaken (ingesprongen uitvoer)</strong> uit.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Vergelijkbare tools</h2> <ul class="card-grid mt-4"><li><a class="card" href="/nl/svg-naar-png/"> <span class="card-title">SVG naar PNG</span> <span class="card-text">Zet SVG om naar PNG, JPG of WebP in je browser, in elke breedte, hoogte, schaal of DPI, met transparante of gekleurde achtergrond. Ook als ZIP, zonder upload.</span> </a></li> <li><a class="card" href="/nl/afbeelding-naar-svg/"> <span class="card-title">Afbeelding naar SVG vectoriseren</span> <span class="card-text">Zet een PNG- of JPG-logo of tekening om in SVG-vectorpaden in je browser. Voorinstellingen, aantal kleuren, stipjesfilter en veilig voorbeeld, zonder upload.</span> </a></li> <li><a class="card" href="/nl/afbeelding-comprimeren/"> <span class="card-title">Afbeelding comprimeren</span> <span class="card-text">Comprimeer JPG-, PNG- en WebP-afbeeldingen met een kwaliteitsregelaar, vergelijk de grootte voor en na en verwerk foto's in batch zonder ze te uploaden.</span> </a></li> <li><a class="card" href="/nl/css-formatter/"> <span class="card-title">CSS formatteren en minifyen</span> <span class="card-text">Maak rommelige CSS netjes met consistente inspringing of minify hem met csso, en zie de grootte voor en na. Werkt in je browser; er wordt niets geüpload.</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="Advertentie"><span class="ad-label">Advertentie</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">Gratis online tools die in je browser werken. Je gegevens blijven op je apparaat.</p> </div> <nav aria-label="Categorieën"> <p class="font-semibold">Tools</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/nl/teksttools/">Teksttools</a></li><li><a class="link-muted" href="/nl/developer-tools/">Developertools</a></li><li><a class="link-muted" href="/nl/web-seo-marketing/">Web, SEO en marketing</a></li><li><a class="link-muted" href="/nl/kleuren-design/">Kleuren en design</a></li><li><a class="link-muted" href="/nl/afbeeldingen-bewerken/">Afbeeldingen bewerken</a></li><li><a class="link-muted" href="/nl/pdf-documenten/">PDF en documenten</a></li><li><a class="link-muted" href="/nl/rekenen-wiskunde/">Rekenen en wiskunde</a></li><li><a class="link-muted" href="/nl/financiele-calculators/">Financiële calculators</a></li><li><a class="link-muted" href="/nl/datum-tijd/">Datum en tijd</a></li><li><a class="link-muted" href="/nl/eenheden-omrekenen/">Eenheden omrekenen</a></li><li><a class="link-muted" href="/nl/gezondheid-fitness/">Gezondheid en fitness</a></li><li><a class="link-muted" href="/nl/huis-klussen-keuken-auto/">Huis, klussen, keuken en auto</a></li><li><a class="link-muted" href="/nl/generators/">Generators</a></li><li><a class="link-muted" href="/nl/apparaat-browsertests/">Apparaat- en browsertests</a></li><li><a class="link-muted" href="/nl/audio-video/">Audio en video</a></li><li><a class="link-muted" href="/nl/onderwijs-talen/">Onderwijs en talen</a></li><li><a class="link-muted" href="/nl/spelletjes/">Spelletjes</a></li></ul> </nav> <nav aria-label="Informatie"> <p class="font-semibold">Informatie</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/nl/over-ons/">Over ons</a></li> <li><a class="link-muted" href="/nl/contact/">Contact</a></li> <li><a class="link-muted" href="/nl/privacybeleid/">Privacybeleid</a></li> <li><a class="link-muted" href="/nl/gebruiksvoorwaarden/">Gebruiksvoorwaarden</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>