Een SVG optimaliseren en het bestand kleiner maken
Op deze pagina
Kort antwoord: open de SVG-optimalisatie van Imgovo, voeg je SVG toe (tot 3 MB), laat Opmerkingen en editorgegevens verwijderen ingeschakeld, rond eventueel de getallen af en vergelijk het voorbeeld met het origineel. Download daarna de SVG of kopieer de code. Het bestand wordt in je browser verwerkt en nooit geüpload.
Waarom SVG-bestanden groot worden
Een eenvoudig logo is maar een paar regels code. Maar tekenprogramma’s zoals Inkscape, Sketch of Illustrator voegen vaak veel meer toe: opmerkingen, editorinstellingen, lege groepen, lege attributen, ruime witruimte en coördinaten met veel decimalen. Niets daarvan verandert wat je ziet, maar het moet allemaal worden gedownload. Op een website met veel iconen loopt dat op. Kleinere bestanden helpen ook je pagina’s sneller te laden; zie Afbeeldingen optimaliseren voor je website voor het grotere plaatje.
Wat de optimalisatie doet
- Verwijdert opmerkingen en editorgegevens.
- Verwijdert lege groepen en lege attributen.
- Verwijdert onnodige witruimte.
- Kan lange getallen afronden op 3, 2 of 1 decimalen, of ze laten zoals ze zijn.
- Houdt desgewenst de titel en beschrijving, die schermlezers gebruiken.
- Behoudt de viewBox, vormen, kleurverlopen, uitknippaden, maskers en de id’s die andere delen van het bestand gebruiken.
Stap voor stap
- Open de SVG-optimalisatie en sleep een SVG-bestand op de pagina, klik om het te kiezen of plak het.
- Kies onder Getalnauwkeurigheid Getallen laten zoals ze zijn, 3 decimalen, 2 decimalen of 1 decimaal.
- Laat Opmerkingen en editorgegevens verwijderen aan staan. Vink Titel en beschrijving behouden aan als de tekening betekenisvolle inhoud is die schermlezers moeten voorlezen.
- Bekijk het onderdeel Resultaat. Het toont de grootte ervoor en erna en tekent het origineel en het resultaat naast elkaar.
- Lees de vergelijkingsregel. Imgovo tekent beide op dezelfde grootte en vertelt je hoeveel ze verschillen, pixel voor pixel.
- Klik op SVG downloaden, of op SVG-code kopiëren om hem in je pagina te plakken.
Moet ik de getallen afronden?
Begin zonder afronden: de tekening blijft hetzelfde en de editorgegevens worden toch verwijderd. Probeer daarna 3 decimalen, en 2 als het voorbeeld er nog goed uitziet. Afronden bespaart meer ruimte, maar kan dunne lijnen of kleine details enigszins veranderen. Meldt Imgovo een verschil dat je kunt zien, ga dan terug naar een hogere nauwkeurigheid.
Kleuren wijzigen zonder een bewerker te openen
Imgovo toont de effen kleuren die direct in vormen en stijlen zijn geschreven. Kies voor een van die kleuren een nieuwe kleur en elk gebruik van precies die kleur wordt vervangen. Handig om één icoon in meerdere huiskleuren te maken.
Kleurverlopen, kleuren die door stijlbladen zijn ingesteld en het woord currentColor blijven ongemoeid. De pixelvergelijking wordt overgeslagen als je kleuren wijzigt, omdat het resultaat dan hoort te verschillen.
Tekst in een SVG
Tekst wordt met een lettertype getekend. Heeft het apparaat van de kijker dat lettertype niet, dan wordt een ander gebruikt en verandert de tekening. Imgovo toont een waarschuwing als het bestand tekst bevat. Tekst in je tekenprogramma omzetten naar contouren voorkomt het probleem.
Wat om veiligheidsredenen wordt verwijderd
Een SVG kan scripts, ingesloten webpagina’s, animaties die links kunnen veranderen, links naar andere sites en gebeurtenishandlers bevatten. Imgovo verwijdert deze en een melding onder het bestand vertelt hoeveel onderdelen zijn verwijderd. Dit is een aparte stap los van het kleiner maken van het bestand.
Na het optimaliseren
- Om de SVG om te zetten in een pixelafbeelding gebruik je de SVG-omzetter.
- Om hem als websiteicoon te gebruiken voeg je hem toe aan de Favicon-generator, die een
favicon.svgkan bevatten. - Bewaar altijd je originele bestand. De editorgegevens krijg je niet terug uit de geoptimaliseerde kopie.
Privacy
De SVG wordt in je browser gelezen en herschreven. Er wordt niets geüpload.
Probeer het nu
Open de SVG-optimalisatie, voeg een SVG toe die uit je tekenprogramma is geëxporteerd en kijk hoeveel kleiner hij wordt.
Veelgestelde vragen
Wat verandert de SVG-optimalisatie?
Hij verwijdert opmerkingen en editorgegevens (bijvoorbeeld van Inkscape of Sketch), lege groepen, lege attributen en onnodige witruimte en kan lange getallen afronden op 1, 2 of 3 decimalen. Hij behoudt de viewBox, vormen, kleurverlopen, uitknippaden, maskers en de id’s die andere delen gebruiken.
Ziet mijn tekening er daarna anders uit?
Zonder afronden zou het er hetzelfde uit moeten zien. Imgovo tekent het origineel en het resultaat op dezelfde grootte, vergelijkt ze pixel voor pixel en vertelt je hoeveel ze verschillen. Afronden op minder decimalen kan dunne lijnen of kleine details enigszins veranderen, dus controleer het voorbeeld.
Hoeveel kleiner wordt het bestand?
Het hangt af van het bestand. Tekeningen die uit bewerkers zijn geëxporteerd, worden door de editorgegevens vaak sterk kleiner; bestanden die al compact zijn, veranderen weinig. Het resultaat toont de echte grootte ervoor en erna.
Hoe werkt het wijzigen van kleuren?
Imgovo toont de effen kleuren die direct in vormen en stijlen zijn geschreven. Kies voor een van die kleuren een nieuwe kleur en elk gebruik van precies die kleur wordt vervangen. Kleurverlopen, kleuren die door stijlbladen zijn ingesteld en het woord currentColor blijven ongemoeid.
Wat wordt om veiligheidsredenen verwijderd?
Scripts, ingesloten webpagina’s, animaties die links kunnen veranderen, links naar andere sites en gebeurtenishandlers worden verwijderd. De melding onder het bestand vertelt hoeveel onderdelen zijn verwijderd. Dit staat los van het kleiner maken van het bestand.
Wordt mijn SVG geüpload?
Nee. De SVG wordt in je browser gelezen en herschreven en er verlaat niets je apparaat.