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 einzubetten. Die Spezifikation fordert Anwendungen auf, mindestens PNG-, JPEG- und SVG-Dateiformate zu unterstützen.

Das eingebettete Bild wird zu einem normalen SVG-Element. Das bedeutet, dass Sie Clips, Masken, Filter, Drehungen und alle anderen Werkzeuge von SVG 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 beliebiges XML überall 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 Viewer überhaupt nicht darauf reagieren, die Daten werden weggelassen. Daher fügt die Spezifikation das <foreignObject>-Element zu SVG hinzu. Sein einziger Zweck ist es, ein Container für anderes Markup zu sein und ein Träger für SVG-Stilattributen (insbesondere width und height, um den Platz zu definieren, den das Objekt einnehmen wird).

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 häufig 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, jegliche SVG-Vorteile damit verwenden, die dann auf seinen Inhalt angewendet werden.

• Zurück
• Weiter