Pourquoi recolorer le SVG plutôt que le PNG ?
Dans un PNG, la couleur est répartie sur des milliers de pixels, bords anticrénelés compris : la changer, c’est repeindre. Dans un SVG fait de tracés pleins, une couleur est une valeur sur chaque forme : changez la valeur, et chaque bord reste exactement où il était. C’est pour cela que la deuxième palette d’une marque, une version pour le mode sombre ou une version monochrome pour l’impression doivent être faites à partir du SVG.
Comment recolorer une seule partie ?
Ouvrez le fichier dans l’éditeur SVG. Une image vectorisée s’ouvre avec chaque objet dans son propre calque ; à l’intérieur, les formes sont imbriquées selon ce qui entoure quoi (un œil dans un visage).
- Dans l’onglet Calques, chaque ligne affiche ses couleurs sous forme de petites pastilles : une pour une forme d’une seule couleur, plusieurs côte à côte pour un groupe.
- Cliquez sur une pastille. Un sélecteur s’ouvre à côté, avec des couleurs prédéfinies, les couleurs du dessin, un champ hexadécimal et une pipette.
- Survolez une couleur pour la prévisualiser sur la toile. Un clic l’applique à tous les remplissages de cette ligne (le calque entier, le groupe ou la forme seule) en une seule étape d’annulation. Échap remet l’ancienne couleur.
Une ligne de plusieurs couleurs peut passer à une seule couleur, ou ne changer qu’une de ses couleurs. Pour sélectionner plutôt quelque chose sur la toile : un clic prend l’objet entier, un double-clic entre dedans, et la barre de contexte au-dessus de la toile indique où vous êtes (« Dessin › Objet 2 › Forme »). Un clic à cet endroit vous fait ressortir.
Comment changer une couleur partout ?
Utilisez l’onglet Couleurs. Il liste la palette du dessin. Cliquer sur une pastille sélectionne toutes les formes qui l’utilisent, pour voir où se trouve la couleur, et La remplacer partout par la remplace dans tout le dessin en une seule étape d’annulation.
L’un de nos logos d’exemple, recoloré en changeant ses deux couleurs partout. Chaque forme et chaque bord sont identiques ; seules les deux valeurs de remplissage diffèrent.
Le même onglet contient le remplissage et le contour de la sélection (avec une pipette pour prélever une couleur sur la toile) et, pour un rectangle, ses coins. La position, la taille, la disposition, l’alignement et la grille se trouvent sous Plus.
Comment créer une version monochrome ?
Utilisez La remplacer partout par pour chaque couleur à tour de rôle, en les mettant toutes dans la même encre. Ou sélectionnez tout et utilisez le remplissage de la sélection. Cherchez ensuite les formes qui n’étaient visibles que grâce à leur couleur : un œil blanc sur un visage foncé disparaît quand les deux deviennent noirs. Supprimez ces formes, ou gardez-les dans une deuxième couleur, comme celle du papier, pour que le dessin reste lisible.
Comment vérifier le résultat ?
- Le contraste. Le texte et les petits détails ont besoin d’assez de contraste avec ce qui se trouve dessous. Les WCAG demandent au moins 4,5:1 pour un texte normal.
- Les petites tailles. Exportez un PNG en 32 et 64 px depuis l’éditeur et regardez-le à cette taille, sans zoomer.
- Les fonds sombres. Un logo conçu pour le blanc a souvent besoin, sur une page sombre, d’une version plus claire de sa couleur la plus foncée.
Enregistrer et exporter
Enregistrer garde une nouvelle version du SVG dans votre compte, et les versions précédentes restent disponibles. Exporter en PNG génère le dessin à la largeur de votre choix, de 16 à 4 096 px. Les modifications non enregistrées sont gardées comme brouillon dans votre navigateur et vous sont proposées la prochaine fois que vous ouvrez le même fichier. L’éditeur nécessite un compte. Les fichiers qu’il contient, versions modifiées comprises, sont conservés pendant la durée de stockage de votre compte, indiquée sur chaque fichier.