Как стать автором
Обновить

Комментарии 26

Дизайну и отзывчивости надо учиться в конторе делавшей терминалы для покупки/пополнения проездных в московском метро. Каждое пополнение «тройки» — боль переходящая в ярость
Когда мы в Acronis начнем делать терминалы для покупки/пополнения проездных, обязательно учтем неудачный опыт других компаний. Спасибо, что поделились вашей болью.
НЛО прилетело и опубликовало эту надпись здесь
Какой способ работы с SVG, на ваш взгляд, самые оптимальный? SVG — спрайты? Держать все SVG в JS и кешировать на стороне пользователя? Использовать img или background-image? Работать с растровыми картинками долго и муторно, в нескольких продуктах мы сейчас используем PNG спрайты и это боль, особенно, когда есть 18 цветовых схем и нужно добавить новую иконку.
Я использую SVG Symbol — по сути спрайты подгружаемые через JS в localstorage и Inject в HTML.
Символы через тег use не поддерживаются в IE 11. Есть svg4everybody, но с ним есть проблемы — при динамическом изменении иконок оно будет моргать и залипать. Т.е. SVG — только если на юзеров IE 11 пофиг, лишь бы работало.
НЛО прилетело и опубликовало эту надпись здесь
А покажите подробней npm run remove-mask
Тема интересная, я то руками правлю.
Руками? Каждый SVG отдельно?
у меня не так много, 20-30 иконок пройтись после SVGO не так и трудно.
С технической стороны мы реализовали все очень просто. Написали регулярки, которые проходят по SVG и вычищают все лишнее. Работает решение при определенных условиях.
1. все иконки — это глифы, то есть одноцветные
2. все иконки экспортированы из Sketch
3. все иконки экспортированы через slice
Это дает нам примерно одинаковый код для всех иконок.

        replace = [
            {reg : / fill="(.*?)"/m,            post : ''},
            {reg : /(\s*)<\/defs[\s\S]*<\/g>/m, post : ''},
            {reg : /(\s*)<defs>/m,              post : ''},
            {reg : / id="(.*?)"/m,              post : ''},
            {reg : /xmlns:xlink="(.*?)"/m,      post : ''},
            {reg : /(\s*)<g[\s\S]*?>/m,         post : ''},
            {reg : /(\s*)<\/g>/m,               post : ''},
            {reg : /<svg/m,                     post : '<svg fill="#000"'},
            {reg : / transform="(.*?)"/m,       post : ''},
            {reg : / fill-rule="(.*?)"/m,       post : ''},
        ],
спасибо. В принципе я делал подобное решение, но у меня бывают слишком много разных иконок.
Вот дизайнеры молодцы, да.
А остальные…
Постоянно сталкиваюсь что акронис отказывается восстановить полный образ диска сделанный всего 5 минут назад, обратно на этот же диск, потому что внезапно для восстановления полного образа диска недостаточно места. Лечится перезапуском акрониса.
Что используете? Acronis Backup или True Image? Интересно было бы получить общий фидбэк по продукту, что удобно, что нет, с какими проблемами, помимо озвученной, и как часто сталкиваетесь. С прошлой статьи мы получили очень ценный отзыв про True Image от пользователя Хабра, не хотелось бы нарушать хорошую традицию. Готов пообщаться в ДМ.
Чем больше вы «улучшаете» дизайн Acronis True Image, тем сложнее разобраться в его интерфейсе. Термин «интуитивно понятный» давно вычеркнут из словаря компании Acronis
Stroy71, если расскажете более подробно, где и какие трудности с продуктом у вас возникают, я обязательно передам ваш отзыв ребятам, которые занимаются True Image. Нам очень важен фидбэк от пользователей.
до редактирования, скетчовский
По той же ссылке.
а, сразу не увидел сори, вьюбокс в итоге у вас меняется.
Конечно меняется. Зачем в профессиональном сообществе писать о том, что работает только на гифках?
На самом деле подошел к прочтению данной статьи с небольшим предрассудком.
А что вы делаете с иконками в которых больше 1 цвета?
Мы не используем иконки, в которых есть несколько цветов. Только одноцветные глифы.
Подход у вас действительно интересный.
Расскажу, как мы работаем с иконками.
Иконочный шрифт мы не используем.
У нас есть 2 типа иконок,
одноцветные
и цветные(иконки и мелкие изображения).
Все они в формате svg.
Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется.
Выглядит это так:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="close" viewBox="0 0 24 24">
    <path></path>
  </symbol>

  <symbol id="search" viewBox="0 0 24 24">
    <path></path>
  </symbol>
</svg>


И инклюдится на страницу он так:
<svg class="alert__ico">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
</svg>


И стили для него:
svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}


Для цветных используется css спрайт:
.icon-ico-color:after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D...;
}


И стили для него:
[class*='icon-']:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat; 
}


Загружается css спрайт асинхронно
<script>
  $(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='../css/icons.min.css' />");
  })
</script>


Генерируется это, понятное дело, галпом.

Что дает такой подход
Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.
<div class="elem__ico">
  <svg class="alert__ico">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
  </svg>
</div>

<div class="elem__ico  icon-ico-color"></div>



Для того, чтоб посмотреть какие есть иконки надо просмотреть 2 папки, что не очень удобно, и потому сейчас я планирую сделать библиотеку на подобии вашей, то есть сгенерировать html файл.
Подход на спрайтах мне нравится гораздо больше как минимум из-за качества иконок на выходе. SVG шрифты имеют массу своих особенностей типа хинтинга, когда иконка может слегка плыть из-за размера окна браузера или едва заметных расхождений в рендеринге на разных операционках. Но, к сожалению, пока что отказаться от использования шрифтов мы не можем.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий