SVG Embedded Content – Bilder, verschachteltes SVG und HTML

SVG Embedded Content ist SVG-Markup, das auf nicht einfache Zeicheninhalte verweist oder solche Inhalte enthält, zum Beispiel Rasterbilder, eine andere SVG-Datei oder HTML-Markup. Dieses Thema ist wichtig, wenn Sie Diagramme, Berichte, Badges, Infografiken, Vorschauen oder exportierte Grafiken erstellen, die Vektorformen mit Logos, Fotos, Screenshots oder formatierten Textblöcken kombinieren.

Kurzantwort: Verwenden Sie das SVG-Element <image>, um PNG, JPG, GIF, WebP oder ein anderes SVG in einem SVG-Dokument zu platzieren. Verwenden Sie <foreignObject>, wenn Sie HTML-Markup innerhalb von SVG benötigen. Setzen Sie immer x, y, width und height, steuern Sie die Skalierung mit preserveAspectRatio, und stellen Sie sicher, dass verknüpfte Ressourcen verfügbar sind, wenn das SVG geöffnet, gerendert oder konvertiert wird.

1<svg width="300" height="180" xmlns="http://www.w3.org/2000/svg">
2  <image href="logo.png" x="20" y="20" width="120" height="120" />
3</svg>

Grundlagen von SVG Embedded Content

SVG ist nicht auf paths, Formen und Text beschränkt. Es kann auch Inhalte aus anderen Formaten einbinden. Die zwei häufigsten Elemente sind:

Element	Verwendung	Wichtige Hinweise
`<image>`	Rasterbilder wie PNG, JPG, GIF, WebP und ein anderes SVG als Bildressource	Erfordert `width` und `height`; externe Dateien müssen erreichbar sein
`<foreignObject>`	HTML oder anderer XML-Inhalt innerhalb eines SVG-Bereichs	Erfordert den korrekten Namespace und kann in manchen Rendering-Workflows eingeschränkt unterstützt werden

Verwenden Sie eingebettete Inhalte, wenn die Quelle als Bild oder HTML-Fragment erhalten bleiben soll. Verwechseln Sie das nicht mit Vektorisierung. Wenn Sie ein PNG in SVG einbetten, bleibt das PNG ein Pixelbild; es wird nicht in paths umgewandelt. Wenn Sie Raster-zu-Vektor-Tracing benötigen, lesen Sie Bild in SVG in C# konvertieren oder Bilder in Python vektorisieren.

So betten Sie Inhalte in SVG ein

Wählen Sie <image> für ein Rasterbild oder eine verschachtelte SVG-Datei und <foreignObject> für HTML-Markup.
Setzen Sie x und y, um den eingebetteten Inhalt im SVG-Koordinatensystem zu positionieren.
Setzen Sie width und height; ohne diese Werte zeigen viele Renderer den Inhalt nicht an.
Verwenden Sie href für Quelldatei, URL oder data URI, wenn Sie mit <image> arbeiten.
Verwenden Sie preserveAspectRatio, wenn das Quellbild seine Proportionen behalten soll.
Testen Sie das SVG in derselben Umgebung, in der es verwendet wird, besonders vor der Konvertierung in PDF, PNG oder JPG.

Bilder in SVG einbetten

Das SVG-Element <image> platziert eine Bildressource in einem rechteckigen Viewport innerhalb des SVG-Koordinatensystems. Die Ressource kann ein Rasterbild wie PNG oder JPG sein oder eine andere SVG-Datei, die als Bild verwendet wird.

Die wichtigsten Attribute sind:

Attribut	Zweck
`x`, `y`	Position des Bild-Viewports
`width`, `height`	Größe des Bild-Viewports; meist für das Rendering erforderlich
`href`	Pfad, URL oder data URI der Bildressource
`preserveAspectRatio`	Steuert, ob das Bild eingepasst, zugeschnitten oder gestreckt wird

