SVG-optimalisatie
Ruim vectoropmaak op voordat deze in een component, pictogrammenset of statische activabundel terechtkomt.
Optimalisatie-instellingen
Een lagere nauwkeurigheid kan het bestand verder verkleinen, maar agressieve afronding kan paden vervormen. Een waarde van 2 of 3 is een goede standaard.
Hoe SVG-optimalisatie werkt
Verwijder niet-renderende gegevens
Ontwerpexports bevatten vaak metadata, opmerkingen, naamruimten van de editor en onzichtbare markup die bytes toevoegen zonder de gerenderde afbeelding te wijzigen.
Verminder de padprecisie
Coördinaten zoals 10,5432109 kunnen vaak worden afgerond op 10,54 zonder zichtbaar verschil, vooral voor pictogrammen die in kleine formaten worden weergegeven.
Inspecteer vóór publicatie
Optimalisatie moet ervoor zorgen dat viewBox, vullingen, lijnen, ARIA-labels en belangrijke ID's intact blijven als ze de weergave, stijl, animatie of toegankelijkheid beïnvloeden.
Veelgestelde vragen
Zal de geoptimaliseerde SVG er wazig uitzien?
Nee. SVG is vectorgebaseerd, dus bij optimalisatie wordt de markup opgeschoond in plaats van de afbeelding te rasteren. Het enige risico is dat padwaarden te agressief worden afgerond.
Waarom kan een geoptimaliseerde SVG soms groter worden?
Als het originele bestand al stevig is gecomprimeerd of met de hand is geoptimaliseerd, valt er mogelijk weinig meer te verwijderen. In die gevallen kan de uitvoer ongeveer even groot zijn, of soms iets groter.
Ondersteunt dit batchoptimalisatie?
Deze pagina is ontworpen voor inspectie en afstemming van één bestand. Gebruik voor batchoptimalisatie een buildstep-tool zoals SVGO in uw pijplijn.
Kan de SVG-optimalisatie animaties of stijl verbreken?
Ja, als een optimalisatieprogramma ID's, klassen, metagegevens of precisie verwijdert waar uw CSS of JavaScript op vertrouwt. Bekijk een voorbeeld van het resultaat en behoud belangrijke kenmerken wanneer de SVG interactief is.
Moeten decoratieve SVG's toegankelijkheidslabels bevatten?
Decoratieve SVG's kunnen meestal verborgen worden voor ondersteunende technologie. Informatieve pictogrammen en illustraties moeten betekenisvolle titels, labels of omringende tekst bevatten.