Hoe je SVG-bestanden importeert en bewerkt in Figma, Canva of WordPress?

Je hebt de SVG. Wat nu?

De meeste converters stoppen bij de knop Downloaden. Maar het bestand is nutteloos als het in de map Downloads blijft staan. Een ontwerper opent het in Figma om de huisstijl toe te passen. Een community manager zet het in Canva voor een post. Een webontwikkelaar zet het in WordPress voor het headerlogo. Het is deze volgende stap die bewijst dat PixelToPath in een echte workflow past, niet in een demo.

Een PixelToPath SVG is geen statische afbeelding. Het is een verzameling paden: elke vorm heeft een opvulling, mogelijk een omtreklijn. Het blauw van het logo veranderen in bordeauxrood, het pictogram isoleren, vergroten voor een 1080x1920 story: dit alles doe je in de tool die je al gebruikt, zonder terug te hoeven naar Illustrator.

Waarom Figma, Canva en WordPress van dit formaat houden

Zodra ze geïmporteerd zijn, zijn PNG en JPG bitmaps. Een PNG-logo herkleuren in Figma betekent een laag eroverheen leggen, niet de kleur van het pad veranderen. Canva zal geen kleurencirkels tonen. WordPress zal een zwaar bestand leveren, onscherp op Retina. De SVG lost alle drie de problemen in één keer op.

Concreet geeft een SVG van PixelToPath je:

• Bewerkbare paden: één kleur per vorm, aanpasbaar in Figma (Opvulling) of Canva (kleurencirkels)
• Een licht bestand, ver onder de limiet van 3 MB van Canva, en sneller te laden op een WordPress-site dan een PNG @2x
• Identieke scherpte als favicon, LinkedIn-banner of roll-up banner: één enkel bestand
• Een eindproduct dat je naar de klant kunt sturen: zij openen het in de tool die ze hebben, niet in Creative Cloud

Figma: de SVG importeren en kleuren wijzigen

Figma importeert een SVG als een groep vectoren, niet als een foto. Dat is het hele punt: elke vorm blijft een laag die je kunt herkleuren, verplaatsen of verbergen.

1. Download de .svg via PixelToPath en open je Figma-bestand.
2. Sleep het bestand vanuit de verkenner direct op het canvas. Variant: Bestand → Importeren, of Ctrl+Shift+K (Cmd+Shift+K op Mac) om de SVG te plaatsen.
3. De laag verschijnt als een groep. Dubbelklik om erin te gaan, of klik met de rechtermuisknop → Degroeperen (Shift+Ctrl+G / Shift+Cmd+G) als je de vormen één voor één wilt bewerken.
4. Selecteer een pad. In het rechterpaneel, sectie Opvulling (Fill), klik je op de kleurencirkel: hex, stalen, pipet. De hele vorm verandert, de randen blijven scherp.
5. Voor een monochroom logo, selecteer je alle vormen in de groep en pas je één kleur toe. Exporteer vervolgens als SVG, PNG of PDF vanuit de Export-sectie als het eindproduct niet langer vector is.

Als Figma een platte afbeelding toont in plaats van vectorlagen, bevatte het bestand een bitmap (een ingesloten PNG). Dit is niet het geval bij PixelToPath-exports in de Zwart-wit of Poster voorinstelling. Converteer het origineel opnieuw met een van deze twee modi, niet met Foto.

Canva: de SVG plaatsen en herkleuren

Canva accepteert SVG's in zowel Free als Pro. Herkleuren werkt wanneer het bestand eenvoudig is: effen vlakken, weinig knooppunten, geen gradiënten. Dit is precies wat PixelToPath produceert met Poster of Zwart-wit.

1. Open een ontwerp in Canva. Linkerpaneel → Uploads → Bestanden uploaden. Kies je .svg (minder dan 3 MB; een PixelToPath-export zit daar ver onder).
2. Zodra het bestand in je uploads staat, sleep je het naar de pagina. Wijzig de grootte met de handgrepen: de vector blijft scherp, ook in story- of A4-formaat.
3. Klik op de SVG. In de werkbalk verschijnen kleurencirkels, één per tint in het bestand. Klik op een cirkel, kies de nieuwe kleur: Canva past deze toe op alle vormen van die tint.
4. Als er geen kleurencirkels verschijnen, is de SVG te complex (gradiënten, te veel kleuren, paden van het type Foto). Ga terug naar PixelToPath, schakel over naar Poster of Zwart-wit, exporteer opnieuw, importeer opnieuw.

