@avprinciple

Как правильно вставлять и собирать спрайт SVG?

Cобираешь в спрайт, чтобы использовать через use, в html тебе нужно прописывать обязательно width и auto для svg, чтобы картинка не отображалась/увеличивалась на весь экран. Но когда ты идёшь в CSS, чтобы стилизовать, то размер не изменить из CSS.

Задача: для мобильной версии изменить размер иконки с 70px до 30px. Она будет обрезаться, и не будет увеличиваться. Проблема решается через viewBox, не задавая при этом width and height SVG элементу в html, когда инлайнишь из спрайта через use. Тогда размеры в CSS контролируются.

Несколько вопросов:

Первый: говорят нужно задавать width и height svg, как на самом деле быть, если учитывать проблему, которую я описал выше? Контролировать ширину и высоту через CSS можно? Или как в такой ситуации делать?

Второй: правильно ли, исходя из семантики, иконки вставлять/прописывать в HTML, а не через фон в CSS (они за стеклом - никак не поуправлять ими).

Инлайн svg вне спрайта (use) - не кешируется, правильно ли собирать svg изображения (лого, что-то там ещё) и иконки в спрайт, инлайнить всё через use, задавать viewBox (чтобы управлять размером), через CSS задавать размеры и менять им цвет.

Третий: Как вообще распределять иконки, фоны. И например, на десктопном разрешении один логотип, на мобильном другой, не по размерам, а по дизайну - другой логотип, например, ещё и цвет нужно менять при наведении. Могу менять через фон (background-image) картинку исходя из размеров версии (@media), но если это SVG и нужно менять цвет, а через CSS - цвет не изменить, мне 2 версии (2 версии цветов) SVG сохранять и менять через фон в CSS?

БЭМ вопрос:

Как спрайт отображать правильно в структуре файлов по БЭМ, каждому блоку - своя разметка, стиль, скрипт, “картинка”. Если “картинка” для определённого блока, элемента лежит в спрайте (в отдельном - в общем документе), как правильно делать?
Например, у меня блок “поиск” - создаю папку search там html, scss, js, img - а иконки нет, она в спрайте.

Или каждому блоку - нужно отдельно иконку/картинку SVG (без спрайтов), вставлять в HTML, но тогда не будет кэшироваться.
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 2
LenovoId
@LenovoId
what the fuck ?
Примерно так это делается
<svg style="display:none;">
   <defs>
     <symbol id="icon1">
        <path d="M......z" />
     </symbol>
     <symbol id="icon2">
        <path d="M......z" />
     </symbol>
     <symbol id="icon3">
        <path d="M......z" />
     </symbol>
   </defs>
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon1">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon2">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon3">
</svg>
Ответ написан
werty1001
@werty1001
undefined
1. Через CSS банально удобнее, инлайново задавать размеры особых причин нет.
2. Вставлять иконки в SVG нормальная практика, семантика тут не совсем важна, обычно иконка это часть дизайна, а не контента. Символьный спрайт это часть HTML, поэтому он также жмется и кешируется, тут больше зависит от настройки сервера.
3. Если лого на мобиле и пк схожи, просто управляем через CSS, если нет, то можно использовать два разных лого.
4. Храните иконки вместе с блоком, формируйте спрайт динамически в зависимости от того какие иконки используются.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы