Andere Inhalte in SVG

Ä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 einzubinden. Die Spezifikation verlangt von Anwendungen, dass mindestens PNG-, JPEG- und SVG-Dateiformate unterstützt werden.

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
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  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/Element/image/mdn_logo_only_color.png" />
</svg>

Da SVG eine XML-Anwendung ist, können Sie natürlich immer beliebige XML-Daten irgendwo in ein SVG-Dokument einbetten. Dann haben Sie jedoch keine Möglichkeit, zu definieren, wie das umgebende SVG auf den Inhalt reagieren soll. Tatsächlich wird es in einem konformen Betrachter überhaupt nicht reagieren, die Daten werden ignoriert. Daher fügt die Spezifikation das <foreignObject>-Element zu SVG hinzu. Seine einzige Funktion ist es, als Container für andere Markup-Daten und als Träger für SVG-Stilattributen zu fungieren (vor allem width und height, um den Raum zu definieren, den das Objekt einnimmt).

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 weiterer häufig zitierter Anwendungsfall ist die Einbettung 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-Vorteile damit verwenden, die dann auf seinen Inhalt angewendet werden.

• Zurück
• Weiter