Хранить несколько элементов в SVG и использовать их в качестве фона CSS?

Мне интересно, могу ли я создать несколько "кистей" в одном файле SVG и использовать их, несмотря на мой CSS.

Сейчас у меня есть один SVG файл, который имеет градиент, хранящийся в "defs", и один прямоугольник, который его рисует. Затем я использую этот файл SVG в качестве фонового изображения в своем CSS. Он работает хорошо, но я бы предпочел не иметь миллион отдельных файлов SVG. Я хотел бы объединить как "кисти" вместе в одном файле SVG, что-то вроде CSS-спрайтов или XAML.

Есть ли способ сделать это? Если да, то какой синтаксис указать для фонового изображения CSS, какой элемент SVG из файла svg использовать?

Спасибо за любую помощь.

Ответ 1

Теоретически да, это должно быть возможно. Он еще не полностью определен в спецификации w3c, хотя реализации на этом этапе отличаются.

Обратите внимание, что сам svg позволяет специальный синтаксис фрагментов, поэтому теоретически вы должны иметь возможность ссылаться на разные представления одного и того же файла svg. Это можно использовать для спрайтов CSS/SVG.

Связывание непосредственно с идентификатором вложенного фрагмента svg (или любого другого элемента внутри svg) - это то, что необходимо будет уточнить.

Предполагая, что ссылка на фрагменты из свойства фона CSS работает, тогда возможность, если вы используете XHTML (обслуживающий результирующий файл в виде приложения /xhtml + xml), должна включать только ресурсы svg inline в основном документе, устраняя необходимость для многих отдельных файлов. Это можно сделать как готовый сборник, если вы хотите сохранить svgs отдельно для редактирования. Другая возможность заключается в использовании данных uris.

Ответ 2

Я тоже ищу то же самое, и вот указатели, которые я мог найти:

17.3 Ссылка на содержимое SVG: фрагменты IRI и представления SVG (w3.org)
SVG Stacks (simurai.com)
Могу ли я использовать идентификаторы фрагментов SVG? (caniuse.com)
Улучшенные SVG-спрайты с идентификаторами фрагментов (broken-links.com)

Согласно caniuse.com, есть проблема с поддержкой браузера, но это не мешает вам попытаться наблюдать за будущей эволюцией браузера (в надежде, что в будущем они все будут поддерживать эту очевидную функцию).