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

Question

[avprinciple]

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, но тогда не будет кэшироваться.

Answer 1

[Максим]

Примерно так это делается

<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>

Comments

[avprinciple]

Приветствую!
Спрайт я собрал, лежал в отдельном файле и через use в html я вставлял SVG, всё хорошо:

<svg class="logo" viewbox="0 0 100 100">
   <use xlink:href="sprite.svg#icon1">
</svg>

Через класс .logo - я менял цвет и размер картинок.

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

[Максим]

avprinciple, в css можно менять цвет для этого надо из svg убрать все упоминания о style

[avprinciple]

Максим Ленский, если картинка вставлена через background-image, то разве fill будет работать?

2 разных логотипа SVG, для двух разных разрешений, поэтому мне только через background-image можно их сменить, но цвет так нельзя ведь менять, например при наведении нужен другой цвет, для этого нужно 2 версии логотипа делать, в одноном состоянии, при наведении вторую версию (с другим) цветом ?

[Максим]

avprinciple, если в svg написано то будет работать

Answer 2

[Олег]

1. Через CSS банально удобнее, инлайново задавать размеры особых причин нет.
2. Вставлять иконки в SVG нормальная практика, семантика тут не совсем важна, обычно иконка это часть дизайна, а не контента. Символьный спрайт это часть HTML, поэтому он также жмется и кешируется, тут больше зависит от настройки сервера.
3. Если лого на мобиле и пк схожи, просто управляем через CSS, если нет, то можно использовать два разных лого.
4. Храните иконки вместе с блоком, формируйте спрайт динамически в зависимости от того какие иконки используются.

Comments

[avprinciple]

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

2 разных логотипа SVG, не просто цветом, а дизайн другой, для двух разных разрешений, поэтому мне только через background-image можно их менять через media? Но ещё нужно менять цвет при наведении у двух логотипов, а цвет так нельзя ведь менять (в CSS), для этого нужно 2 версии (с разными цветами) логотипа делать для каждого - мобильного и десктопного логотипа?
В одном состоянии, при наведении вторую версию (с другим) цветом?

4. Храните иконки вместе с блоком, формируйте спрайт динамически в зависимости от того какие иконки используются.

Я новичок, первый раз вообще буду использовать файловую структуру по BEM, или просто разделять всё на блоки. Поэтому не совсем понимаю как это:

формируйте спрайт динамически в зависимости от того какие иконки используются

Есть каждому блоку задавать нужную ему иконку, то может быть иконок для спрайта не остаться :D Так ведь?) Ну или остается, например, блок соц-сетей, где 3-5 иконок, то там я могу в спрайт их собрать.

[Олег]

avprinciple, 1. Простые манипуляции с цветом у SVG можно делать через CSS.
2. Спрайт обычно собирает система сборки.