Skip to content
VECTOSOLVE
Technical

SVG-optimalisatie voor Ontwikkelaars: SVGO, Build Pipelines & CI/CD-integratie

Developer-gerichte SVG-optimalisatie: SVGO configureren, integreren in webpack/Vite build pipelines, automatiseren met CI/CD en de impact op Core Web Vitals meten.

Robin Monteiro28 januari 202610 oktober 202615 min leestijd
Use this article with an AI assistant:
.md
SVG-optimalisatie voor Ontwikkelaars: SVGO, Build Pipelines & CI/CD-integratie
R
Robin Monteiro

Founder of VectoSolve

Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.

How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author

Image vectorizationCutting machine filesEmbroidery filesSVG
Free previewNo signupFull-quality output

Key Takeaways

  • SVGO met een afgestemde svgo.config.js verkleint SVG-bestanden met 60-85% zonder visueel verlies
  • Padvereenvoudiging (decimale precisie + overbodige nodes) is de optimalisatie met de grootste impact
  • Agressieve optimalisatie breekt CSS-animaties en currentColor — test altijd na SVGO
  • Gzip scheelt nog 70-80%; Brotli perst er 5-8% extra uit
  • Lazy loading met Intersection Observer elimineert off-screen renderkosten
  • Build pipeline-integratie (Vite, webpack, Next.js) maakt optimalisatie onzichtbaar voor je team

SVG-bestanden zijn de ruggengraat van moderne webgraphics — schaalbaar, styleerbaar, animeerbaar en doorgaans kleiner dan rasteralternatieven. Maar een slecht geoptimaliseerd SVG uit Figma of Illustrator kan groter zijn dan een PNG en je Core Web Vitals kelderen.

Ik heb acht jaar SVG's in productie geleverd. Dit is de handleiding die ik op dag één had willen hebben.

SVG-optimalisatie workflow van export tot productie
De complete SVG-optimalisatie pipeline: export, opschonen, optimaliseren, comprimeren, leveren

Waarom SVG-optimalisatie een post in het performancebudget is

Een niet-geoptimaliseerd SVG kan editor-metadata bevatten, overbodige paden met 12-decimalen precisie, herhaalde inline styles, ongebruikte gradient/filter-definities en XML-ballast zoals xml:space. Een echte audit: een hero-illustratie van 52KB daalde naar 7,8KB na optimalisatie — 85% reductie.

Core Web Vitals impact: SVG-optimalisatie verbetert direct LCP voor above-fold SVG's en verlaagt TBT door DOM-nodes te verminderen. Google's Page Experience update weegt LCP zwaar — 40KB van een hero SVG verwijderen kan LCP met 200-400ms verbeteren op 3G.

SVGO Configuratie Stap voor Stap

SVGO is de industriestandaard optimizer. Standaardinstellingen laten performance liggen.

CLI vs Node API

bash 
npx svgo input.svg -o output.svg --config svgo.config.js
npx svgo -f ./src/icons -o ./dist/icons --config svgo.config.js
javascript 
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';
const result = optimize(readFileSync('icon.svg', 'utf8'), {
  multipass: true,
  plugins: ['preset-default', 'removeDimensions', { name: 'removeAttrs', params: { attrs: '(data-.*|class)' } }],
});
writeFileSync('icon.opt.svg', result.data);

Productie svgo.config.js

javascript 
module.exports = {
  multipass: true,
  plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false, convertPathData: { floatPrecision: 2, transformPrecision: 3 }, mergePaths: { force: true } } } }, 'removeDimensions', 'sortAttrs', { name: 'removeAttrs', params: { attrs: ['xml:space', 'data-name'] } }],
};

Pro Tip: svgo.config.js best practices: Altijd removeViewBox: false — verwijderen breekt responsive scaling. floatPrecision: 2 voor iconen, 3 voor illustraties. multipass: true activeren. Config committen in de repo.

Voor/Na: Metadata en editor-ballast verwijderen

xml 
<!-- VOOR: 680 bytes verspilling -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
  <!-- Generator: Adobe Illustrator 28.0 -->
  <metadata><rdf:RDF><rdf:Description/></rdf:RDF></metadata>
  <defs><linearGradient id="unused_grad">...</linearGradient></defs>
xml 
<!-- NA: schoon, productie-klaar -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
Padnode-reductie voor en na
48 controlepunten gereduceerd naar 19 — visueel identiek

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Padvereenvoudiging: Nodes verminderen zonder visueel verlies

xml 
<!-- VOOR: 12-decimalen precisie -->
<path d="M10.123456789012 20.987654321098 C15.111111111111 25.222222222222 30.333333333333 40.444444444444 45.555555555555 50.666666666666"/>
<!-- NA: 2-decimalen precisie, visueel identiek -->
<path d="M10.12 20.99C15.11 25.22 30.33 40.44 45.56 50.67"/>

Visueel verschil? Nul. Bytebesparing? 58%.

