Адаптивное изображение внутри SVG - PullRequest
0 голосов
/ 07 декабря 2018

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 кажется слишком большим.Ирония заключается в том, что значки являются растровыми, с трудным векторизованным пиксельным искусством, поэтому у меня не может быть одного набора значков для всех точек на дюйм.

Есть ли способ выбрать нужные значки по медиазапросу без их встраиваниявсе

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Так как невозможно загрузить условно: либо встраивать, либо нет, я должен сделать несколько хитрых проверок относительно наборов растров.Технически это не прямой ответ, но на тот случай, если кому-то понадобится.

Я решил пойти с куки.Люди обычно посещают тот же сайт, на котором размещены эти SVG.Я бы установил cookie для их DPI, а затем все обслуживаемые SVG-файлы выбирали бы подходящие изображения DPI.Для людей, которые еще не посещали сайт, я бы выбрал нюхание UA: мобильные телефоны и максы получают 2 раза, другие - 1 раз.Или только 1x для всех.

0 голосов
/ 07 декабря 2018

Вы не можете загружать внешние файлы из SVG, используемого в теге <img> (или в других контекстах «изображения», таких как фоновые изображения CSS).Из соображений безопасности и производительности SVG, используемый в качестве изображения, должен вести себя как любое другое изображение - один файл, без дополнительных ресурсов и без сценариев.

Если вы не хотите использовать встроенный SVG, вы можете подуматьвстраивание файла SVG с тегом <object> или <iframe>.Тем не менее, я рекомендую вам на самом деле тщательно проверить, загружают ли браузеры файлы изображений, даже если они не используют их из-за CSS.

...