TL; DR: можно ли загружать другие изображения на основе медиа-запроса из svg, включенного через тег img
?
Я создаю кучу файлов SVG с таблицами с текстом и значками внутри.С точки зрения семантики PDF был бы лучшим контейнером, но мне нужно хранить такие «документы» как изображения для бесшовного встраивания / предварительного просмотра, и это, вероятно, не решит мою проблему.Итак, история о иконках.
Я написал встроенные стили с медиа-запросами, выбирая значки, соответствующие DPI экрана пользователя.Иконки уже объединены в спрайты, поэтому я использую pattern/image[xlink:href]
+ fill:url(#id)
.Все работает как нужно, когда я встраиваю svg прямо в HTML (острова DOM).Но если я встраиваю svg через тег img
(т.е. <img src="foo.svg">
), он вообще не загружает значки, не говоря уже о их отображении.
Я понимаю, что могу вставлять значки через data-URL,но встраивание иконок для всех поддерживаемых экранных dpis кажется слишком большим.Ирония заключается в том, что значки являются растровыми, с трудным векторизованным пиксельным искусством, поэтому у меня не может быть одного набора значков для всех точек на дюйм.
Есть ли способ выбрать нужные значки по медиазапросу без их встраиваниявсе