Das folgende Beispiel bettet ein PNG-Bild und eine externe SVG-Datei in ein übergeordnetes SVG ein. Beide Bilder werden mit expliziten Attributen positioniert und skaliert, damit das Layout vorhersehbar bleibt.

1<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
2  <image href="https://docs.aspose.com/svg/images/svg.png" x="20" y="20" width="180" height="180" />
3  <image href="https://docs.aspose.com/svg/files/shapes.svg"
4         x="250" y="10" width="220" height="220"
5         preserveAspectRatio="xMidYMid meet" />
6  <text x="40" y="250">Embedded PNG image</text>
7  <text x="300" y="250">Embedded SVG image</text>
8</svg>

Das gerenderte SVG zeigt zwei eingebettete Ressourcen: links ein PNG-Bild und rechts eine SVG-Datei.

PNG- und verschachtelte SVG-Bilder, eingebettet mit SVG-image-Elementen

Externe Bilddateien und Data-URI-Bilder

Ein <image>-Element kann auf eine externe Datei, eine entfernte URL oder eine Base64-data URI verweisen. Externe Dateien halten das SVG kleiner und leichter editierbar, müssen aber verfügbar bleiben. Data URIs machen das SVG stärker in sich geschlossen, können die Dateigröße aber deutlich erhöhen und das Markup schwerer wartbar machen.

Verwenden Sie externe Dateien für kontrollierte Websites, Dokumentationsbeispiele und editierbare Projekte. Verwenden Sie data URIs, wenn das SVG als eine einzige Datei weitergegeben werden muss und das eingebettete Rasterbild klein genug ist, damit das finale SVG handhabbar bleibt.

1<image href="data:image/png;base64,..." x="0" y="0" width="200" height="120" />

HTML in SVG einfügen

Das Element <foreignObject> erlaubt SVG, Markup aus einem anderen XML-Namespace zu enthalten. In browserbasiertem SVG ist der häufigste Anwendungsfall ein kleines HTML-Fragment. Das ist nützlich für formatierte Labels, Rich-Text-Blöcke oder UI-ähnliche Anmerkungen, die sich in HTML leichter ausdrücken lassen als mit reinem SVG-Text.

Die erforderlichen Attribute sind:

Attribut	Zweck
`x`, `y`	Position des foreignObject-Bereichs
`width`, `height`	Größe des Bereichs, in dem der HTML-Inhalt gerendert werden kann

Das HTML-Wurzelelement innerhalb von <foreignObject> sollte den XHTML-Namespace http://www.w3.org/1999/xhtml deklarieren. Ohne den korrekten Namespace wird der Inhalt möglicherweise nicht gerendert. Für zuverlässiges Rendering setzen Sie wichtige Textstile wie font-size, font-family, line-height und color direkt auf das XHTML-Element oder verwenden Sie eine CSS-Regel, die im Zielrenderer getestet wurde.

1<svg width="500" height="400" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70" cy="70" r="60" fill="red" fill-opacity="0.1" />
3  <foreignObject x="20" y="40" width="210" height="180">
4    <div xmlns="http://www.w3.org/1999/xhtml"
5         style="color:#555; font-family:Arial, sans-serif; font-size:12px; line-height:1.4;">
6      Convert SVG to PNG, PDF, XPS, and major image formats with Aspose.SVG.
7    </div>
8  </foreignObject>
9</svg>

Die Abbildung zeigt einen HTML-Textblock, der in einem SVG-Bereich mit <foreignObject> gerendert wird.

HTML-Textblock in SVG mit foreignObject eingebettet

<foreignObject> ist leistungsfähig, aber weniger portabel als einfache SVG-Formen und SVG-Text. Manche Export-, Sicherheits- oder serverseitige Rendering-Workflows können HTML, CSS, Skripte oder externe Ressourcen in eingebettetem Inhalt einschränken. Wenn das SVG überall konsistent gerendert werden muss, verwenden Sie besser reinen SVG-Text und SVG-Formen.

