• Как работать с картинками на gulp.js?

    ivandata
    @ivandata
    Веб разработчик
    Попробую ответить.
    1. Растр в спрайты. Под ретину можно 2@
    2. Есть несколько способов хранить и использовать svg спрайты. SVG спрайт — это всего лишь файл где поиск по svg элементам происходит по id.
    <symbol viewBox="0 0 21 21" id="add_icon">
        <title>add</title>
        <path d="M10.5 1C5.3 1 1 5.2 1 10.5S5.3 20 10.5 20s9.5-4.3 9.5-9.5S15.7 1 10.5 1zm0 1c4.7 0 8.5 3.8 8.5 8.5S15.2 19 10.5 19 2 15.2 2 10.5 5.8 2 10.5 2zM10 6v4H6v1h4v4h1v-4h4v-1h-4V6h-1z"/>
    </symbol>

    На странице используем тег 'use', где атрибут xlink:href — это ссылка на svg, у с указанием идентификатора, например:
    <svg class="ico-svg">
      <use xlink:href="/ico/ico-set.svg#add_icon"></use>
    </svg>

    Для поддержки отсталых браузеров используем полифил https://github.com/jonathantneal/svg4everybody. Управляем цветом через свойство fill
    3. Элементы интерфейса, такие, как иконки, лучше конечно в векторе хранить. Растр — сжимать.
    4. Мелкие элементы в base64. habrahabr.ru/post/116538
    Все это собирается, пакуется и т.д. сборщиками, все верно.
    Для SVG у нас используется очень замороченая система, которая: собирает svg-файлы от дизайнеров, клеит из них спрайт, генерирует png спрайты в разных цветах и генерирует стили для них. А еще парсит превью всего этого на отдельной странице, для теста.
    Мы используем gulp и плагины для этого:
    https://www.npmjs.com/package/gulp-optipng
    https://www.npmjs.com/package/gulp-raster
    https://www.npmjs.com/package/gulp.spritesmith
    https://www.npmjs.com/package/gulp-svg-sprite-plus
    https://www.npmjs.com/package/gulp-imagemin

    Еще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.
    Ответ написан