SVG-foreignObject-Text: Fehlende Exporttexte beheben

Wenn die Formen eines SVG beim Export erhalten bleiben, seine Beschriftungen aber verschwinden, untersuche die fehlende Beschriftung auf <foreignObject>. Dieses Element kann HTML enthalten, das ein Browser korrekt anordnet, der Zielrenderer aber nicht unterstützt. Ersetze die betroffene Beschriftung durch native SVG-Elemente <text> und <tspan> oder wähle einen Exportweg, der ihr Erscheinungsbild erhält.

Öffne zuerst genau die exportierte Datei in einem Browser. Fehlt die Beschriftung auch dort, prüfe ihren Namespace, ihre Begrenzungen und ihre Stile, bevor du den Importer verantwortlich machst. Behalte die Originalgrafik: Das gesamte Bild nachzuzeichnen ist unnötig, wenn nur der Textcontainer versagt hat.

Warum das Bild erhalten bleibt, während seine Beschriftung verschwindet

Ein SVG kann gewöhnliche Formen mit Inhalten aus einem anderen XML-Namespace mischen. Ein mit <path> gezeichneter Berg und eine mit <circle> gezeichnete Sonne sind natives SVG. Ein Absatz innerhalb von <foreignObject> kann HTML sein, mit eigenen Umbruch- und Layoutregeln. Die foreignObject-Referenz von MDN beschreibt diesen Unterschied.

Die Endung .svg verspricht deshalb nicht, dass jeder Teil dieselben Darstellungsfunktionen verwendet. Eine Zielanwendung kann Berg und Sonne zeichnen, den HTML-Absatz aber weglassen. Eine andere Textfarbe oder eine höhere Exportauflösung fügt diesem Renderer keine HTML-Unterstützung hinzu.

Ein kleiner Test: Nur die Beschriftung ändern

Wir haben eine 480 × 240 große SVG-Karte mit einem Pfad, einem Kreis und den Worten „Keep artwork and labels separate“ erstellt. Die erste Datei verwendet eine HTML-Beschriftung. Die zweite behält dieselben Formen bei und ersetzt lediglich die Beschriftung durch nativen Text mit drei ausdrücklich festgelegten Zeilen.

In unserer Browservorschau erschienen beide Beschriftungen. Die Darstellung derselben Dateien als PNG mit sharp 0.34.4 und dessen mitgeliefertem librsvg 2.61.1 ergab das folgende Ergebnis: Die HTML-Beschriftung verschwand, während die native Beschriftung erhalten blieb. Die Ausgabe mit HTML-Beschriftung war außerdem pixelidentisch mit einer Kontrolldatei, aus der die Beschriftung entfernt worden war. Das ist ein Test dieser Dateien und dieser Rendererversion, kein Kompatibilitätsurteil für jeden Editor.

Die Originaldatei ist klein genug, um sie nachzubauen. Speichere dies als html-label.svg und öffne es in einem Browser:

<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>

Ersetze für die zweite Datei das gesamte foreignObject-Element durch diese Beschriftung und speichere sie als 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>

Der x-Wert beginnt jede Zeile an derselben horizontalen Position. Die dy-Werte verschieben die folgenden Zeilen nach unten. Dabei wird bewusst auf den automatischen HTML-Umbruch verzichtet: Der Autor wählt die Zeilenumbrüche und prüft, ob sie passen. MDN dokumentiert die Positionierung mit tspan, und librsvg führt seine unterstützten SVG-Elemente auf, darunter text und tspan.

Öffne beide Dateien über den tatsächlichen Übergabeweg, etwa deinen Bildkonverter oder PDF-Generator. Vergleiche das gespeicherte Ergebnis, nicht nur die Quellvorschau. Dieselben Abmessungen wie im Beispiel garantieren auf einem anderen Rechner nicht dieselben Schriften.

Wenn die Beschriftung auch im Browser fehlt

Prüfe die serialisierte .svg-Datei und nicht nur die Seite, die sie erzeugt hat. Inline-SVG innerhalb von HTML und ein eigenständiges SVG-Dokument werden in unterschiedlichen Kontexten geparst.

Das Beispiel ordnet das div ausdrücklich http://www.w3.org/1999/xhtml zu. MDN weist darauf hin, dass diese Namespace-Deklaration für den HTML-Inhalt eines eigenständigen SVG-Dokuments erforderlich ist, auch wenn ein Inline-HTML-Beispiel sie weglassen kann. Wenn du Elemente in JavaScript erstellst, verwende für das HTML-Kindelement den passenden Namespace; ein im SVG-Namespace erstelltes div ist kein HTML-Absatzcontainer.

Untersuche anschließend diese Teile der Beschriftung:

• Gib foreignObject ausdrücklich positive width- und height-Werte für den vorgesehenen Beschriftungsbereich.
• Halte seine x- und y-Koordinaten innerhalb der sichtbaren Zeichnung und lasse Platz für alle Zeilen.
• Prüfe display, visibility, Deckkraft und Textfarbe am Container und seinen Kindelementen.
• Stelle sicher, dass die exportierte Datei die nötigen Stile enthält und nicht vom Stylesheet der umgebenden Webseite abhängt.

Im Beispiel stehen alle Beschriftungsstile inline, und das Feld ist 230 Einheiten breit und 110 hoch. Damit entfällt externes CSS als Einflussfaktor. Das macht foreignObject aber nicht mit einem Renderer kompatibel, dem diese Funktion fehlt.

Bei draw.io-Exporten die Beschriftungen in der Quelle konvertieren

Wenn du noch das bearbeitbare Diagramm hast, repariere dort den Beschriftungsexport, bevor du XML von Hand bearbeitest. Die aktuelle draw.io-Exportdokumentation bietet für unterstützte formatierte Beschriftungen Convert Labels to SVG an: Wähle die Formen oder Verbinder aus, öffne im Reiter Text den Abschnitt Advanced und aktiviere das Kontrollkästchen.

