SVG-optimalisatie

Over deze tool

SVG-bestanden (Scalable Vector Graphics) beschrijven vormen, paden en tekst met XML-markup. Designtools, CMS-exporten en handmatig gecodeerde iconen bevatten vaak veel meer data dan de browser nodig heeft om hetzelfde beeld te renderen. SVG-optimalisatie verwijdert overtollige markup — opmerkingen, editor-metadata, redundante groepen, onnodige coördinaatprecisie en ongebruikte attributen — terwijl de visuele output op normale weergavegroottes identiek blijft. In tegenstelling tot rasterformaten zoals PNG of JPEG blijft SVG na compressie bewerkbaar en resolutie-onafhankelijk. Een goed geoptimaliseerd icoon kan van 40 KB naar 6 KB krimpen zonder zichtbaar verlies. Optimalisatie is essentieel voor logo's, interface-iconen, illustraties en favicons die bij elk paginabezoek laden. Kleinere bestanden betekenen snellere paginalading, minder mobiel dataverbruik en betere Core Web Vitals-scores. Zoekmachines belonen snelle pagina's; gebruikers merken het wanneer iconen laat verschijnen of rendering blokkeren. Geoptimaliseerde SVG's embedden schoner in HTML, React-componenten en e-mailsjablonen waar opgeblazen markup parsers kan breken of bundles vergroot. Productiewebsites refereren SVG-iconen in CSS-achtergronden, inline <svg>-tags of img-elementen. Elke kilobyte draagt bij aan het kritieke renderpad, vooral wanneer meerdere iconen above the fold staan. Whitespace verwijderen, transforms samenvouwen en doctype-declaraties strippen verkleint de transfer zonder CSS of JavaScript aan te raken. Bij SVG-favicons met link rel="icon" type="image/svg+xml" cachen browsers agressief — een slank bestand werkt sneller bij een rebrand. React-projecten importeren SVG's vaak als componenten of URL's. Opgeblazen bronbestanden verhogen de parse-tijd van JavaScript-bundles wanneer loaders ze inline als strings plaatsen. Voer iconen door een optimalisator voordat u ze aan uw componentbibliotheek toevoegt, zodat tree-shaking en code splitting effectief blijven. Controleer bij geoptimaliseerde markup in een .svg-bestand of SVGR-pipeline dat viewBox-waarden behouden blijven — React-apps vertrouwen op viewBox voor responsieve schaling. Moderne browsers ondersteunen SVG-favicons gekoppeld vanuit de document head. Ze schalen scherp op Retina-tabs en vastgezette snelkoppelingen, mits het bestand klein en geldig is. SVG-favicons moeten vierkant zijn, een eenvpalet gebruiken en geen externe referenties of scripts bevatten om veiligheidsredenen. Converteer na optimalisatie naar ICO of PNG voor oudere Windows-shells of sociale crawlers die raster verwachten. Een geoptimaliseerd SVG-favicon is een uitstekend masterbestand voor de volledige favicon-workflow. Ontwerpers exporteren SVG vaak met ingesloten rasterafbeeldingen, overmatige decimale precisie in paden, dubbele overlappende vormen en style-blokken die vereenvoudigde attributen kunnen zijn. Illustrator voegt soms benoemde lagen toe als group-elementen; Figma-exporten bevatten xmlns-attributen en breukcoördinaten met zes decimalen. Vergeten width en height zonder viewBox breken responsieve layouts. Verborgen lagen en actieve clipping masks exporteren onzichtbare geometrie die nog steeds meetelt voor bestandsgrootte. Gebruik in Figma Kopieer als SVG of exporteer met Outline stroke wanneer iconen strokes gebruiken die slecht converteren. Figma-bestanden bevatten vaak fill-rule en transform-matrices op elke groep; optimalisatie vouwt aangrenzende paden samen waar veilig. Kies in Illustrator SVG-export met Minify of Responsive, schakel onnodige font-embedding uit en expand appearances vóór export. Plak na export de markup in deze browsergebaseerde optimalisator. Verwerking gebeurt lokaal — uw merkassets worden nooit naar een server geüpload. Download het schone bestand of kopieer het resultaat direct naar uw repo, CMS of favicon-generatorpipeline. Combineer de output met onze SVG naar ICO-converter, SVG naar PNG-converter of Favicon Generator wanneer u multi-size pakketten nodig heeft voor productielancering.

Veelgestelde vragen