Как я могу связать много изображений SVG в одном?

Question

Это не плохо, если я загружаю HTML-страницу

img, svg {
    background-color: #eee;
    margin: 20px;
}

<div>
    <img src="circle.svg"/>
    <img src="square.svg"/>
</div>

только с парой изображений SVG

circle.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 400 300" width="400" height="300">
    <circle cx="200" cy="150" r="100"
        stroke="red" fill="blue" stroke-width="10" />
</svg>

square.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 400 300" width="400" height="300">
    <rect x="100" y="50" width="200" height="200"
        stroke="green" fill="gray" stroke-width="10" />
</svg>

, но с более чем сотней изображений SVG сервер получает чрезмерную нагрузку от запросов.

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

Как я могу объединить много SVG-изображений в один?

Answer 1

Похоже, вам нужен SVG-спрайт. Я использую этот трюк все время. Это великолепно. Просто создайте свои svg блоки symbol элементы и вложите их в svg следующим образом:

<svg id="svg-sprite" xmlns="http://www.w3.org/2000/svg">
  <symbol id="svg-circle" viewBox="0 0 400 300" width="400" height="300">
    <circle cx="200" cy="150" r="100" stroke="red" fill="blue" stroke-width="10" />
  </symbol>

  <symbol id="svg-square" viewBox="0 0 400 300" width="400" height="300">
    <rect x="100" y="50" width="200" height="200" stroke="green" fill="gray" stroke-width="10" />
  </symbol>
</svg>

Обратите внимание, что вам не нужен атрибут xlmns для отдельных элементов symbol, а только корень svg. И корень svg не нуждается в атрибуте viewBox, так как он закодирован в дочерних symbol элементах.

Затем вы вызываете символы в других местах HTML-кода следующим образом через тег <use>:

<svg>
  <use xlink:href="#svg-circle"></use>
</svg>

Наконец, вам нужно скрыть спрайт в CSS:

#svg-sprite {
  display: none;
}

---

Вот Скрипка для демонстрации. Удачи!

Answer 2

Ниже приведена комбинация ответов gael и maqam7 с исправлением ошибки и некоторыми подробностями.

Сначала мы объединяем два SVG в один. (Мы пишем наш собственный скрипт, используем макросы редактора, используем один из веб-сайтов, которые делают это, или делают это вручную.)

sprite.svg

<svg id="mysprite" xmlns="http://www.w3.org/2000/svg">
    <symbol id="circle"
        viewBox="0 0 400 300"
        width="400" height="300">
        <circle cx="200" cy="150" r="100"
            stroke="red" fill="blue" stroke-width="10" />
    </symbol>

    <symbol id="square"
        viewBox="0 0 400 300"
        width="400" height="300">
        <rect x="100" y="50" width="200" height="200"
            stroke="green" fill="gray" stroke-width="10" />
    </symbol>
</svg>

Когда нам нужен круг или квадрат, мы use атрибут xlink:href ( устарел , но продолжаем его использовать), который вызывает субспрайт.

<div class="container">
    <svg>
        <use xlink:href="sprite.svg#circle"></use>
    </svg>
    <svg>
        <use xlink:href="sprite.svg#square"></use>
    </svg>
</div>

Нет необходимости включать спрайт в body

<img src="sprite.svg"/>

как на спрайт ссылаются в каждом элементе svg.

Следовательно, нет необходимости скрывать глобальный спрайт.

#svg-sprite {
    display: none;
}

Отображаются только детали.

Одно предупреждение: Chrome загружает img и svg напрямую, но откажется загружать use / xlink:href, если вы не запустите локальный сервер.

Остальные проблемы

Я не уверен, что это оптимально. Возможно, что два запроса продолжают отправляться. Просто кеш будет ловить второй как идентичный. Не навреди. Тем не менее, загрузка один раз через скрытый svg может быть лучшим подходом, если кто-то может заполнить детали.

Answer 3

Вы можете использовать генератор спрайтов SVG, чтобы создать один большой файл со всеми изображениями, выровненными в нем.

Генератор спрайтов SVG также создаст файл CSS, в котором каждый отдельный SVG будет представлен определенным классом.

В вашем HTML вы просто должны называть каждое изображение по имени класса.

Основной файл sprite.css может быть:

.svg {
    background-image: url(sprite.svg) no-repeat;
}
.circle {
    background-position: top left;
    height:300px;
    width: 400px;
}
.square{
    background-position: top right;
    height:200px;
    width: 200px;
}

И тогда в вашем HTML-файле вы можете просто позвонить:

<div>
    <div class="circle"></div>
    <div class="square"></div>
</div>