Diese Option hat Grenzen. Die Dokumentation schließt Beschriftungen mit Strukturen wie Tabellen, Listen, Links oder Hintergrundfarben von dieser Konvertierung aus. Ist die Option nicht verfügbar, ist das Deaktivieren von Formatted Text und Word Wrap ein weiterer dokumentierter Weg; möglicherweise musst du manuelle Zeilenumbrüche einfügen und das Layout erneut prüfen.

Exportiere eine neue Kopie und öffne sie erneut in der Zielanwendung. Das Ausblenden einer Warnung „Text is not SVG“ konvertiert die Beschriftung nicht. Das Einbetten einer Schrift behebt eine Schriftabhängigkeit, keine fehlende Unterstützung für HTML-Layout.

Halte bei einem illustrierten Diagramm die importierte Grafik von den Beschriftungen getrennt. Der Leitfaden zu eigenen SVG-Formen in draw.io behandelt die Grafikseite dieses Ablaufs.

Das Textformat für die nächste Person wählen

Nativer Text ist eine hilfreiche Reparatur, wenn der Empfänger die Wörter bearbeiten muss, benötigt aber weiterhin verwendbare Schriften. Erscheint die Beschriftung in der falschen Schrift, folge den SVG-Schriftprüfungen, statt sie als dasselbe Problem eines fehlenden Containers zu behandeln.

Die Umwandlung in Pfade funktioniert nur, wenn das Quellwerkzeug den Schriftzug sehen und konvertieren kann. Ein bereits unvollständiger Export kann fehlende Wörter nicht zurückholen, indem du ihn öffnest und seine übrigen Objekte konvertierst. Ein PNG erhält Pixel und ist deshalb ungeeignet, wenn der Empfänger bearbeitbare Wörter oder Vektorschneidpfade braucht.

Wo PerfectVector bei einer illustrierten Karte hilft

Wenn die Illustration der Karte nur als PNG oder JPG existiert, kann PerfectVectors Clipart-zu-SVG-Ablauf einen Vektorkandidaten für diese Grafik erstellen. Behalte den Wortlaut als separates Textelement in deinem Designeditor. Prüfe die Kanten und inneren Zwischenräume der Illustration, ergänze die Beschriftung und teste die zusammengesetzte Datei im Zielrenderer.

Der Leitfaden zur Bildvektorisierung erklärt, wie Pixel zu Pfaden werden. PerfectVector repariert keine HTML-Beschriftungen in einem SVG. Wenn die Illustration bereits gute Pfade hat, behalte sie und ändere nur die fehlerhafte Beschriftung. Ein Screenshot der fehlenden Beschriftung enthält keinen rekonstruierbaren Schriftzug, und das Nachzeichnen sichtbarer Schrift würde Formen statt bearbeitbarer Wörter erzeugen.

Bevor du das reparierte SVG versendest

1. Öffne die exportierte Kopie erneut in einem Browser und in der vorgesehenen Zielanwendung.
2. Stelle sicher, dass jede Beschriftung einschließlich ihrer letzten Zeile sichtbar ist.
3. Prüfe, ob die Grafik weder verschoben noch in ihrer Größe verändert wurde.
4. Prüfe die Schriften oder kontrolliere in Pfade umgewandelte Schrift in der vorgesehenen Größe.
5. Behalte die bearbeitbare Quelle zusammen mit der Übergabekopie.

FAQ

Warum erscheint SVG-Text in Chrome, verschwindet aber beim PNG-Export? Die Beschriftung kann HTML innerhalb von foreignObject sein, während der PNG-Renderer nur eine andere Teilmenge von SVG unterstützt. Prüfe das Markup der fehlenden Beschriftung und rendere eine Version mit nativem Text über denselben Exportweg.

Behebt das Hinzufügen des XHTML-Namespace jeden foreignObject-Export? Nein. Es korrigiert den Namespace des HTML-Inhalts in einem eigenständigen SVG. Die Zielanwendung muss diesen Inhalt weiterhin unterstützen, und die Beschriftung benötigt weiterhin geeignete Abmessungen und sichtbare Stile.

Kann tspan Text wie ein HTML-Absatz umbrechen? Das Beispiel verwendet ausdrückliche Zeilen und vertikale Versätze. Es bildet kein HTML-Absatzlayout nach. Wähle die Zeilenumbrüche passend zum verfügbaren Platz und prüfe sie mit der Zielschrift.

Sollte ich die gesamte Karte vektorisieren, um ihre Beschriftungen wiederherzustellen? Behalte vorhandene Pfade und baue die Beschriftung aus ihrem Originaltext neu auf. Vektorisiere nur Grafik, die als Pixel vorliegt. Nachgezeichnete Schrift ist Geometrie und erhält deshalb keine bearbeitbaren Wörter.

Quellen

1. MDN — foreignObject — Definiert fremde Inhalte, Geometrieattribute und den XHTML-Namespace in eigenständigem SVG.
2. MDN — tspan — Erklärt die Positionierung von Teilen nativen SVG-Texts.
3. draw.io — Textprobleme in exportiertem SVG — Dokumentiert die Konvertierung in native SVG-Beschriftungen, Formatierungsgrenzen und alternative Exporteinstellungen.
4. GNOME — Von Librsvg unterstützte SVG- und CSS-Funktionen — Führt die unterstützten Elemente und Attribute des Renderers auf.

Wenn deine Illustration noch eine Bitmap ist, bereite die Clipart als SVG vor, prüfe ihre Formen und ergänze den Text separat. Prüfe beides in der exportierten Datei, bevor du sie übergibst.