Faire suivre une forme SVG au texte HTML avec CSS

Pour faire couler le texte HTML autour d’une silhouette SVG, fais flotter l’image, donne-lui des dimensions explicites et définis shape-outside avec l’URL du SVG transparent. Ajoute shape-margin pour laisser un espace autour du contour. Le paragraphe reste du HTML ordinaire ; le SVG fournit l’image utilisée pour calculer sa limite d’habillage.

Cela fonctionne à l’extérieur du SVG. Cela n’effectue pas le retour à la ligne d’un élément SVG text et ne courbe pas les lettres le long d’un chemin. L’exemple ci-dessous utilise une silhouette transparente originale et un paragraphe complet, sans mots placés manuellement ni sauts de ligne insérés.

Choisis la disposition de texte dont tu as besoin

Le fichier SVG ne contient pas la disposition du paragraphe autour de lui. Copier l’image dans un autre document ne transfère pas cette relation HTML/CSS.

1. Donne une taille au flottant et une image transparente

La référence MDN de shape-outside décrit la propriété comme un moyen de modifier la zone flottante autour de laquelle s’habille le contenu en ligne adjacent. Avec la valeur par défaut, cette zone suit la boîte de marge du flottant. Une URL d’image dérive plutôt la forme de l’alpha de l’image, c’est-à-dire de sa transparence.

La couleur visible n’est pas le signal de limite. Un fond blanc opaque possède aussi de l’alpha et peut faire se comporter l’illustration comme un rectangle. Vérifie le fichier lui-même, pas seulement l’apparence d’une illustration blanche sur une page blanche. Préserve la transparence hors de la silhouette.

Enregistre cette illustration originale sous silhouette.svg :

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>

Sa taille intrinsèque est de 150 × 180, et le CSS utilise les mêmes largeur et hauteur. Conserver un rapport d’aspect cohérent facilite l’inspection de la relation entre l’illustration affichée et l’image de forme.

L’image de cet exemple est décorative ; elle possède donc un attribut alt vide. Donne à une image porteuse de sens une alternative textuelle adaptée à ta page ; l’habillage du texte ne communique pas automatiquement sa signification.

2. Exécute l’exemple HTML complet

Enregistre ceci sous index.html à côté de silhouette.svg :

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>

Sers le dossier en HTTP, par exemple avec python -m http.server 8000, et ouvre http://localhost:8000/index.html. Les deux fichiers partagent alors la même origine. Une URL de fichier local n’est pas la configuration de chargement testée ici.

Remplace class="sample narrow contour" par class="sample narrow" pour comparer l’habillage rectangulaire normal du flottant. Remplace narrow par wide pour tester la colonne de 520 pixels. Le paragraphe et l’image restent inchangés.

La référence de display décrit flow-root comme établissant un contexte de formatage de bloc. Ici, il contient l’image flottante dans son exemple. Il ne positionne pas les mots ; la disposition en ligne du navigateur s’en charge.

3. Vérifie les lignes rendues à plusieurs largeurs

Nous avons exécuté quatre exemples visibles dans Chromium 155 avec Arial à 16px et une hauteur de ligne de 24px. L’image restait à 150 × 180px, tandis que les colonnes avaient des largeurs de contenu fixes de 360px et 520px. Les deux exemples de contour utilisaient shape-margin: 10px et shape-image-threshold: 0.5.

Le contour étroit changeait l’habillage sans réduire le nombre total de lignes. À la plus grande largeur, l’exemple de contour utilisait une ligne de moins que son témoin rectangulaire.

Nous avons mesuré les rectangles DOM Range natifs de chaque mot et les avons regroupés par position verticale. Ce sont des mesures de lignes de texte rendues, pas un accès aux objets internes de boîtes de ligne du navigateur. Nous avons aussi vérifié les réglages calculés de flottant et de forme, les dimensions de l’image chargée et les échantillons d’alpha de la véritable image SVG.

Aux deux largeurs, certaines lignes de contour commençaient à gauche de la limite d’exclusion de 150px du flottant rectangulaire. Le texte reprenait aussi toute la colonne après l’image. Ces observations montrent que le contour testé affectait la véritable disposition, au lieu de seulement changer l’apparence d’une capture.

Les lignes et coordonnées exactes dépendent de la police, du navigateur, du paragraphe, de l’image et de la largeur. Remplacer une phrase ou charger une autre police peut les modifier. Teste ton véritable contenu à des tailles étroites et larges au lieu de conserver ces nombres comme constantes de conception.

4. Traite séparément marge de forme, alpha et chargement

shape-margin agrandit la forme d’habillage pour créer un espace entre elle et le texte. La valeur de 10px ici est un choix de disposition, pas un écart minimal mesuré entre chaque glyphe visible et chaque point de l’illustration.

