Pourquoi les polices de mon logo SVG changent-elles ?

Pourquoi un SVG peut encore dépendre d’une police

Un SVG peut stocker du texte éditable comme des formes vectorielles. Un objet texte peut nommer une police sans l’inclure. Si le logiciel de lecture n’y a pas accès, une autre police peut être utilisée. Cela change la forme des lettres et peut aussi modifier la largeur du logotype.

Le navigateur choisit parmi les familles de polices disponibles ; certains caractères peuvent utiliser une police de remplacement si un glyphe manque. C’est pourquoi un accent, un symbole ou une seule lettre peut paraître incorrect alors que le reste semble bon. Le CSS peut aussi remplacer un attribut SVG font-family.

La vectorisation des lettres validées enregistre leurs formes visibles sous forme de tracés vectoriels. Le destinataire n’a plus besoin de cette police pour dessiner ces lettres. C’est un choix de livraison utile pour un logo fixe, tandis que la source modifiable reste disponible pour les changements futurs.

Pour aller plus loin : MDN : comment font-family sélectionne les polices · MDN : font-family SVG et CSS · Adobe : convertir le texte en tracés vectoriels

Trouvez où les lettres changent en premier

Gardez la référence du logo validé à côté du document source et du fichier exporté. Comparez la même variante à une taille similaire. Suivez le fichier de la source à l’export puis à la destination pour cerner le problème avant de modifier les réglages.

Vérifiez la bonne police avant de vectoriser

Partez d’un maître modifiable et d’une référence validée connue. Si l’application signale une police manquante, résolvez d’abord ce problème. Vectoriser la police de remplacement fige ses formes ; cela ne peut pas restituer le design prévu.

Par exemple, si le logo validé utilise une graisse semi-grasse particulière mais que la source affiche maintenant une graisse normale, convertir ce texte en tracés conserve la mauvaise graisse. La commande de vectorisation a fait son travail, mais le visuel doit encore être corrigé.

• ✓Vérifiez la famille de police, le style et les éventuels réglages de police variable par rapport à la source validée.
• ✓Vérifiez l’orthographe, les accents, la ponctuation, les retouches personnalisées des lettres et les ligatures.
• ✓Comparez l’espacement entre les lettres, la ligne de base et l’écart entre le symbole et le logotype.
• ✓Enregistrez séparément le maître modifiable. Utilisez la vectorisation à l’export ou une copie de livraison clairement nommée.
• ✓Convertissez tous les éléments de texte appartenant au logo fixe, y compris une éventuelle signature de marque validée.

Illustrator : vectorisez à l’export ou dans une copie de livraison

Choisissez la méthode adaptée à votre livraison. La vectorisation à l’export permet de conserver du texte éditable dans le maître.

1. Ouvrez le bon visuel source et choisissez File → Export → Export As, puis SVG.
2. Dans SVG Options, réglez Font sur Outlines et exportez.
3. Ouvrez le SVG enregistré dans un navigateur et comparez-le au logo validé.

Si vous avez besoin d’une copie de travail vectorisée, dupliquez le document, sélectionnez le texte du logo et choisissez Type → Create Outlines. Gardez les formes des lettres et leurs espaces intérieurs intacts ; inutile de libérer les tracés transparents simplement pour exporter un logotype normal.

Vous utilisez plutôt Save As ou Save a Copy ? Dans cette boîte de dialogue SVG, l’option de police s’appelle Convert To Outlines. Les noms des commandes diffèrent selon les méthodes d’export.

Pour aller plus loin : Adobe : options d’export SVG · Adobe : Create Outlines · Adobe : options Save As SVG

Figma : gardez Outline text activé pour le SVG

La documentation Figma indique que la vectorisation du texte SVG est activée par défaut. Vérifiez le réglage de l’export que vous utilisez réellement.

1. Sélectionnez le cadre ou les calques du logo validé et choisissez SVG dans la section Export.
2. Ouvrez les réglages d’export propres au format et gardez Outline text activé.
3. Exportez le SVG et inspectez le fichier téléchargé.

Cela convertit le texte dans l’export tout en gardant votre texte source modifiable. Désactiver Outline text préserve l’édition du texte exporté : il faut alors vérifier la disponibilité des polices à destination.

Poursuivez avec : Méthode complète d’export de logo Figma

Pour aller plus loin : Figma : réglages SVG et Outline text

Affinity : utilisez une copie avec le texte converti en courbes

Affinity utilise le terme Convert to Curves pour transformer les objets sélectionnés en tracés vectoriels modifiables. Conservez le texte dans votre maître, convertissez les lettres validées dans une copie de livraison et inspectez le SVG exporté. Les réglages d’export diffèrent entre l’application Affinity actuelle et Affinity Designer 2 ; suivez la méthode de votre version.

Poursuivez avec : Guide d’export de logo Affinity

Pour aller plus loin : Affinity : Move Tool et Convert to Curves

