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

Помимо графических примитивов, таких как прямоугольники и круги, 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/Reference/Element/image/mdn_logo_only_color.png" />
</svg>

Встраивание произвольного XML

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

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

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