SVG-kleuren wijzigen

Over het wijzigen van kleuren in een SVG

Een SVG is tekst. Ergens daarin zegt een vorm fill="#1f2937", en dat is de hele reden dat het pictogram donkergrijs is. Wijzig die zeven tekens en het pictogram is wat u maar wilt.

Het lastige is ze vinden. Een echte export uit Illustrator of Figma zet zijn kleuren niet op één voor de hand liggende plek — hij verspreidt ze over fill-attributen, style-attributen, een <style>-blok vol klasseregels en de stops in een verloop. Open het bestand in een teksteditor en u zoekt in duizend regels naar de elf die ertoe doen.

Deze tool leest het hele bestand, verzamelt elke gebruikte kleur en zet ze in een tabel. Wijzig de kleur rechts in een rij en elke vorm die hem gebruikt verandert mee, in de bewerkte voorvertoning, terwijl u kiest. Wat u terugkrijgt is uw bestand met nieuwe kleurwaarden — verder is er niets aangeraakt.

Twee manieren om een kleur te wijzigen

• Per kleur — de tabel onder de afbeeldingen toont elke afzonderlijke kleur in het bestand: links wat hij is, rechts wat hij wordt. Elke rij begint bij zijn eigen origineel, dus er verandert niets tot u het zegt. Wijzig er één en al zijn toepassingen veranderen samen. Dit wilt u voor "maak de blauwe delen groen" en voor het verkleuren van een pictogram naar een merkpalet.
• Per vorm — klik op een willekeurige vorm in de afbeelding en kleur alleen die, ook als hij zijn kleur met twintig andere deelt. Zijn vulling en omlijning krijgen eigen waarden, en verder beweegt er niets.

De twee werken samen: zet eerst het palet, corrigeer daarna de ene vorm die anders moest zijn.

Alles in één kleur

Verreweg de meest voorkomende klus. Een pictogram komt binnen in vijf grijstinten en u hebt het nodig in vlak wit voor een donkere kop, in vlak zwart voor drukwerk, of in één merkkleur voor een rij knoppen.

Kies een kleur, druk op Toepassen, en elke kleur in het bestand wordt die ene. Vormen zonder vulling blijven zonder vulling, dus omlijningen blijven omlijningen en gaten blijven gaten.

Waar het naar kleuren zoekt

• fill en stroke geschreven als attribuut
• Dezelfde eigenschappen binnen een style-attribuut
• <style>-blokken — klasseregels als .cls-1 { fill: #231f20; }, zoals Illustrator vrijwel elke export schrijft
• stop-color in verlopen, zodat een verloop stop voor stop verkleurd kan worden
• flood-color en lighting-color op filters

Kleuren geschreven op elke manier die CSS toestaat worden begrepen — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) en namen als red of darkslategray. Doorzichtigheid blijft behouden: een half doorzichtige vorm blijft half doorzichtig in zijn nieuwe kleur.

Waar het niet aankomt

• Verlopen en patronen als zodanig. De stops in een verloop kunnen verkleurd worden; het verloop zelf wordt niet in een vlakke kleur veranderd, en een vorm gevuld met url(#pattern) blijft met rust.
• Ingesloten bitmaps. Een PNG die in een SVG is geplakt is een foto, geen vorm, en heeft geen vulling om te wijzigen. Gebruik daarvoor Kleur uit afbeelding kiezen of een fotobewerker.
• Alles wat geen kleur is. Dekking, lijndikte, transformaties en tekst komen eruit zoals ze erin gingen.

Er wordt niets geüpload

Het bestand wordt in uw browser gelezen, verkleurd en herschreven. Het bereikt nooit een server, wat telt als het bestand een nog niet uitgebracht logo is, het merk van een klant of werk onder geheimhouding.

Het betekent ook: geen wachttijd voor uploaden, geen groottelimiet, en de tool blijft offline werken zodra de pagina is geladen.

Eén bewuste uitzondering op "er wordt niets gewijzigd": bevat het bestand een <script>-blok, dan wordt dat verwijderd en zegt de pagina het erbij. Een afbeelding heeft geen reden om uitvoerbare code mee te dragen, en deze tool moet het bestand tekenen om het u te laten zien.

Waarvoor mensen het gebruiken

• Een pictogrammenset naar een merkpalet verkleuren zonder een ontwerpprogramma te openen
• Een logo vlak wit maken voor een donkere kop, of vlak zwart voor drukwerk
• De ene vorm herstellen die in de verkeerde kleur uitkwam
• Lichte en donkere versies van dezelfde afbeelding maken
• De stops van een verloop wijzigen zonder het verloop opnieuw te bouwen
• Snel kleuren uitproberen, omdat de afbeelding meeverandert terwijl u kiest

Goed om te weten

• De twee voorvertoningen zijn het bestand vóór en na, op dezelfde schaal getekend — en de bewerkte is het echte document, dus wat u ziet is precies wat er wordt gedownload
• Een wijziging per vorm wordt geschreven als een gewoon fill- of stroke-attribuut waar dat volstaat, en alleen als inline style wanneer een <style>-regel in het bestand het anders zou overrulen — de tool controleert wat er echt gebeurde in plaats van te gokken
• Kleuren worden op waarde gegroepeerd, dus #FFF, #ffffff en white zijn één rij
• Elke rij heeft zijn eigen ongedaan maken, en Alle kleuren terugzetten brengt het hele bestand terug zoals het aankwam
• Een bestand met honderden kleuren is vrijwel altijd een overgetrokken foto; alleen de meest gebruikte worden getoond
• Om de lege ruimte rond het resultaat weg te halen, gebruikt u SVG bijsnijden
• Om het resultaat in een PNG te veranderen, gebruikt u SVG naar PNG

Zo gebruikt u het

• Klik op Klik om te uploaden, of sleep uw SVG op het vak
• Elke kleur in het bestand verschijnt als een rij in de tabel, het origineel links
• Stel rechts de kleur in — met de kiezer of door een hexwaarde te typen — om hem overal te wijzigen waar hij gebruikt wordt
• Of klik op een vorm in de bewerkte afbeelding om alleen die te kleuren
• Gebruik Alles in één kleur voor een vlakke eenkleurige versie
• Druk op SVG downloaden, of op SVG-code kopiëren om hem direct in een pagina te plakken

Verwante tools

• SVG bijsnijden — de lege ruimte rond het resultaat weghalen
• SVG naar PNG — de verkleurde SVG omzetten naar een bitmap
• SVG naar JPG — een SVG als platte afbeelding
• Afbeelding naar SVG — eerst een logo overtrekken tot vectorpaden
• Kleurenpalet uit afbeelding — een palet uit een foto halen
• Kleurcontrast controleren — nagaan of de gekozen kleuren leesbaar zijn