SVG vers ICO ne fonctionne pas ? Causes fréquentes (polices, images externes, ViewBox)

SVG est l'un des meilleurs formats source pour générer des fichiers ICO. Étant un format vectoriel, le SVG s'adapte à n'importe quelle taille sans perte de qualité, ce qui le rend idéal pour produire les multiples couches de tailles (de 16 à 256 pixels) dont un bon fichier ICO a besoin. En théorie, vous déposez un SVG dans Any2ICO et vous obtenez instantanément un fichier ICO net et multi-tailles.

En pratique, les fichiers SVG peuvent être délicats. La spécification SVG est vaste et complexe, et différents outils créent des SVG avec des hypothèses différentes sur la manière dont le fichier sera rendu. Un SVG qui apparaît parfaitement dans Adobe Illustrator ou Figma peut se rendre de manière incorrecte, partielle, ou ne pas se rendre du tout lorsqu'il est ouvert dans l'API Canvas d'un navigateur, qui est le moteur de rendu utilisé par les convertisseurs basés sur navigateur. Le résultat peut être une icône vide, une icône avec du texte manquant, une icône à la mauvaise échelle ou une icône avec des éléments manquants.

La bonne nouvelle est que les problèmes sont bien identifiés et les solutions sont simples. Cet article couvre les raisons les plus courantes pour lesquelles la conversion SVG vers ICO échoue ou produit des résultats inattendus, et fournit une solution claire pour chacune. Si vous souhaitez le chemin le plus rapide vers le succès, commencez par la liste de vérification dans la section suivante.

Liste de vérification rapide : corrigez votre SVG avant de convertir

Avant d'entrer dans les explications détaillées, voici une liste de vérification rapide qui résout la majorité des problèmes de conversion SVG vers ICO. Parcourez d'abord ces éléments ; si votre problème est résolu, vous n'avez pas besoin de lire la suite.

1. Ajoutez ou corrigez l'attribut viewBox. Ouvrez votre SVG dans un éditeur de texte et vérifiez l'élément racine <svg>. Il doit comporter un attribut viewBox tel que viewBox="0 0 100 100" qui définit le système de coordonnées. S'il est absent, ajoutez-le avec des valeurs correspondant aux dimensions de votre création.

2. Convertissez tout le texte en contours (tracés). Sélectionnez tous les éléments de texte dans votre éditeur vectoriel et convertissez-les en contours ou tracés. Dans Illustrator, il s'agit de Texte > Vectoriser. Dans Figma, faites un clic droit et sélectionnez Aplatir. Dans Inkscape, utilisez Chemin > Objet en chemin. Cela élimine complètement les dépendances aux polices.

3. Supprimez ou intégrez les références externes. Recherchez dans votre fichier SVG les références href, xlink:href et url() pointant vers des fichiers externes (images, polices, CSS). Intégrez ces ressources directement dans le SVG ou supprimez-les si elles ne sont pas essentielles.

4. Remplacez le CSS externe par des styles en ligne. Si votre SVG fait référence à une feuille de style externe, copiez les règles CSS pertinentes directement dans un bloc <style> à l'intérieur du SVG, ou convertissez-les en attributs style en ligne sur chaque élément.

5. Définissez une largeur et une hauteur explicites. Bien que ce ne soit pas toujours nécessaire, l'ajout des attributs width et height à l'élément racine <svg> aide l'API Canvas à déterminer la taille de rendu correcte. Utilisez des valeurs égales ou supérieures à 256 pixels pour de meilleurs résultats.

Polices et rendu du texte

Le texte est la source la plus importante de problèmes de conversion SVG. Lorsqu'un SVG contient des éléments <text>, le moteur de rendu a besoin d'accéder à la police spécifiée pour afficher le texte correctement. Dans une application de design comme Illustrator ou Figma, la police est installée sur votre ordinateur, donc tout s'affiche bien. Mais lorsque le SVG est rendu dans l'API Canvas d'un navigateur pour la conversion en ICO, la situation est très différente.

L'API Canvas ne peut utiliser que les polices disponibles pour le navigateur au moment du rendu. Si votre SVG spécifie font-family: "Proxima Nova" et que cette police n'est pas installée sur le système de l'utilisateur ou chargée via une police web, le navigateur substitue une police par défaut (généralement une sans-serif ou serif générique). Cela modifie l'apparence du texte : l'espacement des lettres change, les caractères peuvent être plus larges ou plus étroits, et la mise en page globale peut se casser. Dans certains cas, le texte peut ne pas se rendre du tout si le SVG utilise des fonctionnalités de police avancées ou des ligatures que la police de remplacement ne prend pas en charge.

