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, но тогда не будет кэшироваться.
Через класс .logo - я менял цвет и размер картинок.
Как вообще распределять иконки, фоны. И например, на десктопном разрешении один логотип, на мобильном другой, не по размерам, а по дизайну - другой логотип, например, ещё и цвет нужно менять при наведении. Могу менять через фон (background-image) картинку исходя из размеров версии (@media), но если это SVG и нужно менять цвет, а через CSS - цвет не изменить, мне 2 версии (2 версии цветов) SVG сохранять и менять через фон в CSS? Если ещё нужно менять цвет логотипа при нажатии, то 3 версии (3 картинки svg) логотипа сохранять?
Максим Ленский, если картинка вставлена через background-image, то разве fill будет работать?
2 разных логотипа SVG, для двух разных разрешений, поэтому мне только через background-image можно их сменить, но цвет так нельзя ведь менять, например при наведении нужен другой цвет, для этого нужно 2 версии логотипа делать, в одноном состоянии, при наведении вторую версию (с другим) цветом ?
1. Через CSS банально удобнее, инлайново задавать размеры особых причин нет.
2. Вставлять иконки в SVG нормальная практика, семантика тут не совсем важна, обычно иконка это часть дизайна, а не контента. Символьный спрайт это часть HTML, поэтому он также жмется и кешируется, тут больше зависит от настройки сервера.
3. Если лого на мобиле и пк схожи, просто управляем через CSS, если нет, то можно использовать два разных лого.
4. Храните иконки вместе с блоком, формируйте спрайт динамически в зависимости от того какие иконки используются.
3. Если лого на мобиле и пк схожи, просто управляем через CSS, если нет, то можно использовать два разных лого.
2 разных логотипа SVG, не просто цветом, а дизайн другой, для двух разных разрешений, поэтому мне только через background-image можно их менять через media? Но ещё нужно менять цвет при наведении у двух логотипов, а цвет так нельзя ведь менять (в CSS), для этого нужно 2 версии (с разными цветами) логотипа делать для каждого - мобильного и десктопного логотипа?
В одном состоянии, при наведении вторую версию (с другим) цветом?
4. Храните иконки вместе с блоком, формируйте спрайт динамически в зависимости от того какие иконки используются.
Я новичок, первый раз вообще буду использовать файловую структуру по BEM, или просто разделять всё на блоки. Поэтому не совсем понимаю как это:
формируйте спрайт динамически в зависимости от того какие иконки используются
Есть каждому блоку задавать нужную ему иконку, то может быть иконок для спрайта не остаться :D Так ведь?) Ну или остается, например, блок соц-сетей, где 3-5 иконок, то там я могу в спрайт их собрать.
