SVG Optimizer

De structuur van SVG-bestanden en overbodige code

Scalable Vector Graphics (SVG) zijn XML-gebaseerde vectorafbeeldingen die direct in de browser worden gerenderd. Omdat SVG een tekstformaat is, bevat een bestand vaak veel elementen die niet direct bijdragen aan de visuele weergave van de afbeelding. Grafische software zoals Adobe Illustrator, Inkscape of Figma voegt bij het exporteren metadata, editor-namespaces, opmerkingen en specifieke editor-instellingen toe.

Wanneer een SVG op een website wordt geplaatst, zijn deze extra gegevens overbodig. De browser heeft enkel de geometrische vormen, paden en stijlinformatie nodig om de afbeelding correct te tonen. Door deze onnodige ballast te verwijderen, kan de bestandsgrootte aanzienlijk worden verkleind zonder dat de visuele kwaliteit van de afbeelding achteruitgaat.

Waarom SVG-optimalisatie belangrijk is voor webprestaties

De laadsnelheid van een website heeft een directe invloed op de gebruikerservaring en de vindbaarheid in zoekmachines. Grote afbeeldingen, inclusief niet-geoptimaliseerde SVG's, vertragen de laadtijd van pagina's. Dit is met name merkbaar op mobiele apparaten met tragere internetverbindingen.

Er is een belangrijk verschil tussen inline SVG en externe SVG-bestanden. Inline SVG-code wordt rechtstreeks in het HTML-document geplaatst. Dit voorkomt extra HTTP-verzoeken, maar vergroot wel de omvang van het HTML-bestand zelf. Als de inline SVG-code onnodige metadata of overtollige witruimte bevat, vertraagt dit het parseren van de HTML door de browser. Het optimaliseren van inline iconen en illustraties zorgt voor een compactere DOM-structuur en snellere rendering.

Veilige en verliesvrije opschoning van vectorafbeeldingen

Bij het optimaliseren van grafische bestanden wordt vaak onderscheid gemaakt tussen "lossy" (met kwaliteitsverlies) en "lossless" (verliesvrije) compressie. Deze tool past een veilige, verliesvrije methode toe om de code op te schonen. Dit betekent dat de visuele weergave van de vectorafbeelding exact gelijk blijft.

De optimizer voert de volgende specifieke bewerkingen uit om de code te verkleinen:

• Verwijderen van opmerkingen en metadata.
• Verwijderen van editor-namespaces en ongebruikte namespaces.
• Verwijderen van extra witruimte en overbodige spaties bij attributen.
• Inkorten van kleurcodes naar hun kortste equivalent (bijvoorbeeld een kortere hexadecimale waarde).

Om te garanderen dat de afbeelding in elke browser correct blijft schalen en functioneren, worden kritieke onderdelen intact gelaten. De tool vermijdt het herschrijven van paden, het hernoemen van ID's, het verwijderen van de viewBox en de afronding van numerieke precisie. Hierdoor blijven ook scripts of CSS-stijlen die gekoppeld zijn aan specifieke ID's in de SVG, correct werken.

Beveiliging en XML-entiteiten

SVG is gebaseerd op XML, wat specifieke beveiligingsrisico's met zich mee kan brengen bij het verwerken van bestanden. Een bekend risico is de aanwezigheid van documenttype-declaraties (DOCTYPE) of aangepaste XML-entiteiten (custom entities). Deze kunnen worden misbruikt voor XML External Entity (XXE) aanvallen of pogingen tot denial-of-service.

Om de veiligheid van het platform en de gebruiker te waarborgen, blokkeert deze tool SVG-bestanden die documenttype- of aangepaste entiteitsdeclaraties bevatten. Indien dergelijke declaraties in de code worden gedetecteerd, wordt de verwerking onmiddellijk gestopt om onveilige parsing te voorkomen.

Werking en foutmeldingen van de SVG Optimizer

De werking van de tool is volledig lokaal. Je SVG-code wordt geoptimaliseerd in je browser. Er wordt niets geüpload naar BroBroGo.

Wanneer je de tool gebruikt, gelden er enkele regels en limieten voor de invoer:

• Lege invoer: Als er geen code is ingevoerd en het optimalisatieproces wordt gestart, toont de tool de melding: "Plak eerst de SVG-code.".
• Geen SVG-element: Als de ingevoerde tekst geen geldig SVG-element bevat, verschijnt de foutmelding: "Geen <svg>-element gevonden.".
• Geblokkeerde entiteiten: Bij de aanwezigheid van een documenttype of aangepaste entiteit toont de tool: "Deze SVG gebruikt een documenttype of aangepaste entiteit. Verwijder deze voordat je optimaliseert.".
• Maximale grootte: De SVG moet onder een bepaalde karakterlimiet blijven. Als de invoer te groot is, verschijnt de melding: "Deze SVG is te groot voor deze tool. Houd het onder de {max} tekens.".
• Tijdslimiet: Het optimalisatieproces mag niet langer dan 15 seconden duren. Als deze limiet wordt overschreden, stopt het proces met de melding: "Dat duurde te lang en is gestopt — probeer een kleinere SVG.".
• Geen besparing: Als de SVG al volledig is geoptimaliseerd en de veilige opschoning geen verdere reductie oplevert, verschijnt de melding: "Geoptimaliseerd. Er is geen ruimte bespaard met de veilige opschoning.".

Na een succesvolle optimalisatie toont de interface de statistieken van de verwerking:

• Origineel: De grootte van de originele SVG in bytes.
• Resultaat: De grootte van de geoptimaliseerde SVG in bytes.
• Bespaard: De hoeveelheid bespaarde ruimte in bytes en als percentage.
• Resultaatmelding: De tool toont de bevestiging: "Geoptimaliseerd — {pct}% kleiner ({saved} bespaard).".

Als je de invoer wijzigt of wist tijdens een lopend optimalisatieproces, wordt het actieve proces direct afgebroken.

Veelgestelde vragen (FAQ)

Wat wordt er verwijderd?
Het verwijdert opmerkingen, metadata, editor-namespaces, extra witruimte bij attributen, ongebruikte namespaces en verkort kleurcodes. Het behoudt de viewBox, ID's, labels en geometrie.

Kan het elke SVG optimaliseren?
Het verwerkt normale inline SVG-code. SVG's met documenttype- of aangepaste entiteitsdeclaraties worden geblokkeerd omdat deze het parseren onveilig kunnen maken. Verwijder die declaraties en probeer het opnieuw.

Verandert dit hoe de afbeelding eruitziet?
De optimizer vermijdt het herschrijven van paden, het hernoemen van ID's, het verwijderen van de viewBox en afronding van precisie. Als je SVG afhankelijk is van opmerkingen of metadata voor een ontwerpproces, bewaar dan een kopie van het origineel.

Worden mijn bestanden opgeslagen op een server?
Nee, de verwerking gebeurt lokaal. Je SVG-code wordt geoptimaliseerd in je browser. Er wordt niets geüpload naar BroBroGo.