La solution fiable est de convertir tout le texte en contours (également appelé « conversion en tracés » ou « aplatissement du texte »). Cela remplace chaque caractère de texte par un tracé vectoriel qui décrit sa forme exacte. Le SVG résultant ne fait plus référence à aucune police car les formes des lettres sont dessinées sous forme de tracés géométriques. Le fichier SVG sera légèrement plus volumineux, mais il se rendra de manière identique sur n'importe quel système, dans n'importe quel navigateur et via n'importe quelle API Canvas, quelles que soient les polices installées.

Dans Illustrator : sélectionnez tout le texte, puis allez dans Texte > Vectoriser. Dans Figma : sélectionnez les calques de texte, faites un clic droit et choisissez Aplatir. Dans Inkscape : sélectionnez le texte, puis utilisez Chemin > Objet en chemin. Enregistrez toujours le SVG original modifiable séparément avant de convertir en contours, car le texte vectorisé ne peut plus être édité en tant que texte.

Images externes et références

Les fichiers SVG peuvent faire référence à des ressources externes : des images chargées via <image href="/fr/logo.png">, des polices chargées via @font-face avec une URL, des fichiers CSS liés via <?xml-stylesheet?>, et des motifs ou dégradés qui font référence à d'autres fichiers SVG. Lorsque le SVG est ouvert en tant que fichier autonome dans un convertisseur basé sur navigateur, ces références externes échouent presque toujours au chargement.

L'API Canvas rend le SVG dans un contexte isolé où les requêtes cross-origin sont bloquées pour des raisons de sécurité. Un élément <image> pointant vers https://exemple.com/logo.png ne se chargera pas car le navigateur bloque la requête cross-origin. Le résultat est un espace vide à l'endroit où l'image devrait apparaître. La même chose s'applique aux polices hébergées en externe, aux feuilles de style et à toute ressource référencée par URL.

Même les chemins relatifs comme href="/fr/logo.png" échoueront car le SVG est traité en mémoire par l'API Canvas, et non servi depuis un répertoire où les chemins relatifs peuvent être résolus. Il n'y a pas de contexte de système de fichiers pour que le SVG fasse des références.

La solution est d'intégrer toutes les ressources externes directement dans le SVG. Pour les images, convertissez-les en URI de données base64 : <image href="data:image/png;base64,iVBOR...">. Pour les polices, utilisez une déclaration @font-face encodée en base64 à l'intérieur d'un bloc <style> dans le SVG (bien que la conversion du texte en contours soit généralement plus simple et plus fiable). Pour le CSS, copiez toutes les règles dans un élément <style> en ligne à l'intérieur de la balise <svg>.

Problèmes de ViewBox, largeur et hauteur

L'attribut viewBox définit le système de coordonnées d'un SVG. Il indique au moteur de rendu quelle portion du canevas SVG infini afficher et comment mettre à l'échelle le contenu. Lorsque le viewBox est manquant ou incorrect, les résultats vont d'une sortie vide à une icône qui n'affiche qu'un coin du design ou se rend avec un rapport d'aspect incorrect.

ViewBox manquant : Si le SVG a des attributs width et height mais pas de viewBox, certains moteurs de rendu déduiront le viewBox des dimensions, mais l'API Canvas peut ne pas le faire. L'approche la plus sûre est de toujours inclure un viewBox explicite. Si votre SVG est conçu à 100x100 unités, ajoutez viewBox="0 0 100 100" à l'élément racine.

Le viewBox ne correspond pas au contenu : Si les coordonnées du viewBox n'englobent pas tout le contenu du SVG, des parties du design seront tronquées. Par exemple, si votre icône a des éléments qui s'étendent jusqu'à x=120 mais que le viewBox ne couvre que de 0 à 100, les 20 unités les plus à droite sont invisibles. Ouvrez le SVG dans un éditeur de texte, examinez les valeurs du viewBox et ajustez-les pour contenir tous les éléments visibles.

Largeur/hauteur définie à 0 ou à des valeurs très petites : Certains outils d'exportation SVG définissent la largeur et la hauteur à des valeurs très petites comme 1px ou 0, en s'appuyant sur le CSS pour redimensionner le SVG lorsqu'il est affiché sur une page web. Lorsque l'API Canvas lit ces dimensions, elle peut rendre le SVG à 1x1 pixel puis l'agrandir, produisant un résultat complètement vide ou très flou. Définissez la largeur et la hauteur à au moins 256 pixels pour donner à l'API Canvas une taille de rendu raisonnable.

Dimensions en pourcentage : Un SVG avec width="100%" height="100%" n'a pas de taille intrinsèque. L'API Canvas a besoin de valeurs absolues en pixels pour créer une surface de rendu. Remplacez les dimensions en pourcentage par des valeurs absolues comme width="512" height="512".