HTML-Text mit CSS-Floats um eine SVG-Form fließen lassen

Damit HTML-Text um eine SVG-Silhouette fließt, lasse das Bild floaten, gib ihm ausdrückliche Maße und setze shape-outside auf die URL der transparenten SVG. Ergänze shape-margin für Abstand um den Umriss. Der Absatz bleibt gewöhnliches HTML; die SVG liefert das Bild, aus dem seine Umflussgrenze berechnet wird.

Das funktioniert außerhalb der SVG. Es bricht weder ein SVG-text-Element um noch biegt es Buchstaben entlang eines Pfads. Das folgende Beispiel verwendet eine eigene transparente Silhouette und einen vollständigen Absatz, ohne manuell positionierte Wörter oder eingefügte Zeilenumbrüche.

Wähle das tatsächlich benötigte Textlayout

Die SVG-Datei enthält nicht das Layout des umgebenden Absatzes. Kopierst du das Bild in ein anderes Dokument, wird diese HTML/CSS-Beziehung nicht übertragen.

1. Gib dem Float eine Größe und ein transparentes Bild

Die MDN-Referenz zu shape-outside beschreibt die Eigenschaft als Möglichkeit, den Float-Bereich zu ändern, um den benachbarter Inline-Inhalt fließt. Beim Standardwert folgt dieser Bereich der Margin-Box des Floats. Eine Bild-URL leitet die Form dagegen aus dem Bildalpha, also seiner Transparenz, ab.

Die sichtbare Farbe bestimmt die Grenze nicht. Ein deckend weißer Hintergrund besitzt ebenfalls Alpha und kann eine Illustration wie ein Rechteck wirken lassen. Prüfe die Datei selbst, nicht nur das Aussehen weißer Grafik auf einer weißen Seite. Erhalte die Transparenz außerhalb der Silhouette.

Speichere diese eigene Grafik als 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>

Ihre intrinsische Größe beträgt 150 × 180, und das CSS verwendet dieselbe Breite und Höhe. Ein gleichbleibendes Seitenverhältnis macht die Beziehung zwischen angezeigter Grafik und Formbild leicht prüfbar.

Das Bild in diesem Beispiel ist dekorativ und besitzt deshalb ein leeres alt-Attribut. Gib einem inhaltlich bedeutsamen Bild eine passende Textalternative für deine Seite. Textumfluss vermittelt seine Bedeutung nicht automatisch.

2. Führe das vollständige HTML-Beispiel aus

Speichere dies als index.html neben 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>

Stelle den Ordner über HTTP bereit, etwa mit python -m http.server 8000, und öffne http://localhost:8000/index.html. Die beiden Dateien teilen dann denselben Ursprung. Eine lokale Datei-URL ist nicht die hier getestete Ladeumgebung.

Ändere class="sample narrow contour" zu class="sample narrow", um den normalen rechteckigen Float-Umfluss zu vergleichen. Ändere narrow zu wide, um die 520 Pixel breite Spalte zu testen. Absatz und Bild bleiben unverändert.

Die display-Referenz beschreibt flow-root als Erzeugung eines Blockformatierungskontexts. Hier schließt es das gefloatete Bild in seinem Beispiel ein. Es positioniert nicht die Wörter; das übernimmt das Inline-Layout des Browsers.

3. Prüfe die gerenderten Zeilen bei mehreren Breiten

Wir führten vier sichtbare Beispiele in Chromium 155 mit Arial bei 16px und einer Zeilenhöhe von 24px aus. Das Bild blieb 150 × 180px groß, während die Spalten feste Inhaltsbreiten von 360px und 520px hatten. Beide Umrissbeispiele verwendeten shape-margin: 10px und shape-image-threshold: 0.5.

Der schmale Umriss änderte den Umbruch, ohne die Gesamtzahl der Zeilen zu verringern. Bei der größeren Breite benötigte das Umrissbeispiel eine Zeile weniger als seine rechteckige Kontrollversion.

Wir maßen native DOM-Range-Rechtecke für jedes Wort und gruppierten sie nach vertikaler Position. Das sind Messungen gerenderter Textzeilen, kein Zugriff auf die internen Zeilenboxobjekte eines Browsers. Außerdem prüften wir berechnete Float- und Formeinstellungen, Maße des geladenen Bilds und Alphastichproben im tatsächlichen SVG-Bild.

Bei beiden Breiten begannen einige Umrisszeilen links von der 150px-Ausschlusskante des rechteckigen Floats. Nach dem Bild nutzte der Text außerdem wieder die volle Spaltenbreite. Diese Beobachtungen zeigen, dass der getestete Umriss das tatsächliche Layout beeinflusste, statt nur das Aussehen eines Bildschirmfotos zu ändern.

Die genauen Zeilen und Koordinaten hängen von Schrift, Browser, Absatz, Bild und Breite ab. Ein anderer Satz oder eine andere geladene Schrift kann sie verändern. Teste deine tatsächlichen Inhalte in schmalen und breiten Größen, statt diese Zahlen als Gestaltungskonstanten zu übernehmen.

4. Behandle Formabstand, Alpha und Laden getrennt

shape-margin erweitert die Umflussform, um Platz zwischen ihr und dem Text zu schaffen. Die 10px hier sind eine Layoutentscheidung, kein gemessener Mindestabstand zwischen jeder sichtbaren Glyphe und jedem Punkt der Illustration.

