Comment importer et modifier vos fichiers SVG dans Figma, Canva ou WordPress ?

Vous avez le SVG. Et maintenant ?

La plupart des convertisseurs s'arrêtent au bouton Télécharger. Or le fichier ne sert à rien s'il reste dans le dossier Téléchargements. Un designer l'ouvre dans Figma pour coller la charte. Un community manager le dépose dans Canva pour décliner une publication. Un intégrateur le met dans WordPress pour le logo de l'en-tête. C'est cette étape d'après qui prouve que PixelToPath s'insère dans un vrai flux de travail, pas dans une démo.

Un SVG PixelToPath n'est pas une image figée. C'est un ensemble de chemins : chaque forme a un remplissage, éventuellement un contour. Changer le bleu du logo en bordeaux, isoler le picto, agrandir pour une story 1080x1920 : tout cela se fait dans l'outil que vous utilisez déjà, sans repasser par Illustrator.

Pourquoi Figma, Canva et WordPress aiment ce format

PNG et JPG, une fois importés, sont des bitmaps. Recolorer un logo PNG dans Figma, c'est poser un calque par-dessus, pas changer la couleur du tracé. Canva ne proposera pas de pastilles. WordPress servira un fichier lourd, flou en Retina. Le SVG règle les trois problèmes d'un coup.

Concrètement, un SVG issu de PixelToPath vous donne :

• Des tracés éditables : une couleur par forme, modifiable dans Figma (Remplissage) ou Canva (pastilles)
• Un fichier léger, largement sous la limite de 3 Mo de Canva, et plus rapide à charger sur un site WordPress qu'un PNG @2x
• Une netteté identique en favicon, en bannière LinkedIn ou en kakemono : un seul fichier
• Un livrable que vous pouvez envoyer au client : il l'ouvre dans l'outil qu'il a, pas dans Creative Cloud

Figma : importer le SVG et changer les couleurs

Figma importe un SVG comme un groupe de vecteurs, pas comme une photo. C'est tout l'intérêt : chaque forme reste un calque que vous recolorez, déplacez ou masquez.

1. Téléchargez le .svg depuis PixelToPath et ouvrez votre fichier Figma.
2. Glissez le fichier depuis l'explorateur directement sur le canvas. Variante : Fichier → Importer, ou Ctrl+Maj+K (Cmd+Maj+K sur Mac) pour placer le SVG.
3. Le calque apparaît comme un groupe. Double-cliquez pour entrer dedans, ou cliquez droit → Dissocier (Maj+Ctrl+G / Maj+Cmd+G) si vous voulez manipuler les formes une par une.
4. Sélectionnez un tracé. Dans le panneau de droite, section Remplissage (Fill), cliquez la pastille : hex, nuancier, pipette. Toute la forme change, les bords restent nets.
5. Pour un logo monochrome, sélectionnez toutes les formes du groupe et appliquez une seule couleur. Exportez ensuite en SVG, PNG ou PDF depuis la section Export si le livrable n'est plus du vectoriel.

Si Figma affiche une image plate au lieu de calques vectoriels, le fichier embarquait un bitmap (un PNG encapsulé). Ce n'est pas le cas des exports PixelToPath en préréglage Noir & Blanc ou Affiche. Reconvertissez l'original avec l'un de ces deux modes, pas Photo.

Canva : déposer le SVG et recolorer

Canva accepte les SVG en Free comme en Pro. La recoloration marche quand le fichier est simple : aplats, peu de nœuds, pas de dégradés. C'est exactement ce que PixelToPath produit avec Affiche ou Noir & Blanc.

1. Dans Canva, ouvrez un design. Panneau de gauche → Téléchargements → Télécharger des fichiers. Choisissez votre .svg (moins de 3 Mo ; un export PixelToPath est largement en dessous).
2. Une fois le fichier dans vos téléchargements, glissez-le sur la page. Redimensionnez-le aux poignées : le vecteur reste net, y compris en format story ou A4.
3. Cliquez le SVG. Dans la barre d'outils, des pastilles de couleur apparaissent, une par teinte du fichier. Cliquez une pastille, choisissez la nouvelle couleur : Canva l'applique à toutes les formes de cette teinte.
4. Si aucune pastille n'apparaît, le SVG est trop complexe (dégradés, trop de couleurs, tracés type Photo). Revenez dans PixelToPath, passez en Affiche ou Noir & Blanc, réexportez, réimportez.

