Можно ли из одной SVG обратиться к другой

«Можно ли из одной SVG обратиться к другой» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно с помощью элемента <use>. Он позволяет повторно использовать SVG-элементы из других документов или текущего.

Пример:

<svg>
  <defs>
    <circle id="myCircle" cx="50" cy="50" r="40" fill="blue"/>
  </defs>
  <use href="#myCircle" x="100" y="0"/>
</svg>

Обращение к внешнему SVG:

<svg>
  <use href="external.svg#icon-id"/>
</svg>

Ограничения:

  • Браузеры могут блокировать кросс-доменные запросы (CORS).
  • Внешний SVG должен быть доступен по URL.
  • Поддерживается в современных браузерах.