Die CSS-Shapes-Spezifikation behält das normale Boxmodell bei und beschränkt die Wirkung der Form auf die Margin-Box des Floats. Ein großer Formabstand gibt dem Bild keine größere CSS-Box. Wenn dein Entwurf mehr Platz benötigt, prüfe auch die Float-Maße und gewöhnlichen Außenabstände.

shape-image-threshold wählt den Alphagrenzwert, mit dem die Bildform extrahiert wird. Die ursprüngliche Beispieldatei besitzt einen vollständig transparenten Außenbereich und eine deckende Grafik in der Mitte. Weiche Schatten oder durchscheinende Ränder erfordern eine bewusste Grenzwertwahl und Sichtprüfung. Eine Grenzwertänderung kann einen deckenden Hintergrund nicht transparent machen.

Die Bild-URL muss außerdem zum Laden als Form geeignet sein. CSS Shapes schreibt für Bild-URLs eine CORS-Anfrage vor und fällt bei fehlgeschlagenem Laden auf keine benutzerdefinierte Form zurück. Die SVG neben der Seite bereitzustellen vermeidet in diesem Beispiel eine Abhängigkeit von einem anderen Ursprung. Liegt sie auf einem CDN, konfiguriere die CORS-Antwort dieses Servers und prüfe Anfrage und Layout. Dass das Bild in einem img-Element erscheint, belegt allein nicht den Erfolg der Formanfrage.

5. Erhalte die Textreihenfolge und prüfe die fertige Seite

Alle vier getesteten Absätze behielten exakt denselben Text in einem Textknoten, ohne br-Elemente oder wortweise Positionierung. CSS änderte die sichtbaren Zeilenumbrüche, ohne die DOM-Reihenfolge des Absatzes umzuschreiben. Wir führten keine Screenreader-Sitzung durch und leiteten aus dieser Quelltextprüfung kein Barrierefreiheitsaudit ab.

Halte den Absatz lesbar, wenn das Bild nicht verfügbar ist oder sich das Layout ändert. Bei sehr schmalen Spalten kann eine einfachere Anordnung mit dem Bild über dem Absatz leichter lesbar sein als ein schmaler Textstreifen daneben. Prüfe deinen eigenen Umbruchpunkt und Inhalt, statt den Text zu verkleinern, um einen Umrisseffekt zu erzwingen.

Der Float reserviert weiterhin eine CSS-Box. Formumfluss macht daraus kein allgemeines Hindernis, das Text von allen Seiten umfließt. In diesem Beispiel mit linkem Float fließt der benachbarte Text rechts vorbei und setzt sich darunter fort.

Behebe das Symptom an seiner Ursache

Wenn eine geeignete flächige Illustration nur als Rasterbild erhalten ist und du bearbeitbare Silhouettengrafiken brauchst, kann PerfectVectors Clipart-zu-SVG-Ablauf einen Kandidaten gewinnen. Vergleiche Umriss und transparente Umgebung mit der Vorlage und teste anschließend die tatsächliche SVG-URL auf deiner Seite. Auch ein transparentes Rasterbild kann eine bildbasierte CSS-Form liefern. SVG ist nicht allein zum Aktivieren des Alphaumflusses erforderlich.

Behalte eine vorhandene saubere SVG, wenn du eine hast. Vektorisierung erstellt weder das umgebende HTML-Layout noch erhält sie für dich die Absatzsemantik oder garantiert das Umflussergebnis eines bestimmten Browsers.

Häufige Fragen

Lässt shape-outside Text innerhalb einer SVG umbrechen? Nein. Dieses Beispiel ändert den HTML-Inline-Fluss neben einem gefloateten Bild. SVG-Beschriftungen, in SVG eingebettetes HTML und einem Pfad folgender Text sind andere Layoutaufgaben.

Warum fließt Text bei meiner transparent wirkenden SVG weiterhin um ein Rechteck? Prüfe auf einen deckenden Hintergrund in der Datei, eine fehlgeschlagene Formbildanfrage, fehlende Float-Maße oder einen Layoutkontext, in dem Float nicht aktiv ist. Weiße Pixel sind nicht dasselbe wie transparente Pixel.

Muss ich eine PNG zuerst in SVG umwandeln? Nicht allein für alphabasierten Umfluss. Ein geeignetes transparentes Rasterbild kann die Form ebenfalls liefern. Verwende SVG, wenn bearbeitbare Grafiken oder andere Vektoranforderungen dies rechtfertigen.

Bleiben die Zeilenumbrüche bei jeder Bildschirmgröße gleich? Nein. Verfügbare Breite, Schriftmetriken, Text, Bildgröße und Browserlayout beeinflussen die Zeilen. Teste den tatsächlichen Inhalt bei mehreren Breiten.

Quellen

1. MDN shape-outside — dokumentiert Float-Bereiche und aus Alpha abgeleitete Bildformen.
2. MDN shape-margin — definiert zusätzlichen Abstand um die Umflussform.
3. MDN shape-image-threshold — definiert den Alphagrenzwert für Bildformen.
4. CSS Shapes Module Level 1 — spezifiziert Float-Box-Grenzen, Bildladen und CORS-Verhalten.
5. MDN display und flow-root — erklärt den Formatierungskontext, der den Float einschließt.

Wenn bearbeitbare Grafiken fehlen, bereite einen Clipart-SVG-Kandidaten vor, prüfe Silhouette und Transparenz und verifiziere das tatsächliche Absatzlayout auf deiner Seite bei den Breiten, die du unterstützen möchtest.