SVG-спрайт во внешнем файле

Ответ 1

Попробуйте следующее:

Создайте файл svg, sprites.svg

Вставьте в него следующее:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
  <path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>

Затем всякий раз, когда вы хотите включить элемент use

<svg class="icon" viewBox="0 0 32 32">
  <use xlink:href="sprites.svg#icon-home" />
</svg>

(В это время у Internet Explorer возникла проблема с этим. IE понадобился бы другой подход. Если вы хотите, я также могу показать, что нужно для IE)

EDIT - Поддержка кросс-браузера: разместите элементы SVG sprite в файле XML и вызовите их в элемент defs.

XML файл с именем sprites.xml:

<?xml version="1.0" encoding="UTF-8"?>
<SPRITES xmlns="http://www.w3.org/2000/svg">
<path id="iconHome"  d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="iconCamera"  d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</SPRITES>

Ответ 2

Существует множество способов встраивания SVG файла в документ без использования встроенного SVG-кода, как в разметке вашего примера. Перемещение SVG во внешний файл, безусловно, обеспечивает гораздо более чистый и редактируемый код. У Chris Coyier есть отличная страница Использование SVG в CSS-Tricks. Ниже приведен краткий обзор методов, описанных в этой статье:

Использование SVG в качестве <img>

Вы можете вставлять SVG файлы в тег <img> так же, как и JPG или PNG или любой другой файл изображения:

<img src="kiwi.svg" alt="Kiwi standing on oval">

Вы можете настроить ширину и высоту изображения SVG либо с помощью атрибутов ширины и высоты линии, либо путем ориентации вашего изображения SVG в документе CSS.

Обратите внимание, что по соображениям безопасности большинство браузеров отключат скрипты, связывание и другую интерактивность SVG файлов, добавленных с тегами <img>.

Использование SVG в качестве фонового изображения

В вашем примере кода вы используете SVG файл как образ контента, но на всякий случай, когда SVG выполняет чисто эстетическую цель, вы можете использовать SVG файл в качестве фонового изображения в CSS:

body {
  background: url(kiwi.svg);
  background-size: 100px 82px;
  /* some other CSS probably */
}

Как и теги <img>, расширенные функции SVG отключены при использовании этого метода.

Использование SVG в качестве <object>

Вы также можете вставить SVG файл в <object>. Использование этой техники позволит вам использовать некоторые расширенные функции SVG, такие как скрипты:

<object type="image/svg+xml" data="kiwi.svg" class="logo"></object>

Включая SVG с PHP

Если вы используете PHP или какой-либо другой серверный код, вы можете вставить SVG файл на страницу программно. Этот метод может быть полезен, если у вас есть еще более сложное приложение, требующее загрузки файлов SVG динамически или что-то в этом роде. В PHP ваш SVG include будет выглядеть примерно так:

<?php include("kiwi.svg"); ?>

Заключение

Есть почти наверняка другие способы добавления SVG файлов на веб-страницу, которую я здесь не рассматривал (iframe, возможно?), но я надеюсь, что вы найдете метод, который работает для вашего приложения в этом списке. Обратите внимание, что с каждым методом есть преимущества и недостатки, поэтому перед выбором метода нужно провести больше исследований. Есть также некоторые методы, которых, вероятно, следует избегать. Например, не используйте тег <embed>, потому что он не является и, вероятно, никогда не будет частью какой-либо спецификации HTML.

Также читайте статью Криса Койея, о которой я упомянул ранее.

Ответ 3

Альтернативный подход заключается в создании файла index.html с включенными файлами спрайтов. Это лучший подход, потому что это означает, что ваши значки SVG загружаются немедленно.

Вы можете сделать это на веб-сервере с помощью Server Side Include:

• Apache Server Side Include with mod_include
• Для S3 и статического хостинга файлов вы можете использовать предварительный процессор, такой как ssi.