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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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