Как я должен ссылаться на символы SVG, собранные в один файл SVG?

Question

У меня есть файл символов svg, вот фрагмент кода.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="oval" viewBox="0 0 60 60">
        <title>oval</title>
        <path ... />
    </symbol>
    <symbol id="rectangle" viewBox="0 0 512 512">
        <title>rectangle</title>
        <path ... />
    </symbol>
    <symbol id="star" viewBox="0 0 55.867 55.867">
        <title>star</title>
        <path ... />
    </symbol>
</svg>

Сейчас у меня есть

<object type="image/svg+xml" data="images/icons1.svg"></object>

<svg class="icon">
    <use xlink:href="#size"></use>
</svg>

Моя запись в таблице стилей

svg.icon {
  width: 40px;
  height: 40px;
  color: black;
}

В результате нет изображения.Если я выбираю по всей веб-странице, то там будет очень большой блок (~ 350 x 150 px), где должно быть изображение, но нет изображения.

Как я могу сослаться, скажем, на rectangle из внешнегофайл, в HTML, где он будет использоваться?

Answer 1

Тег <object> не нужен.Все, что он делает, это дает вам пустую область.Инстерад, ссылка на файл и символ в нем:

<svg class="icon">
    <use xlink:href="images/icons1.svg#size"></use>
</svg>

Answer 2

Вы можете использовать символ следующим образом: <svg><use xlink:href="#rectangle"></use></svg>