Texte SVG foreignObject : réparer les libellés exportés

Si les formes d’un SVG survivent à l’export mais que ses libellés disparaissent, cherche <foreignObject> dans le libellé manquant. Il peut contenir du HTML qu’un navigateur met correctement en page, mais que le moteur de rendu destinataire ne prend pas en charge. Remplace le libellé concerné par des éléments SVG natifs <text> et <tspan>, ou choisis une méthode d’export qui préserve son apparence.

Ouvre d’abord le fichier exporté exact dans un navigateur. Si le libellé y manque aussi, vérifie son espace de noms, ses limites et ses styles avant d’accuser l’importateur. Garde le dessin original : vectoriser l’image entière est inutile lorsque seul le conteneur de texte a échoué.

Pourquoi le dessin survit tandis que son libellé disparaît

Un SVG peut mélanger des formes ordinaires et du contenu provenant d’un autre espace de noms XML. Une montagne dessinée avec <path> et un soleil dessiné avec <circle> sont des éléments SVG natifs. Un paragraphe dans <foreignObject> peut être du HTML, avec ses propres règles de retour à la ligne et de mise en page. La référence MDN de foreignObject explique cette distinction.

L’extension .svg ne garantit donc pas que toutes les parties utilisent les mêmes fonctionnalités de rendu. Une destination peut dessiner la montagne et le soleil tout en omettant le paragraphe HTML. Changer la couleur du texte ou augmenter la résolution d’export n’ajoutera pas la prise en charge du HTML à ce moteur de rendu.

Un petit test : changer seulement le libellé

Nous avons créé une carte SVG de 480 × 240 avec un tracé, un cercle et les mots « Keep artwork and labels separate. ». Le premier fichier utilise un libellé HTML. Le second garde les mêmes formes et remplace uniquement le libellé par du texte natif sur trois lignes explicites.

Dans notre aperçu navigateur, les deux libellés apparaissaient. Le rendu des mêmes fichiers en PNG avec sharp 0.34.4 et sa version intégrée de librsvg 2.61.1 a produit le résultat ci-dessous : le libellé HTML a disparu, tandis que le libellé natif est resté. La sortie avec libellé HTML était aussi identique pixel par pixel à un fichier témoin sans libellé. Il s’agit d’un test de ces fichiers et de cette version du moteur, pas d’un verdict de compatibilité pour tous les éditeurs.

Le fichier original est assez court pour être reproduit. Enregistre ceci sous html-label.svg et ouvre-le dans un navigateur :

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

Pour le second fichier, remplace l’élément foreignObject entier par ce libellé et enregistre-le sous native-label.svg :

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

La valeur x fait commencer chaque ligne à la même position horizontale. Les valeurs dy décalent les lignes suivantes vers le bas. Cette méthode abandonne volontairement les retours automatiques du HTML : l’auteur choisit les sauts de ligne et vérifie qu’ils tiennent. MDN décrit le positionnement avec tspan, et librsvg présente ses éléments SVG pris en charge, dont text et tspan.

Ouvre les deux fichiers avec la chaîne de livraison réelle, par exemple ton convertisseur d’images ou générateur de PDF. Compare le résultat enregistré, pas seulement l’aperçu de la source. Respecter les dimensions de l’exemple ne garantit pas les mêmes polices sur une autre machine.

Si le libellé manque aussi dans le navigateur

Vérifie le fichier .svg sérialisé, plutôt que seulement la page qui l’a créé. Un SVG intégré au HTML et un document SVG autonome relèvent de contextes d’analyse différents.

L’exemple place explicitement le div dans http://www.w3.org/1999/xhtml. MDN indique que cette déclaration d’espace de noms est nécessaire pour le contenu HTML d’un document SVG autonome, même si un exemple intégré au HTML peut l’omettre. Si tu crées des éléments en JavaScript, utilise l’espace de noms approprié pour l’enfant HTML ; un div créé dans l’espace de noms SVG n’est pas un conteneur de paragraphe HTML.

Examine ensuite ces parties du libellé :

• Donne à foreignObject des valeurs width et height explicites et positives pour la zone prévue.
• Garde ses coordonnées x et y dans le dessin visible, avec assez de place pour toutes les lignes.
• Vérifie display, visibility, l’opacité et la couleur du texte sur le conteneur et ses enfants.
• Confirme que le fichier exporté inclut les styles nécessaires, au lieu de dépendre de la feuille de style de la page web qui l’entoure.

Dans l’exemple, tous les styles du libellé sont intégrés et la boîte mesure 230 unités de large sur 110 de haut. Cela élimine le CSS externe comme variable. Cela ne rend pas foreignObject portable vers un moteur dépourvu de cette fonctionnalité.

Pour les exports draw.io, convertir les libellés à la source

