Andere Inhalte in SVG

Einbetten von Rasterbildern

Ähnlich wie das img-Element in HTML hat SVG ein image-Element, das denselben Zweck erfüllt. Sie können es verwenden, um beliebige Raster- (und Vektor-) Bilder einzubetten. Die Spezifikation fordert, dass Anwendungen mindestens die Dateiformate PNG, JPEG und SVG unterstützen.

Das eingebettete Bild wird zu einem normalen SVG-Element. Das bedeutet, dass Sie Clips, Masken, Filter, Rotationen und alle anderen SVG-Werkzeuge auf den Inhalt anwenden können:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <image
    x="90"
    y="-65"
    width="128"
    height="146"
    transform="rotate(45)"
    href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image/mdn_logo_only_color.png" />
</svg>

Einbetten von beliebigem XML

Da SVG eine XML-Anwendung ist, können Sie natürlich immer beliebiges XML überall in ein SVG-Dokument einbetten. Aber dann haben Sie keine Möglichkeit, zu definieren, wie das umgebende SVG auf den Inhalt reagieren soll. Tatsächlich wird es in einem konformen Viewer überhaupt nicht reagieren, die Daten werden ignoriert. Daher fügt die Spezifikation das <foreignObject> Element zu SVG hinzu. Sein einziger Zweck ist es, ein Container für anderes Markup und ein Träger für SVG-Stilattributen (vor allem width und height, um den Platz, den das Objekt einnimmt, zu definieren) zu sein.

Das foreignObject-Element ist eine gute Möglichkeit, XHTML in SVG einzubetten. Wenn Sie längere Texte haben, ist das HTML-Layout geeigneter und komfortabler als das SVG text-Element. Ein weiteres oft zitiertes Anwendungsbeispiel ist das Einbetten von Formeln mit MathML. Für wissenschaftliche Anwendungen von SVG ist dies eine sehr gute Möglichkeit, beide Welten zu verbinden.

Da das foreignObject ein SVG-Element ist, können Sie, wie im Fall von image, alle SVG-Möglichkeiten damit nutzen, die dann auf dessen Inhalt angewendet werden.

• Zurück
• Weiter