Pull to refresh

Comments 22

Верстаю сайты уже 3 года, и ни разу не приходилось рисовать SVG в HTML. Обычно либо подключаются иконки FontAwesome или другие, или скачиваются SVG с онлайн сервисов, типо faticon.
Да, я тоже часто качаю с flaticon. Если у тебя SVG иконка-кнопка, например, и при наведении ты хочешь поменять её цвет, то нужно как-то уметь это делать через CSS. В статье описано, как это можно сделать, не прибегая к шрифту из иконок.
Да, это здорово. Но появляются проблемы, когда натягиваешь сайт на движок. И когда заказчик хочет изменить иконку.
UFO landed and left these words here
Интересный вариант, спасибо. Таким способом не получится сделать двухцветную иконку, но для многих кейсов хорошо подойдёт.
А ещё CSS умеет filter: hue-rotate(). Вполне себе удобный вариант, как по мне.
Да, сам в своё время фильтрами накручивал подобие HSL, но не сказал бы, что оно удобнее :)

Отлично, вернулись к проблеме, когда интерфейс уже показался, а иконки ещё нет. Особенно весело, когда одна иконка меняется на другую, а ты в оффлайне.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную.

Шрифты замучали честное слово своей непрогрузкой. Почему-то они не всегда подгружаются. От них давно нужно было отказаться.
Вставляю svg через background. Цветная версия идет, дубликатом со вставленной переменной цвета.

Сначала уменьшение тут jakearchibald.github.io/svgomg
Потом ручная правка, бывает файл скачан с кучей пустых групп внутри.
Потом сюда yoksel.github.io/url-encoder

А еще тут подборка решений
css-tricks.com/change-color-of-svg-on-hover

Для оптимизации ещё могу kraken.io посоветовать, но вы, наверное, уже про него знаете :-)

Не понятно техничекое решение. Чем они жмут. Я ищу решение, которое будет без меня адаптивно задавать коэфицент сжатия jpg у продвинутого кодировщика mozjpeg. А так пока ручной труд в PS срабатывает эффективнее, чем продвинутые mozjpeg которыми слепо жмут по дефолту 100% из PS в 75% любого другого энкодера.
Если я вас правильно понял, вы вставляете картинки через data:image. Это ведь ведёт к раздуванию css файла, и, следовательно, к увеличению времени загрузки. Ваши картинки не смогут загрузиться параллельно и не будут отдельно закешированы. При любом изменении css файла, его надо будет заново выкачивать со всеми этими картинками, вместо того, чтобы они подтянулись из своего кеша.
pepelsbey, кажется, говорил про подобный сценарий и пути решения проблемы
Использование data:image в данном случае обходится без base64, который любые бинарные данные увеличивает на 30%. Но у нас как SVG была строка так и осталась, только некоторые символы конвертируются в другое представление, чтобы сжевались браузером.
Небольшое раздувание при дубляже svg с изменным fill параметром компенсируется любым протокольным сжатием. Если 1000 нулей взять в архив, то этот файл будет содержать не 1000 нулей а один ноль с указанием количества копий. Поэтому нагрузка скорее на css парсер. Однако это настолько малозначительно, используемые иконки обычно примитивны и не занимают больше 300 символов в строчку.

Ваши картинки не смогут загрузиться параллельно и не будут отдельно закешированы.

И не нужно. Это же не jpg-ги по 200кб. Иконки — часть интерфейса, они должны появляться вместе с отрисовкой. Это же такая же часть интерфейса как и border-color или background-color. Кешируются вместе с css.
При любом изменении css файла, его надо будет заново выкачивать со всеми этими картинками, вместо того, чтобы они подтянулись из своего кеша.

Если изменения проекта происходят прям пулемёт пулемётович, а иконки точно не будут меняться, ну можно иконки подключить вторым файлом, хотя… смотря сколько они занимают в итоге в gzip надо смотреть.

Конечно, дубляж иконки это глупо и выглядит как хак. Но только из-за ограничений браузера. К тому же, чем use занимается, не показом ли дубликата символа? Думаю, это все это решиться со временем.

Если на экране будет 20 разных иконок, то будет 20 запросов. Последующие загрузки будут оптимизированы http-кэшем, но тогда уж лучше склеивать все символы в один файл.

Один из смыслов способа с тегом use как раз в том и состоит, что все иконки содержатся в одном файле.

Да, но в статье компонент сделан так, что он работает только с одним файлом-иконкой.

Можно переписать строчку, которая берёт путь из DI, чтобы она использовала спрайт и доставала символ. В приложении, где разных иконок не пара сотен загружать их все разом будет и правда не слишком накладно.

http2 должен решать эту проблему.

Спасибо за заметку, но всё же код — это не картинка, код — это текст. Его можно читать на мобильных, его хочется скопировать. Всему этому вы мешаете ради «красоты». Не надо так.


Весь код можно скопировать из примера на StackBlitz в конце статьи.

И для этого надо открыть отдельную страницу с достаточно тяжеловесной WebIDE.

Only those users with full accounts are able to leave comments. Log in, please.