Comments 26
Дизайну и отзывчивости надо учиться в конторе делавшей терминалы для покупки/пополнения проездных в московском метро. Каждое пополнение «тройки» — боль переходящая в ярость
-5
UFO just landed and posted this here
Какой способ работы с SVG, на ваш взгляд, самые оптимальный? SVG — спрайты? Держать все SVG в JS и кешировать на стороне пользователя? Использовать img или background-image? Работать с растровыми картинками долго и муторно, в нескольких продуктах мы сейчас используем PNG спрайты и это боль, особенно, когда есть 18 цветовых схем и нужно добавить новую иконку.
0
Символы через тег use не поддерживаются в IE 11. Есть svg4everybody, но с ним есть проблемы — при динамическом изменении иконок оно будет моргать и залипать. Т.е. SVG — только если на юзеров IE 11 пофиг, лишь бы работало.
0
А покажите подробней npm run remove-mask
Тема интересная, я то руками правлю.
Тема интересная, я то руками правлю.
0
Руками? Каждый SVG отдельно?
0
у меня не так много, 20-30 иконок пройтись после SVGO не так и трудно.
0
С технической стороны мы реализовали все очень просто. Написали регулярки, которые проходят по SVG и вычищают все лишнее. Работает решение при определенных условиях.
1. все иконки — это глифы, то есть одноцветные
2. все иконки экспортированы из Sketch
3. все иконки экспортированы через slice
Это дает нам примерно одинаковый код для всех иконок.
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 : ''},
],
0
Вот дизайнеры молодцы, да.
А остальные…
Постоянно сталкиваюсь что акронис отказывается восстановить полный образ диска сделанный всего 5 минут назад, обратно на этот же диск, потому что внезапно для восстановления полного образа диска недостаточно места. Лечится перезапуском акрониса.
А остальные…
Постоянно сталкиваюсь что акронис отказывается восстановить полный образ диска сделанный всего 5 минут назад, обратно на этот же диск, потому что внезапно для восстановления полного образа диска недостаточно места. Лечится перезапуском акрониса.
+1
Что используете? Acronis Backup или True Image? Интересно было бы получить общий фидбэк по продукту, что удобно, что нет, с какими проблемами, помимо озвученной, и как часто сталкиваетесь. С прошлой статьи мы получили очень ценный отзыв про True Image от пользователя Хабра, не хотелось бы нарушать хорошую традицию. Готов пообщаться в ДМ.
0
Чем больше вы «улучшаете» дизайн Acronis True Image, тем сложнее разобраться в его интерфейсе. Термин «интуитивно понятный» давно вычеркнут из словаря компании Acronis
0
можете залить в кодпен иконку с гифки, в котрой вы как бы убираете лишний код? я покажу, что вы сломали.
0
Конечно можем: codepen.io/nikishkin/pen/yKYYoB
0
до редактирования, скетчовский
0
а, сразу не увидел сори, вьюбокс в итоге у вас меняется.
+1
Конечно меняется. Зачем в профессиональном сообществе писать о том, что работает только на гифках?
0
Подход у вас действительно интересный.
Расскажу, как мы работаем с иконками.
Иконочный шрифт мы не используем.
У нас есть 2 типа иконок,
одноцветные
и цветные(иконки и мелкие изображения).
Все они в формате svg.
Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется.
Выглядит это так:
И инклюдится на страницу он так:
И стили для него:
Для цветных используется css спрайт:
И стили для него:
Загружается css спрайт асинхронно
Генерируется это, понятное дело, галпом.
Что дает такой подход
Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.
Для того, чтоб посмотреть какие есть иконки надо просмотреть 2 папки, что не очень удобно, и потому сейчас я планирую сделать библиотеку на подобии вашей, то есть сгенерировать html файл.
Расскажу, как мы работаем с иконками.
Иконочный шрифт мы не используем.
У нас есть 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 файл.
+1
Подход на спрайтах мне нравится гораздо больше как минимум из-за качества иконок на выходе. SVG шрифты имеют массу своих особенностей типа хинтинга, когда иконка может слегка плыть из-за размера окна браузера или едва заметных расхождений в рендеринге на разных операционках. Но, к сожалению, пока что отказаться от использования шрифтов мы не можем.
0
Sign up to leave a comment.
Дизайн–система Acronis. Часть вторая. Иконки, SVG шрифты, Gulp