SVG online bewerken: kleur en achtergrond aanpassen zonder software

1. Wat de online SVG-editor kan

Veel mensen denken bij het bewerken van een SVG als eerste aan het installeren van Illustrator, maar voor lichte behoeften als een kleur aanpassen, een achtergrond verwijderen of elementen wissen is een online editor ruim voldoende. De online SVG-editor van PolySVG draait in de browser, is gratis, vraagt geen installatie of registratie en werkt op padniveau: aanklikken en verwijderen, de achtergrond in één klik weg, bijtekenen met het penseel, wissen met een gummasker, kleuren aanpassen, ongedaan maken en opnieuw, en ten slotte exporteren naar SVG of PNG. Je kunt een SVG rechtstreeks uploaden of in één klik het resultaat van de afbeelding naar SVG-tool meenemen. Voor designers is hij handig als laatste schoonmaak voor de oplevering; voor developers om snel de kleur en maat van een pictogram aan te passen voordat het in een pagina verwerkt wordt.

2. Kleur aanpassen: geef een pictogram de themakleur

Klik op een kleurvlak in het werkvlak om het bijbehorende pad te selecteren en wissel daarna de vulkleur in het kleurenpalet. Typische situaties: dezelfde pictogrammenset wisselen tussen een licht en een donker thema, een gevectoriseerd logo afstellen op de merkleur, of de kleuren van materiaal uit verschillende bronnen gelijk trekken. Vergeleken met het zoeken naar de fill-eigenschap in de code is aanklikken en aanpassen veel intuïtiever en je komt minder snel andere paden per ongeluk mee.

3. Achtergrond verwijderen: automatisch plus handmatig aanklikken

Klik op "Achtergrond in één klik verwijderen": de engine herkent de dominante randkleur en schrapt de achtergrondlaag, waardoor een SVG op witte achtergrond meteen transparant is. Overgebleven achtergrondpaden selecteer je met de muis en verwijder je. Is je materiaal nog een bitmap, gebruik dan direct de tool voor het verwijderen van de achtergrond met conversie naar vectoor, waarmee conversie en achtergrondverwijdering in één keer gebeuren, en ga daarna naar de editor voor de fijne afwerking.

4. Penseel en gum: bijtekenen en wissen

Het penseel is optelend: je tekent ontbrekende streken bij, waarbij de streek automatisch tot een nieuw pad wordt gevectoriseerd en met de oorspronkelijke tekening samenvalt; ideaal om gebroken streken na het vectoriseren van een logo te herstellen. De gum is aftrekkend: hij wist een deel met een masker, zonder de oorspronkelijke paddata te vernietigen, en wat je te veel hebt gewist kun je altijd ongedaan maken. Beide tools werken samen met ongedaan maken en opnieuw, dus je kunt rustig experimenteren. De streek van het penseel komt als zelfstandig pad in het bestand en kan later dus ook aangeklikt en van kleur voorzien worden; het maskeffect van de gum wordt bij het exporteren meegenomen, zodat de geëxporteerde SVG overeenkomt met wat je op het werkvlak ziet.

5. Ongedaan maken, opnieuw en exporteren

De editor bewaart de volledige geschiedenis van bewerkingen: fout? Maak ongedaan. Bedacht? Doe opnieuw. Klaar? Exporteer SVG voor het web of om verder te bewerken, of exporteer PNG om in documenten te plaatsen of als voorbeeldafbeelding te gebruiken. Wil je weten hoe je SVG-bestanden opent en bekijkt, zie dan Hoe open je een SVG-bestand; de directe ingang van de editor is /editor. Kies bij het exporteren van PNG een voldoende hoge resolutie, anders wordt de afbeelding in een document wazig; voor het web exporteer je bij voorkeur SVG, zodat het vectorkarakter behouden blijft.

6. Snel overzicht van de meest voorkomende bewerkingen

• Pictogram in de themakleur: klik het pad aan en pas de vulling aan; exporteer een versie voor het lichte en een voor het donkere thema;
• Materiaal op witte achtergrond transparant maken: achtergrond in één klik weg, overgebleven paden aanklikken en verwijderen, transparante SVG exporteren;
• Gebroken streken in een logo herstellen: teken langs de breuk bij, laat de streek vectoriseren en pas de kleuren daarna gezamenlijk aan;
• Overbodige elementen verwijderen: klik de kleurvlakken die je niet nodig hebt een voor een weg en gebruik de gum voor de randdetails;
• Afbeelding voor een document: exporteer na het bewerken een PNG en zet die in Word, PowerPoint of een chatgesprek.