Как грамотно собрать картинки в проекте?

Question

[vovkka]

Добрый день!
Поделитесь пожалуйста опытом сборки проектов фронта.
Меня интересует то, как собираются картинки.
Посмотрел очень много уроков и разных шаблонов... мало где реализована поддержка спрайтов от dpi.

Если у вас это реализовано грамотно, поделитесь своими идеями, буду очень благодарен.
Что конкретно интересует:
1 сборка спрайта с поддержкой различных dpi --- если это еще актуально
2 вставка svg иконки в html из спрайта
3 как вставить svg фоном? --- это очень важный вопрос... (чтобы не было лишних запросов к серверу)

Всем спасибо!

Answer 1

[ⓒⓢⓢ]

В зависимости от задач
1. gulp.spritesmith - собирает png в один спрайт
2. gulp-svg-sprite - собирает svg в один спрайт
3. Вставка svg спрайтов на страницу

Сейчас возможно уже и не актуально, но к моей практике не прижились
Фоновые svg (плохая кроссбраузерность, нельзя стилизовать из внешних стилей)
base64 (Распирает вёрстку, изменилась картинка - во всех местах везде надо менять картинку, использую крайне редко)

Вставку svg спрайтов на страницу, делаю по такой практике:
На странице делаю контейнер куда группирую все спрайты

<div data-ui="resources" style="display: none;">
   <svg data-ui="icon-pack">
      <g id="svg-search"><path d="M61.8,56.6l-15.1-15C50,37.2,52,31.8,52,26C52,11.7,40.3,0,26,0C11.7,0,0,11.7,0,26c0,14.3,11.7,26,26,26 c6,0,11.5-2,15.9-5.4l15,15L61.8,56.6z M26,44.9c-10.5,0-19-8.5-19-19C7,15.5,15.5,7,26,7c10.5,0,19,8.5,19,19 C45,36.4,36.4,44.9,26,44.9z"></path></g>
      <g id="svg-img"><path d="M0.8,0C0.4,0,0,0.4,0,0.8v22.9c0,0.4,0.4,0.8,0.8,0.8h24.7c1.2,1.5,3,2.5,5,2.5c3.5,0,6.4-2.9,6.4-6.5c0-2.7-1.7-5.1-4-6.1V0.8C33,0.4,32.6,0,32.2,0H0.8z M1.6,1.6h29.8V14c-0.3,0-0.5-0.1-0.8-0.1c-1.2,0-2.3,0.4-3.3,0.9l-3-3.2c-0.2-0.2-0.4-0.3-0.7-0.2 c-0.2,0-0.3,0.1-0.5,0.2l-5.7,5.1l-7.2-8.3c-0.2-0.2-0.5-0.3-0.7-0.3c-0.2,0-0.3,0.1-0.5,0.2l-7.5,7.9V1.6z M17.7,3.3 c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3c1.8,0,3.2-1.5,3.2-3.3C20.9,4.7,19.5,3.3,17.7,3.3z M17.7,4.9 c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C16.1,5.6,16.8,4.9,17.7,4.9z M9.6,10.2l11.1,12.7H1.6v-4.2 L9.6,10.2z M23.7,13.4l2.3,2.5c-1.1,1.2-1.9,2.8-1.9,4.6c0,0.9,0.2,1.7,0.5,2.5h-1.7L18.6,18L23.7,13.4z M30.6,15.5 c2.7,0,4.8,2.2,4.8,4.9c0,2.7-2.2,4.9-4.8,4.9s-4.8-2.2-4.8-4.9C25.7,17.7,27.9,15.5,30.6,15.5z M30.6,16.8c-0.4,0-0.8,0.4-0.8,0.8 v2h-2c-0.4,0-0.8,0.4-0.8,0.8c0,0.5,0.4,0.8,0.8,0.8h2v2c0,0.5,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8v-2h2c0.4,0,0.8-0.4,0.8-0.8 c0-0.5-0.4-0.8-0.8-0.8h-2v-2C31.4,17.1,31,16.8,30.6,16.8z"></path></g>
      <g id="svg-plus"><path d="M15.6,7.1l-5.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.2,0-0.4-0.2-0.4-0.5l0,0l0-5.1l0-0.3C9.8,0.6,9.2,0,8.5,0 C7.7,0,7.1,0.6,7.1,1.3l0,0.2l0,5.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0.3-0.2,0.5-0.5,0.5c0,0,0,0,0,0 c0,0,0,0,0,0l-5,0l-0.3,0C0.6,7.1,0,7.7,0,8.5c0,0.7,0.6,1.4,1.3,1.4h0.2l5.1,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0.3,0,0.5,0.2,0.5,0.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,5.1l0,0.2C7.2,16.4,7.8,17,8.5,17 c0.8,0,1.4-0.6,1.4-1.4l0,0l0-5.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.3,0.2-0.5,0.5-0.5l0,0l5.1,0l0.2,0C16.4,9.9,17,9.2,17,8.5 C17,7.7,16.4,7.1,15.6,7.1L15.6,7.1z"></path></g>
   </svg>
</div>

В документе использую так (для svg передаю ид. спрайта в аттрибуте xlink:href="..."):

<button data-ui="search">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.8 61.5"><use x="0" y="0"  xlink:href="#svg-search"></use></svg>
</button>

На счёт раста и dpi, использую 2 вида спрайта для каждой иконки (обычный монитор и ретина).
Если требуется поддержка 3х и более разновидностей плотности в ход идёт svg.
Но в основном и для мобильных девайсов (пример 120dpi) использую ретиновские спрайты, проблем с качеством иконки не замечал, единственное объём трафика на иконки повышается до ~5-10%

Comments

[vovkka]

JRK_DV интересный способ! А получается если нужно через background воткнуть изображение либо большое (фоновое) как тогда поступить? получается тут запрос не как не сэкономить, да ? а еще такой вопрос, вы после генерации спрайта сами вручную загоняете все в контейнер ?

[ⓒⓢⓢ]

Для больших фоновых (и не только фоновых) изображений есть кеш браузера
Запрос будет, но трафик экономится. При правильно построенном фронте, запросы выполняются асинхронно. С проблемой количества запросов не сталкивался

[ⓒⓢⓢ]

На счёт контейнера, зависит от ситуации, несколько иконок вручную.
svg спрайт полученный от gulp-svg-sprite также содержит контейнер и все идентификаторы иконок, чаще "вставляю" в документ ... Делаю инклуд средствами гулпа