SVG 中的其他內容

除了矩形和圓形等圖形基元外，SVG 還提供了一組元素，用於在影像中嵌入其他型別的內容。

嵌入光柵影像

與 HTML 中的 img 元素類似，SVG 也具有一個 image 元素來實現相同的功能。您可以使用它來嵌入任意光柵（和向量）影像。規範要求應用程式至少支援 PNG、JPEG 和 SVG 格式檔案。

嵌入的圖片成為一個普通的 SVG 元素。這意味著您可以對內容使用裁剪、蒙版、濾鏡、旋轉以及 SVG 的所有其他工具。

html
<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://mdn.club.tw/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png" />
</svg>

嵌入任意 XML

由於 SVG 是一個 XML 應用程式，因此您當然可以始終在 SVG 文件中的任何位置嵌入任意 XML。但是，您沒有辦法定義周圍的 SVG 如何對內容做出反應。實際上，在符合規範的檢視器中，它將根本不會做出任何反應，資料將被省略。因此，規範在 SVG 中添加了<foreignObject>元素。它的唯一目的是作為其他標記的容器和 SVG 樣式屬性（最重要的是 width 和 height 以定義物件將佔據的空間）的載體。

foreignObject 元素是將 XHTML 嵌入 SVG 的好方法。如果您有較長的文字，HTML 佈局比 SVG text 元素更合適、更舒適。另一個經常被引用的用例是使用 MathML 嵌入公式。對於 SVG 的科學應用，這是將這兩個世界結合起來的一個非常好的方法。

注意：請記住，foreignObject 的內容必須能夠被檢視器處理。獨立的 SVG 檢視器不太可能能夠渲染 HTML 或 MathML。

由於 foreignObject 是一個 SVG 元素，因此您可以在 image 的情況下，使用任何 SVG 的功能，這些功能將應用於其內容。