Другой контент в SVG

Подобно элементу img в HTML, в SVG есть элемент image для той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация требует от приложений поддержки файлов форматов по меньшей мере PNG, JPEG и SVG.

Встроенное изображение становится обычным элементом SVG. Это означает, что вы можете применять обрезки, маски, фильтры, повороты и все другие инструменты SVG к содержимому:

<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>

Поскольку SVG — это приложение XML, вы, конечно, всегда можете встраивать произвольное XML в любой части документа SVG. Но тогда у вас нет способов определить, как окружающий SVG должен реагировать на содержимое. На самом деле, в соответствующем просмотрщике он вообще никак не отреагирует, данные будут пропущены. Поэтому спецификация добавляет элемент <foreignObject> в SVG. Его единственная цель — быть контейнером для других разметки и носителем атрибутов стилей SVG (прежде всего width и height для определения места, которое займет объект).

Элемент foreignObject — хороший способ встроить XHTML в SVG. Если у вас есть более длинные тексты, HTML-разметка более подходит и удобна, чем элемент SVG text. Другой часто упоминаемый случай использования — встраивание формул с помощью MathML. Для научных приложений SVG это очень хороший способ объединить оба мира.

Поскольку foreignObject — это элемент SVG, вы, как и в случае с image, можете использовать любые возможности SVG с ним, которые затем будут применены к его содержимому.