Vergelijking optimalisatietechnieken

TechniekReductieRisicoWanneer gebruiken
Metadata & comments verwijderen5-15%GeenAltijd
Decimale precisie verlagen (2-3)15-30%LaagIconen, UI, logo's
Paden samenvoegen & vereenvoudigen10-25%MediumNa visuele QA
Ongebruikte defs & symbolen verwijderen5-20%LaagAltijd
Groepen & containers samenvouwen3-8%LaagAls CSS niet op groepen mikt
Inline styles naar attributen2-10%LaagVoor inline SVG's
Gzip (server)70-80%GeenAltijd
Brotli (server)75-85%GeenAls CDN het ondersteunt

CSS in SVG: Inline vs extern

xml 
<path style="fill:#ff0000;stroke:#000;stroke-width:2" d="..."/>
<style>.a{fill:#f00;stroke:#000;stroke-width:2}</style>
<path class="a" d="..."/>
<path fill="#f00" stroke="#000" stroke-width="2" d="..."/>

Warning: Agressieve optimalisatie breekt animaties. Test altijd geoptimaliseerde SVG's in context als ze CSS-animaties, currentColor, JS-listeners of SMIL gebruiken.

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Gzip & Brotli compressiestatistieken

AssetRawSVGOGzipBrotli
Hero illustratie52KB7,8KB2,4KB2,1KB
Icon sprite (40 iconen)38KB11KB3,2KB2,8KB
Geanimeerd logo18KB9,2KB3,1KB2,7KB
Complexe infographic124KB34KB9,8KB8,6KB
"

Elk kilobyte dat je verzendt is een kilobyte dat de browser van je gebruiker moet downloaden, parsen en renderen. Geoptimaliseerde SVG's zijn geen nice-to-have — het is een post in het performancebudget.

— Addy Osmani

Lazy Loading van SVG-zware pagina's

javascript 
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); }
  });
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src$=".svg"]').forEach(img => observer.observe(img));
Ontwikkelaar integreert SVG's in build pipeline
SVGO draait automatisch bij elke commit

Build Pipeline Integratie: Webpack, Vite, Next.js

Vite

javascript 
import svgLoader from 'vite-svg-loader';
export default defineConfig({ plugins: [svgLoader({ svgoConfig: { multipass: true, plugins: ['preset-default', 'removeDimensions'] } })] });

Webpack

javascript 
{ test: /\.svg$/, use: [{ loader: 'svg-url-loader', options: { limit: 8192 } }, { loader: 'svgo-loader', options: { configFile: './svgo.config.js' } }] }

Next.js

javascript 
config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack', { loader: 'svgo-loader', options: { configFile: './svgo.config.js' } }] });

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

De complete optimalisatie-checklist

  1. Exporteer schoon vanuit je designtool
  2. Draai SVGO met een gecommitte config — of optimaliseer met VectoSolve
  3. Verifieer visueel — vergelijk voor/na, vooral animaties
  4. Activeer compressie — minimaal Gzip, Brotli als CDN het ondersteunt
  5. Lazy load below-fold SVG's met Intersection Observer
  6. Automatiseer in CI — SVGO in je pipeline

Rasterafbeeldingen naar geoptimaliseerd SVG converteren? VectoSolve doet vectorisatie en optimalisatie in één stap. Of gebruik de SVG Editor voor gedetailleerde controle.

OptimalisatietechniekTypische reductieRisiconiveau
SVGO met afgestemde config60–85%Laag (met tests)
Decimale precisie reductie (8 → 2)20–40%Laag voor eenvoudige graphics
Editor metadata verwijderen10–30%Geen
Padvereenvoudiging15–50%Medium
Brotli compressie (server)75–90%Geen (lossless)

Bronnen & verder lezen

Tags:
svg
optimalisatie
web-performance
frontend
tutorial
Share:

Try VectoSolve Now

Convert your images to high-quality SVG vectors with AI

Related articles

Technical

Hoe we de laadtijd met 70% verlaagden met SVG-optimalisatie: een echte casestudy

6 min
Technical

Gids voor webontwikkelaars: Best practices voor SVG-integratie

12 min
Technical

Drukklare vectoren maken: van scherm naar professionele druk

9 min

Related Conversion Tools

Free Tool

PNG to SVG Converter

Convert PNG images to scalable SVG vectors

Try free
Free Tool

JPG to SVG Converter

Convert JPG images to scalable SVG vectors

Try free
Free Tool

JPEG to SVG Converter

Convert JPEG images to scalable SVG vectors

Try free

Explore related tools

PNG to SVG ConverterJPG to SVG ConverterImage VectorizerBackground RemoverImage UpscalerAI Logo GeneratorSVG AnimatorHalftone Generator
AI-Powered Vectorization

Ready to vectorize your images?

Convert your PNG, JPG, and other images to high-quality, scalable SVG vectors in seconds.