Si tu as encore le diagramme éditable, corrige son export de libellés avant de modifier le XML à la main. La documentation actuelle d’export draw.io propose Convert Labels to SVG pour les libellés formatés compatibles : sélectionne les formes ou connecteurs, ouvre la section Advanced de l’onglet Text et active la case.

Cette option a des limites. La documentation exclut de cette conversion les libellés contenant des structures comme des tableaux, listes, liens ou couleurs de fond. Si l’option est indisponible, désactiver Formatted Text et Word Wrap est une autre solution documentée ; tu devras peut-être insérer des sauts de ligne manuels et revérifier la mise en page.

Exporte une nouvelle copie et rouvre-la dans l’application destinataire. Masquer l’avertissement « Text is not SVG » ne convertit pas le libellé. Intégrer une police traite une dépendance de police, pas l’absence de prise en charge de la mise en page HTML.

Pour un diagramme illustré, conserve le dessin importé séparément des libellés. Le guide des formes SVG personnalisées draw.io traite du dessin dans cette procédure.

Choisir le format de texte pour la personne suivante

Le texte natif est une réparation utile lorsque le destinataire doit modifier les mots, mais il dépend toujours de polices exploitables. Si le libellé utilise la mauvaise police, suis les vérifications de police SVG au lieu de le traiter comme le même problème de conteneur manquant.

La conversion en tracés fonctionne seulement lorsque l’outil source voit et peut convertir le lettrage. Ouvrir un export déjà incomplet et convertir les objets restants ne peut pas restaurer des mots absents de ce document importé. Un PNG conserve des pixels ; il ne convient donc pas si le destinataire a besoin de mots éditables ou de tracés de découpe vectoriels.

La place de PerfectVector dans une carte illustrée

Si l’illustration de la carte n’existe qu’en PNG ou JPG, la procédure clipart vers SVG de PerfectVector peut préparer une proposition vectorielle pour ce dessin. Garde le texte comme élément distinct dans ton éditeur de conception. Vérifie les bords et les espaces internes de l’illustration, ajoute le libellé et teste le fichier assemblé dans le moteur destinataire.

Le guide de vectorisation d’images explique comment les pixels deviennent des tracés. PerfectVector ne répare pas les libellés HTML d’un SVG. Lorsque l’illustration a déjà de bons tracés, préserve-les et change seulement le libellé défaillant. Une capture d’écran du libellé manquant ne contient aucune lettre à reconstruire, et vectoriser un lettrage visible créerait des formes plutôt que des mots éditables.

Avant d’envoyer le SVG réparé

1. Rouvre la copie exportée dans un navigateur et dans la destination prévue.
2. Confirme que chaque libellé, y compris sa dernière ligne, est visible.
3. Vérifie que le dessin n’a pas bougé ni changé de taille.
4. Vérifie les polices, ou examine le lettrage converti en tracés à la taille prévue.
5. Garde la source éditable avec la copie à livrer.

FAQ

Pourquoi le texte SVG apparaît-il dans Chrome mais disparaît-il dans un export PNG ? Le libellé peut être du HTML dans foreignObject, tandis que le moteur PNG prend en charge un autre sous-ensemble du SVG. Vérifie le balisage du libellé manquant et rends une version en texte natif avec la même méthode d’export.

Ajouter l’espace de noms XHTML corrige-t-il tous les exports foreignObject ? Non. Cela corrige l’espace de noms du contenu HTML dans un SVG autonome. La destination doit toujours prendre en charge ce contenu, et le libellé nécessite toujours des dimensions adaptées et des styles visibles.

tspan peut-il faire des retours à la ligne comme un paragraphe HTML ? L’exemple utilise des lignes explicites et des décalages verticaux. Il ne reproduit pas la mise en page des paragraphes HTML. Choisis les sauts de ligne selon l’espace disponible et vérifie-les avec la police de destination.

Dois-je vectoriser toute la carte pour retrouver ses libellés ? Préserve les tracés existants et reconstruis le libellé à partir de son texte original. Vectorise seulement les dessins qui existent en pixels. Le lettrage vectorisé est de la géométrie ; il ne conserve donc pas les mots éditables.

Sources

1. MDN — foreignObject — Définit le contenu étranger, les attributs géométriques et l’espace de noms XHTML dans un SVG autonome.
2. MDN — tspan — Explique le positionnement de portions de texte SVG natif.
3. draw.io — Problèmes du texte SVG exporté — Décrit la conversion des libellés natifs, les limites de formatage et les réglages d’export alternatifs.
4. GNOME — Fonctionnalités SVG et CSS prises en charge par Librsvg — Présente les éléments et attributs pris en charge par le moteur.

Si ton illustration est encore matricielle, prépare le clipart en SVG, examine ses formes et ajoute le texte séparément. Vérifie les deux dans le fichier exporté avant de le transmettre.