Как получить спрайт со стилями?

Question

olenafront097 @olenafront097

HTML
CSS

Как получить спрайт со стилями?

есть иконки в свг
https://github.com/hampusborgos/country-flags/tree...

нужно иметь возможность манипулировать только классами ( поменяли класс - поменялся флаг)
пример ниже

Вопрос задан более трёх лет назад
170 просмотров

16 комментариев

Подписаться 1 Простой 16 комментариев

Ankhena @Ankhena Куратор тега CSS

На bg position делали растровые спрайты.
Зачем так делать с svg? Если можно просто путь сменить?
sprite.svg#fi

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, есть какой-то плагин?

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

olenafront097, для сборки векторных спрайтов? Полно. Google -> "gulp svg sprite" и т.д.

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, Ankhena, а без галпа нету? что-то не могу найти

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

olenafront097, думаю, что если заменить слово gulp, но online, то найдется.

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, обычный корвертор есть

но именно чтобы был с css

проблемно найти

стран более 200
проблемно самой вводить

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

olenafront097, с css не будет.
Но поверьте, даже 200 и даже руками вы бы написали за то время, что висит этот вопрос.
А если проявить смекалку и пользоваться автозаменой в столбце из имен файлов, так и вовсе несколько минут.

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, так проблема в том что мне нужно на 1х
16 на 16 картинки
на 2х - 64 на 64

это бред? так нельзя тут? нужен один размер? ведь это не тэг img...
просто хотят чтобы не мылилось на ретине

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

olenafront097, у вас же svg, какое мыло? Те кто это хотят, в своём уме?

Написано более трёх лет назад

olenafront097 @olenafront097 Автор вопроса

Ankhena, пробую через свг
width: 50px;
background-image: url(test.svg#ae);
height: 50px;

<svg  class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" id="ae">
    <path fill="#00843D" d="M0 0h6v3H0z"></path>
    <path fill="#fff" d="M0 1h6v2H0z"></path>
    <path d="M0 2h6v1H0z"></path>
    <path fill="#C8102E" d="M0 0h1.5v3H0z"></path>
  </symbol>

не работает

Написано более трёх лет назад

Ankhena @Ankhena Куратор тега CSS

olenafront097,
1. Зачем для svg класс hidden, если он в отдельном файле?
2. Чтобы фон показывался, хотя бы у чего-то должен быть размер, у символа или bg size.

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, все-равно не работает https://jsfiddle.net/gurxf43d/1/

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena,
вот тут генерировала svgsprit.es

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, инлайном вставляется
а через бэграунд нет

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

olenafront097, дело в том, что для использования в bg спрайт должен быть по-другому сделан.
Либо из комбинации symbol + view + use либо из svg, вместо symbol.

Написано более трёх лет назад
olenafront097 @olenafront097 Автор вопроса

Ankhena, такое нагенерировало мне

Написано более трёх лет назад

На bg position делали растровые спрайты.
Зачем так делать с svg? Если можно просто путь сменить?
sprite.svg#fi
olenafront097, для сборки векторных спрайтов? Полно. Google -> "gulp svg sprite" и т.д.
Ankhena, Ankhena, а без галпа нету? что-то не могу найти
olenafront097, думаю, что если заменить слово gulp, но online, то найдется.
Ankhena, обычный корвертор есть

но именно чтобы был с css

проблемно найти

стран более 200
проблемно самой вводить
olenafront097, с css не будет.
Но поверьте, даже 200 и даже руками вы бы написали за то время, что висит этот вопрос.
А если проявить смекалку и пользоваться автозаменой в столбце из имен файлов, так и вовсе несколько минут.
Ankhena, так проблема в том что мне нужно на 1х
16 на 16 картинки
на 2х - 64 на 64

это бред? так нельзя тут? нужен один размер? ведь это не тэг img...
просто хотят чтобы не мылилось на ретине
olenafront097, у вас же svg, какое мыло? Те кто это хотят, в своём уме?
Ankhena, пробую через свг
width: 50px;
background-image: url(test.svg#ae);
height: 50px;

<svg class="hidden"> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" id="ae"> <path fill="#00843D" d="M0 0h6v3H0z"></path> <path fill="#fff" d="M0 1h6v2H0z"></path> <path d="M0 2h6v1H0z"></path> <path fill="#C8102E" d="M0 0h1.5v3H0z"></path> </symbol>

не работает
olenafront097,
1. Зачем для svg класс hidden, если он в отдельном файле?
2. Чтобы фон показывался, хотя бы у чего-то должен быть размер, у символа или bg size.
Ankhena, все-равно не работает https://jsfiddle.net/gurxf43d/1/
Ankhena, инлайном вставляется
а через бэграунд нет
olenafront097, дело в том, что для использования в bg спрайт должен быть по-другому сделан.
Либо из комбинации symbol + view + use либо из svg, вместо symbol.

Answer 1 · 2022-02-15 18:35:07

Антон Шаманов @SilenceOfWinter

та еще зажигалка...

и в чем проблема?

<svg class="f16 ru" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 700" >
...
</svg>

Ответ написан более трёх лет назад

7 комментариев

Как получить спрайт со стилями?

Войдите на сайт