Häufige Fehler und Korrekturen

Problem	Ursache	Korrektur
Eingebettetes Bild erscheint nicht	`width` oder `height` fehlt auf `<image>`	Fügen Sie explizite Abmessungen hinzu, um den Bild-Viewport zu definieren
Bild verschwindet nach der Konvertierung	Die verknüpfte Datei oder Remote-URL ist für den Renderer nicht erreichbar	Verwenden Sie einen erreichbaren Pfad, konfigurieren Sie Ressourcenzugriff oder betten Sie ein kleines Bild als data URI ein
Bild wird gestreckt	`preserveAspectRatio` fehlt oder ist auf `none` gesetzt	Verwenden Sie `preserveAspectRatio="xMidYMid meet"`, um Proportionen zu erhalten
HTML in `<foreignObject>` ist unsichtbar	Falscher oder fehlender XHTML-Namespace	Verwenden Sie `xmlns="http://www.w3.org/1999/xhtml"` auf dem HTML-Wurzelelement
Ausgabe unterscheidet sich je nach Tool	Unterstützung für `<foreignObject>` variiert je nach Renderer, CSS-Support oder Sicherheitskontext	Verwenden Sie reines SVG-Markup, wenn konsistente Konvertierungsausgabe erforderlich ist, oder halten Sie kritische HTML-Stile inline
SVG-Datei wird zu groß	Großes Rasterbild ist als Base64 eingebettet	Halten Sie große Bilder extern oder optimieren Sie sie vor dem Einbetten

Schnelle Rezepte

PNG-Bild einbetten

1<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
2  <image href="image.png" x="0" y="0" width="200" height="200" />
3</svg>

Externe SVG-Datei einbetten

1<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
2  <image href="icon.svg" x="10" y="10" width="280" height="280" />
3</svg>

Seitenverhältnis des Bildes erhalten

1<svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
2  <image href="photo.jpg"
3         x="0" y="0"
4         width="250" height="250"
5         preserveAspectRatio="xMidYMid meet" />
6</svg>

Kleines HTML-Label hinzufügen

1<foreignObject x="20" y="20" width="160" height="80">
2  <div xmlns="http://www.w3.org/1999/xhtml">HTML label</div>
3</foreignObject>

FAQ – SVG Embedded Content

Kann ich PNG oder JPG in SVG einbetten?

Ja. Verwenden Sie das Element <image> mit href, x, y, width und height. Das Rasterbild bleibt Rasterinhalt innerhalb des SVG; es wird nicht in Vektorpfade umgewandelt.

Kann ich ein anderes SVG in ein SVG einbetten?

Ja. Sie können mit <image href="file.svg"> auf eine andere SVG-Datei verweisen, wenn Sie sie als Bildressource anzeigen möchten. Wenn Sie die Struktur des verschachtelten SVG als Teil des Elterndokuments bearbeiten müssen, betten Sie das SVG-Markup inline ein.

Kann SVG HTML enthalten?

Ja, über <foreignObject>. Das eingebettete HTML sollte den XHTML-Namespace verwenden und im Zielbrowser oder Zielrenderer getestet werden, da die Unterstützung variieren kann.

Warum fehlt mein eingebettetes Bild in PDF- oder PNG-Ausgaben?

Der Renderer kann möglicherweise nicht auf die referenzierte Datei, URL, Schriftart, CSS-Datei oder den HTML-Inhalt zugreifen. Verwenden Sie stabile Ressourcenpfade, betten Sie kleine Assets als data URIs ein oder konfigurieren Sie den Ressourcenzugriff vor der Konvertierung.

Ist das Einbetten eines Bildes dasselbe wie das Konvertieren eines Bildes in SVG?

Nein. Beim Einbetten wird das ursprüngliche Rasterbild in SVG platziert. Beim Konvertieren oder Vektorisieren wird Pixelinhalt in SVG paths und Formen nachgezeichnet.