Canva recommande un profil SVG 1.1, des formes de même couleur groupées, et zéro texture. Les préréglages logo de PixelToPath respectent déjà ces contraintes. Inutile de passer par Illustrator pour « préparer » le fichier.

WordPress : autoriser le téléversement SVG sans ouvrir une faille

WordPress refuse les SVG par défaut, et ce n'est pas un caprice. Un SVG est du XML : il peut contenir du JavaScript, des entités externes, une charge utile XSS. Un visiteur, ou un compte Éditeur compromis, qui téléverse un SVG malveillant peut exécuter du code dans l'admin. D'où le blocage. Il faut autoriser le format et nettoyer le fichier.

N'ajoutez pas seulement image/svg+xml dans functions.php. Sans nettoyer le fichier, vous ouvrez une faille. La méthode sûre : un plugin maintenu qui purge scripts, événements onload et entités XML. Safe SVG (10up), plus d'un million d'installations.

1. Dans l'admin WordPress : Extensions → Ajouter. Cherchez Safe SVG (éditeur : 10up). Installez et activez.
2. Allez dans Réglages → Médias. Limitez le téléversement SVG aux administrateurs (ou aux rôles de confiance). N'ouvrez pas le format à tous les comptes Auteur si le site a plusieurs contributeurs.
3. Médias → Ajouter. Déposez le .svg PixelToPath. Le plugin le nettoie à l'import et affiche un aperçu dans la bibliothèque, ce que WordPress ne fait pas nativement.
4. Dans un article ou une page, insérez un bloc Image et choisissez le SVG. Pour un logo de header, utilisez Personnaliser / l'identité du site, ou un bloc Image dans le modèle du thème (éditeur de site).
5. Variante développeur : ne passez pas par la médiathèque. Placez le fichier dans le thème (assets/logo.svg) et référencez-le dans le template, ou inlinez-le pour le styler en CSS. Pas de téléversement, donc pas de surface d'attaque médiathèque.

Safe SVG peut aussi restreindre qui a le droit de téléverser. Gardez le plugin à jour : le nettoyage du fichier est le vrai contrôle, pas la case « autoriser SVG » toute seule.

Quel SVG PixelToPath coller dans ces outils ?

L'éditeur avale ce que vous lui donnez. Un mauvais préréglage se paie au moment de l'import : trop de formes, couleurs imprenables, fichier rejeté.

• Logo, picto, lettrage : Noir & Blanc ou Affiche. Ce sont des aplats, Figma et Canva les recolorent en un clic.
• Évitez Photo si vous comptez modifier les couleurs. Ce mode crée une multitude de petites formes ; Canva ne montrera souvent aucune pastille utile.
• Recadrez l'original avant de convertir : moins de fond, moins de nœuds, un SVG plus lisible dans le calque Figma.
• Une variante par usage : un SVG monochrome pour Figma (charte), un SVG couleur pour Canva (post), le même fichier nettoyé pour WordPress (header).

Où ce flux change le quotidien

Dès que le SVG est dans l'outil, vous arrêtez de reconvertir à chaque déclinaison :

• Charte Figma : le PNG du client devient un composant que vous recolorez (primaire, inversé, monochrome) sans redessiner
• Publications Canva : un seul SVG, six couleurs de campagne, stories et carrousels nets
• Logo WordPress : un fichier dans l'en-tête, net sur mobile et Retina, plus léger que le PNG historique
• Livrable freelance : vous rendez le SVG plus le mode d'emploi Figma / Canva. Le client n'est plus bloqué
• Icônes d'interface : importez-les dans Figma en lot, alignez-les sur une grille 24 px, exportez le jeu

Gardez le PNG pour les photos. Pour tout ce qui doit changer de couleur ou rester net, le couple PixelToPath + Figma / Canva / WordPress suffit.