Vérifiez le SVG réel, puis sa destination

Ouvrez le fichier enregistré ou téléchargé plutôt que de vous fier au canevas de création ou à l’aperçu d’export. Si un site traite les imports ou optimise les SVG, inspectez aussi le fichier réellement servi par le site.

Testez le SVG dans l’emplacement prévu, y compris dans un élément image ou en arrière-plan CSS. Les navigateurs peuvent restreindre les ressources externes lorsqu’un SVG est utilisé comme image : un fichier qui semble correct dans son propre onglet peut donc être rendu différemment sur le site web.

• ✓Comparez les lettres distinctives, les accents, les ligatures et les espaces intérieurs de lettres comme A, B et O.
• ✓Vérifiez la largeur du logotype, l’espacement des lettres, la ligne de base et l’alignement du symbole.
• ✓Regardez le logo à sa petite taille d’affichage prévue et agrandissez-le aussi pour l’inspecter.
• ✓Vérifiez chaque variante couleur validée sur le fond prévu.
• ✓Confirmez que les signatures de marque et les petits signes sont inclus et qu’aucune lettre n’est coupée.
• ✓Demandez au destinataire de vérifier le fichier exact dans l’application ou sur le site où il sera utilisé.

Pour aller plus loin : MDN : SVG dans les contextes d’image · MDN : éléments de texte en SVG

Si les lettres vectorisées semblent toujours incorrectes

Confirmez d’abord que les lettres concernées sont réellement des tracés dans le fichier utilisé. Si c’est le cas, changer font-family ne redessinera pas leur géométrie. Comparez le premier export vectorisé à la source, puis avancez étape par étape.

• Mauvaises formes de lettres immédiatement après vectorisation : comparez la source à la référence validée et vérifiez si une police avait déjà été remplacée.
• Espaces intérieurs manquants ou formes brisées : inspectez les tracés transparents, les remplissages, l’écrêtage et tout nettoyage appliqué après conversion.
• Géométrie différente après optimisation : comparez à l’export non optimisé et vérifiez la précision des coordonnées ou la simplification des tracés.
• Changement uniquement sur le site : inspectez le fichier servi et les styles de la page, notamment les remplissages et les contours, ainsi que la taille d’affichage.
• Lettres de police couleur ou effets particuliers : consultez la documentation de la police et de l’application. Adobe répertorie des problèmes précis d’export et de vectorisation des polices couleur OpenType-SVG.

Pour aller plus loin : Adobe : réglages de précision SVG · Adobe : problèmes des polices couleur OpenType-SVG

Préservez les besoins d’édition et d’accessibilité

Les lettres vectorisées restent des visuels vectoriels, mais leurs caractères ne sont plus du texte ordinaire modifiable. Conservez le maître avec texte éditable pour les changements de formulation, la localisation et les travaux typographiques futurs. La vectorisation peut aussi augmenter les données de tracés : comparez le poids final du fichier plutôt que de supposer un export plus léger.

Fournissez au développeur un nom accessible adapté avec le fichier. Pour un logo constituant le seul contenu d’un lien vers la page d’accueil, un exemple serait « Accueil Morrow Quay ». Si le même lien contient déjà un texte visible équivalent, évitez une annonce en double. Les recommandations W3C sur les images fonctionnelles expliquent cette distinction.

Gardez autant que possible les titres ordinaires, les textes et les libellés d’interface sous forme de vrai texte. Transformer le logo en tracés ne lui donne pas à lui seul un nom accessible et ne rend pas le site accessible.

Vérifiez la licence applicable avant d’inclure des fichiers de police dans une livraison. Adobe Fonts, par exemple, distingue la livraison d’un visuel finalisé du besoin, pour un client, de disposer de sa propre licence lorsqu’il accède directement à la police et la modifie. Les autres polices ont leurs propres conditions.

Poursuivez avec : Documenter les polices et les besoins de licences pour la livraison client

Pour aller plus loin : W3C WAI : logos-liens accessibles · Adobe Fonts : FAQ sur les licences

Préparez le pack à partir du visuel vérifié

Une fois les lettres exportées conformes au design validé, utilisez ce SVG vérifié comme point de départ des fichiers client. Dans logopack.app, vous pouvez prévisualiser un pack gratuitement ; le téléchargement du ZIP de logos nécessite Pro. Consultez les offres actuelles pour connaître les détails d’export.

Si logopack.app signale que le SVG contient du texte, revenez dans votre logiciel de design et convertissez les lettres validées en tracés ou en courbes. La correction des polices relève de la préparation de la source : un générateur de packs ne peut pas retrouver la police prévue à partir d’un logotype dont la police a été remplacée.

Poursuivez avec : Choisir les fichiers à livrer au client · Comparer les formats de fichiers de logo

Questions fréquentes sur les polices SVG

Pour aller plus loin : MDN : utiliser des polices en SVG