La spécification CSS Shapes conserve le modèle de boîte normal et limite l’effet de la forme à la boîte de marge du flottant. Une grande marge de forme ne donne pas à l’image une boîte CSS plus grande. Si ton dessin demande plus d’espace, inspecte aussi les dimensions et marges ordinaires du flottant.

shape-image-threshold choisit le seuil alpha utilisé pour extraire la forme de l’image. Le fichier d’exemple original possède un extérieur entièrement transparent et une illustration centrale opaque. Des ombres douces ou des bords translucides demandent un choix de seuil délibéré et une vérification visuelle ; changer le seuil ne peut pas rendre transparent un fond opaque.

L’URL de l’image doit aussi permettre son chargement comme forme. CSS Shapes prescrit une requête CORS pour les URL d’image et revient à l’absence de forme personnalisée si le chargement échoue. Servir le SVG à côté de la page évite ici une dépendance entre origines. Si un CDN l’héberge, configure la réponse CORS de ce serveur et inspecte la requête et la disposition. Voir l’image dans un élément img ne prouve pas à lui seul que la requête de forme a réussi.

5. Préserve l’ordre du texte et vérifie la page finale

Les quatre paragraphes testés conservaient exactement le même texte dans un seul nœud de texte, sans éléments br ni positionnement mot par mot. Le CSS changeait les retours visuels à la ligne sans réécrire l’ordre DOM du paragraphe. Nous n’avons pas effectué de session avec lecteur d’écran ni déduit un audit d’accessibilité de ce contrôle du code source.

Garde le paragraphe lisible lorsque l’image n’est pas disponible ou que la disposition change. Pour des colonnes très étroites, une disposition plus simple avec l’image au-dessus du paragraphe peut être plus lisible qu’une fine bande de texte à côté. Vérifie ton propre point de rupture et ton contenu au lieu de réduire le texte pour forcer un effet de contour.

Le flottant réserve toujours une boîte CSS. L’habillage par forme ne le transforme pas en obstacle général autour duquel le texte passe de tous les côtés. Dans cet exemple de flottant à gauche, le texte adjacent s’habille à droite, puis continue dessous.

Corrige le symptôme à sa source

Si une illustration en aplats adaptée ne subsiste que comme image matricielle et que tu as besoin d’une silhouette modifiable, le processus clipart vers SVG de PerfectVector peut aider à récupérer une candidate. Compare son contour et son entourage transparent à la source, puis teste la véritable URL SVG dans ta page. Une image matricielle transparente peut aussi fournir une forme CSS fondée sur une image ; le SVG n’est pas obligatoire pour activer l’habillage par alpha.

Conserve un SVG propre existant si tu en as un. La vectorisation ne construit pas la disposition HTML autour de l’image, ne préserve pas pour toi la sémantique du paragraphe et ne garantit pas le résultat d’habillage d’un navigateur donné.

Questions fréquentes

shape-outside fait-il passer le texte à la ligne dans un SVG ? Non. Cet exemple change le flux en ligne HTML à côté d’une image flottante. Les étiquettes SVG, le HTML incorporé dans SVG et le texte suivant un chemin sont des tâches de disposition différentes.

Pourquoi mon SVG d’apparence transparente s’habille-t-il encore comme un rectangle ? Vérifie la présence d’un fond opaque dans le fichier, un échec de requête d’image de forme, une taille de flottant manquante ou un contexte de disposition où le flottant est inactif. Des pixels blancs ne sont pas des pixels transparents.

Dois-je convertir un PNG en SVG d’abord ? Pas uniquement pour un habillage fondé sur l’alpha. Une image matricielle transparente adaptée peut aussi fournir la forme. Utilise SVG lorsque des besoins d’illustration modifiable ou d’autres exigences vectorielles le justifient.

Les retours à la ligne resteront-ils identiques à chaque taille d’écran ? Non. La largeur disponible, les métriques de police, le texte, la taille de l’image et la disposition du navigateur affectent les lignes. Teste le véritable contenu à plusieurs largeurs.

Sources

1. MDN shape-outside — documente les zones flottantes et les formes d’image dérivées de l’alpha.
2. MDN shape-margin — définit l’espace ajouté autour de la forme d’habillage.
3. MDN shape-image-threshold — définit le seuil alpha des formes d’image.
4. CSS Shapes Module Level 1 — prescrit les limites de boîte flottante, le chargement d’image et le comportement CORS.
5. MDN display et flow-root — explique le contexte de formatage utilisé pour contenir le flottant.

S’il manque une illustration modifiable, prépare un SVG candidat de clipart, inspecte sa silhouette et sa transparence, puis vérifie la véritable disposition du paragraphe dans ta page aux largeurs que tu comptes prendre en charge.