Вставить SVG в SVG?

Ответ 1

Используйте элемент image и ссылайтесь на свой SVG файл. Для удовольствия сохраните следующее как recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>

Ответ 2

Или вы можете вставлять дочерний svg в родительский svg следующим образом:

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

демо:
http://hitokun-s.github.io/demo/path-between-two-svg.html

Ответ 3

Стоит отметить, что когда вы вставляете SVG в другой SVG с помощью:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

тогда встроенный SVG принимает прямоугольную форму с заданными размерами.

То есть, если ваш встроенный SVG представляет собой круг или некоторую фигуру, отличную от квадрата, то он становится квадратом с прозрачностью. Таким образом, события мыши попадают в этот внедренный квадрат и не достигают родительского SVG. Следите за этим.

Лучше использовать шаблон. Чтобы заполнить фигуру, либо круг, либо квадрат, либо даже путь.

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

Затем используйте шаблон следующим образом:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

Теперь ваши события мыши не застревают в прозрачных квадратах изображения!

Ответ 4

Я обнаружил, что использование <image> дает низкокачественный рендер встроенного файла. Однако сработал следующий метод (для встраивания SVG файла в SVG файл - не обязательно для рендеринга на HTML-странице):

• Отредактируйте файл SVG в текстовом редакторе.

• Найдите конец метаданных:

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
  

• Вставьте эту строку после тега группы:

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
  

• В этом случае мы включаем OTHERFILE.svg в файл и все layer1 (первый слой и слой по умолчанию).

• Сохраните это, а затем откройте файл в Inkscape.

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

sodipodi:insensitive="true" 

Другими словами:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

Ответ 5

Мне нужно было встроить SVG в SVG, но также изменить его цвет и применить преобразования.

Только Firefox поддерживает атрибут "transform" для вложенных элементов svg. Изменение цвета <image> также невозможно. Поэтому необходима комбинация обоих.

То, что я закончил, было следующим

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

Это работает, по крайней мере, в Firefox, Chrome и Inkscape.

Это ведет себя так же, как дочерний svg в родительском svg-ответе, за исключением того, что теперь вы можете применить к нему преобразования.

Ответ 6

Примечание xlink:href устарел, просто используйте вместо него href, например

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox, значения width и height (в этом ответе) приведены просто для иллюстрации, соответственно измените компоновку (подробнее).

Поскольку <image> разделяет схожую спецификацию с <img>, то есть он не поддерживает SVG-стилизацию, как упоминалось в ответе Кристиана. Например, если у меня есть следующая строка css, в которой цвет фигуры svg совпадает с цветом шрифта,

svg {
  fill: currentColor;
}

Вышеуказанный стиль не будет применяться, если используется <image>. Для этого вам нужно использовать <use>, как показано в ответе Ника.

Примечание id="layer1" и href="OTHERFILE.svg#layer1" значения в его ответе являются обязательными.

Это означает, что вы должны добавить атрибут id во внешний файл SVG, поэтому вам нужно разместить (измененный) внешний файл SVG самостоятельно (на своем веб-сайте) или где-то еще. Получающийся внешний svg файл выглядит следующим образом (обратите внимание, куда я поместил id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

Значение id может быть любым, я использую "логотип" в этом примере.

Чтобы вставить это SVG,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

Если вы используете вышеупомянутый svg как встроенный в html, вам не нужен атрибут xmlns (по крайней мере, то, что я знаю из svgo).