Canva raadt een SVG 1.1 profiel aan, vormen van dezelfde kleur gegroepeerd en geen textuur. De logo-voorinstellingen van PixelToPath respecteren deze beperkingen al. Het is niet nodig om via Illustrator te gaan om het bestand 'voor te bereiden'.

WordPress: SVG uploaden toestaan zonder een lek te openen

WordPress weigert SVG's standaard, en dat is geen gril. Een SVG is XML: het kan JavaScript, externe entiteiten, een XSS payload bevatten. Een bezoeker, of een gecompromitteerd Editor-account, die een schadelijke SVG uploadt, kan code uitvoeren in de admin. Vandaar de blokkade. Je moet het formaat toestaan en het bestand opschonen.

Voeg niet zomaar image/svg+xml toe in functions.php. Zonder het bestand op te schonen, open je een beveiligingslek. De veilige methode: een onderhouden plugin die scripts, onload-evenementen en XML-entiteiten verwijdert. Safe SVG (10up), meer dan een miljoen installaties.

1. In de WordPress admin: Plugins → Nieuwe plugin toevoegen. Zoek naar Safe SVG (ontwikkelaar: 10up). Installeren en activeren.
2. Ga naar Instellingen → Media. Beperk SVG-uploads tot beheerders (of vertrouwde rollen). Stel het formaat niet open voor alle Auteur-accounts als de site meerdere bijdragers heeft.
3. Media → Nieuw bestand toevoegen. Upload de PixelToPath .svg. De plugin schoont deze op bij het importeren en toont een voorbeeld in de bibliotheek, wat WordPress van nature niet doet.
4. Voeg in een bericht of pagina een Afbeelding-blok in en kies de SVG. Gebruik voor een headerlogo Customizer / site-identiteit, of een Afbeelding-blok in de thema-template (site editor).
5. Ontwikkelaarsvariant: ga niet via de mediabibliotheek. Plaats het bestand in het thema (assets/logo.svg) en verwijs ernaar in de template, of voeg het inline toe om het met CSS op te maken. Geen upload, dus geen aanvalsoppervlak via de mediabibliotheek.

Safe SVG kan ook beperken wie mag uploaden. Houd de plugin up-to-date: het opschonen van het bestand is de echte controle, niet het vinkje 'SVG toestaan' alleen.

Welke PixelToPath SVG plak je in deze tools?

De editor slikt wat je hem geeft. Een verkeerde voorinstelling wreekt zich bij het importeren: te veel vormen, onbruikbare kleuren, bestand geweigerd.

• Logo, pictogram, belettering: Zwart-wit of Poster. Dit zijn effen vlakken, Figma en Canva herkleuren ze met één klik.
• Vermijd Foto als je van plan bent de kleuren te wijzigen. Deze modus creëert een veelvoud aan kleine vormen; Canva toont dan vaak geen nuttige kleurencirkels.
• Snijd het origineel bij voordat je converteert: minder achtergrond, minder knooppunten, een beter leesbare SVG in de Figma-laag.
• Eén variant per gebruik: een monochrome SVG voor Figma (huisstijl), een kleuren SVG voor Canva (post), hetzelfde opgeschoonde bestand voor WordPress (header).

Waar deze workflow de dagelijkse praktijk verandert

Zodra de SVG in de tool zit, stop je met het opnieuw converteren bij elke variant:

• Figma huisstijl: de PNG van de klant wordt een component die je herkleurt (primair, geïnverteerd, monochroom) zonder opnieuw te tekenen
• Canva posts: één SVG, zes campagnekleuren, scherpe stories en carrousels
• WordPress logo: één bestand in de header, scherp op mobiel en Retina, lichter dan de oude PNG
• Eindproduct freelancer: je levert de SVG plus de handleiding voor Figma / Canva. De klant zit niet langer vast
• Interface pictogrammen: importeer ze in batch in Figma, lijn ze uit op een 24 px grid, exporteer de set

Bewaar de PNG voor foto's. Voor alles wat van kleur moet veranderen of scherp moet blijven, is de combinatie PixelToPath + Figma / Canva / WordPress voldoende.