Comments 22
Верстаю сайты уже 3 года, и ни разу не приходилось рисовать SVG в HTML. Обычно либо подключаются иконки FontAwesome или другие, или скачиваются SVG с онлайн сервисов, типо faticon.
UFO just landed and posted this here
А ещё CSS умеет filter: hue-rotate(). Вполне себе удобный вариант, как по мне.
Отлично, вернулись к проблеме, когда интерфейс уже показался, а иконки ещё нет. Особенно весело, когда одна иконка меняется на другую, а ты в оффлайне.
Обычно используются либо шрифты иконок, либо исходный код 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, кажется, говорил про подобный сценарий и пути решения проблемы
pepelsbey, кажется, говорил про подобный сценарий и пути решения проблемы
Использование data:image в данном случае обходится без base64, который любые бинарные данные увеличивает на 30%. Но у нас как SVG была строка так и осталась, только некоторые символы конвертируются в другое представление, чтобы сжевались браузером.
Небольшое раздувание при дубляже svg с изменным fill параметром компенсируется любым протокольным сжатием. Если 1000 нулей взять в архив, то этот файл будет содержать не 1000 нулей а один ноль с указанием количества копий. Поэтому нагрузка скорее на css парсер. Однако это настолько малозначительно, используемые иконки обычно примитивны и не занимают больше 300 символов в строчку.
И не нужно. Это же не jpg-ги по 200кб. Иконки — часть интерфейса, они должны появляться вместе с отрисовкой. Это же такая же часть интерфейса как и border-color или background-color. Кешируются вместе с css.
Если изменения проекта происходят прям пулемёт пулемётович, а иконки точно не будут меняться, ну можно иконки подключить вторым файлом, хотя… смотря сколько они занимают в итоге в gzip надо смотреть.
Конечно, дубляж иконки это глупо и выглядит как хак. Но только из-за ограничений браузера. К тому же, чем use занимается, не показом ли дубликата символа? Думаю, это все это решиться со временем.
Небольшое раздувание при дубляже svg с изменным fill параметром компенсируется любым протокольным сжатием. Если 1000 нулей взять в архив, то этот файл будет содержать не 1000 нулей а один ноль с указанием количества копий. Поэтому нагрузка скорее на css парсер. Однако это настолько малозначительно, используемые иконки обычно примитивны и не занимают больше 300 символов в строчку.
Ваши картинки не смогут загрузиться параллельно и не будут отдельно закешированы.
И не нужно. Это же не jpg-ги по 200кб. Иконки — часть интерфейса, они должны появляться вместе с отрисовкой. Это же такая же часть интерфейса как и border-color или background-color. Кешируются вместе с css.
При любом изменении css файла, его надо будет заново выкачивать со всеми этими картинками, вместо того, чтобы они подтянулись из своего кеша.
Если изменения проекта происходят прям пулемёт пулемётович, а иконки точно не будут меняться, ну можно иконки подключить вторым файлом, хотя… смотря сколько они занимают в итоге в gzip надо смотреть.
Конечно, дубляж иконки это глупо и выглядит как хак. Но только из-за ограничений браузера. К тому же, чем use занимается, не показом ли дубликата символа? Думаю, это все это решиться со временем.
Если на экране будет 20 разных иконок, то будет 20 запросов. Последующие загрузки будут оптимизированы http-кэшем, но тогда уж лучше склеивать все символы в один файл.
Спасибо за заметку, но всё же код — это не картинка, код — это текст. Его можно читать на мобильных, его хочется скопировать. Всему этому вы мешаете ради «красоты». Не надо так.
Хорошо писать в корпоративный блог (: https://habr.com/sandbox/140774/
Sign up to leave a comment.
Нативный способ покрасить SVG-иконки