Что лучше png или svg

Почему нужно использовать SVG графику на сайтах

Уже трудно себе представить современные сайты без иконок и вообще без графики. Вся графика, которую мы видим на сайтах может быть растровой (JPG, PNG) или векторной в SVG формате. К сожалению, фотографии или рисованные иллюстрации мы не можем отобразить на сайте в виде SVG кода. Но если есть выбор, то всегда нужно выбирать именно SVG формат.

Преимущества SVG

• маленький вес
• масштабируется без потери качества
• легко анимируется
• адаптируется под разные экраны

1) Сравнение веса

Для сравнительного анализа скачаем с сайта flaticon.com две одинаковых иконки в PNG и SVG формате.

Мы видим, что размер файла tag.png составляет 27 КБ. В то время, как tag.svg весит всего лишь 6 КБ, что в четыре раза меньше. Как правило на странице сайта, используется десяток иконок. И при каждой загрузке страницы, только за счет иконок, сайт вынужден будет загружать около 300 килобайт.

Как вставить на сайт SVG иконку

SVG иконка представляет из себя трудночитаемый XML код, состоящий из координат линий и кривых. Не пугаемся и сохраняем спокойствие, мы достанем оттуда кое-какую информацию и запишем ее в HTML файле.

В HTML файл вставим два обязательных тега. Сделаем svg тег невидимым, копируем параметр viewBox и вставляем в тег symbol. Затем добавим идентификатор с любым осмысленным названием. Далее копируем из tag.svg все содержимое тегов path + circle и вставляем между тегами symbol. Это будет очень много кода, поэтому я не буду его сюда вставлять.

<svg display=»none»>
<symbol viewBox=»-32 0 480 480.011″ >
// path, circle
</symbol>
</svg>

Ниже вставляем этот код, указав идентификатор иконки.

В итоге иконка появилась на HTML странице.

Как управлять SVG иконкой?

Добавим к тегу svg класс tag-icon и можем стилизовать ее как обычно, через CSS свойства.

Например позиционировать, изменять размер и цвет.

.container <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

.tag-icon <
width: 100px;
height: 100px;
fill: rgb(230, 19, 107);
>

2) Масштабирование без потери качества

Вставим на сайт иконку, как растровую картинку и увеличим ее размеры в 10 раз. Края изображения стали неровными.

img <
width: 3000px;
height: 3000px;
>

Проделав тоже самое с SVG изображением, края остаются таким же ровными, как и у оригинального размера. Масштабирование никак не влияет на качество.

3) Возможности анимации безграничные.

Попробуем поменять цвет у иконок при наведении на более светлый. Посмотрите, как легко реализуется данный эффект у SVG иконки.

.tag-icon:hover <
fill: darkorange;
cursor: pointer;
>

При наведении на PNG иконку меняется цвет фона, а не самой иконки.

img:hover <
background-color: darkorange;
cursor: pointer;
>

Посмотрите пример на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

GIF, PNG, JPG или SVG. Какой использовать?

Если эта статья кажется вам немного знакомой, мы опубликовали ее первый выпуск еще в 2009 году. Хотя SVG добавила в веб-дизайн совершенно новое измерение, такие вопросы, как «В чем разница между JPEG и PNG?», Все еще актуальны как всегда. Мы подумали, что пришло время по-новому взглянуть на состояние игры в форматах веб-изображений.

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

JPG против PNG против GIF против SVG — в чем разница?

GIF: графический формат обмена

256 цветовая палитра.

Если только вы не вышли из слегка курящего DeLorean прямо с 1985 года , вы, скорее всего, уже знакомы с самым глупым форматом изображений в сети — GIF (Graphics Interchange Format).

Формат GIF является типом растрового изображения, но в отличие от JPEG или PNG, файлы GIF ограничены максимальной палитрой из 256 цветов. По сути, каждое GIF-изображение содержит предустановленную «коробку с карандашами», и невозможно по-настоящему смешать эти цвета для создания новых цветов.

В то время как 256 может показаться большим количеством мелков для работы, сложные фотографии обычно имеют много тысяч тонов. Этот цветовой диапазон теряется в процессе преобразования GIF, и это является основной причиной не использовать GIF для цветных фотографий.

Хотя GIF, как правило, является плохим выбором для изображений с широкими цветовыми вариациями, ограничение в 256 цветов может помочь сохранить небольшие размеры файлов, что идеально подходит даже для самых медленных интернет-скоростей. В течение многих лет GIF предоставлял единственную опцию прозрачности в Интернете — хотя PNG и SVG теперь предлагают это тоже.

Категория: без потерь

Выберите GIF для:

• Простые анимации
• Маленькие иконки
• Графика с небольшим разбросом пикселей (т. Е. Много плоских цветов, таких как логотипы и флаги)

В зависимости от ваших предпочтений вы можете ссылаться на этот формат как «JPEG» или «JPG» — оба варианта являются приемлемыми вариациями одного и того же аббревиатуры — Joint Photographic Experts Group .

В отличие от GIF, JPEG является 16-битным форматом, что означает, что он может смешивать красный, синий и зеленый свет для отображения миллионов цветов. Это делает JPG очень «фото-дружественным». Это частично, почему это стандартный формат, когда речь идет о большинстве цифровых камер на рынке.

Формат JPEG также позволяет гибко выбирать степень сжатия изображения — от 0% (сильное сжатие) до 100% (без сжатия). Как правило, настройка сжатия 60% -75% значительно сократит ваш файл, сохраняя при этом изображение на большинстве экранов приличным.

Хотя JPEG хорошо подходит для сжатия и рендеринга фотографий, он представляет собой тип сжатия с потерями, что означает, что он менее полезен для постоянного редактирования изображения. Экспорт JPEG приводит к потере качества, и эти потери ухудшаются с каждым последующим экспортом — как фотокопия фотокопии. Вот почему профессиональные фотографы обычно снимают в формате RAW без потерь.

Также обратите внимание, что, в отличие от GIF и PNG, JPEG не может сохранить прозрачность.

Категория: потеря

Используйте JPEG для:

• Неподвижные изображения
• фотография
• Изображения со сложными цветами и динамикой

PNG (Portable Network Graphics) — более новый формат файлов, чем GIF и JPEG, — это своего рода брак между форматами GIF и JPEG благодаря двум его вариантам.

PNG-8 во многом похож на GIF и использует ту же самую 256-цветовую палитру (максимум). У этого есть лучшие варианты прозрачности и обычно экспортирует немного меньшие размеры файла. Однако PNG-8 не имеет функции анимации.

PNG-24

PNG-24 позволяет отображать изображения с миллионами цветов — во многом как JPEG — но также предлагает возможность сохранить прозрачность. Поскольку PNG-24 — это файл формата без потерь, вы, скорее всего, получите файлы большего размера, но если качество изображения важнее размера файла, PNG-24 — ваш лучший вариант. Несмотря на это, такие сервисы, как TinyPNG.com, часто могут сильно повлиять на размер вашего файла. По сравнению с их кузеном JPEG, файлы PNG-24 не так универсально совместимы с каждым приложением и платформой, что делает формат немного менее идеальным для совместного использования в Интернете. Тем не менее, он может быть отредактирован без ухудшения качества.

Категория: без потерь

Используйте PNG для:

• Веб-графика, требующая прозрачности
• Цветные тяжелые и сложные фотографии и графика
• Изображения, которые требуют повторного редактирования и реэкспорта

В отличие от трех форматов, упомянутых выше, SVG (масштабируемая векторная графика) не является чисто растровым форматом. Вместо этого это векторный формат — близкий родственник формата AI Illustrator и AI и EPS — который постоянно становится привлекательным вариантом для веб-дизайнеров и дизайнеров пользовательского интерфейса.

Иногда полезно думать о SVG как о «HTML для иллюстраций», и вам нужно думать об этом совсем по-другому, чем другие форматы изображений, которые мы перечислили.

SVG лучше всего подходит для отображения логотипов, значков, карт, флагов, диаграмм и другой графики, созданной в приложениях векторной графики, таких как Illustrator, Sketch и Inkscape. Написанный в разметке на основе XML, ваш SVG можно редактировать в любом текстовом редакторе и изменять с помощью JavaScript или CSS. Поскольку векторы можно масштабировать до любого размера, сохраняя при этом четкое качество изображения, они идеально подходят для адаптивного дизайна.

Хотя SVG по своей сути является векторным форматом, можно (даже часто) встраивать растровую графику в файл SVG — так же, как вы можете встраивать JPEG в HTML.

Вы можете сделать это, либо связавшись с источником изображения через его URL (как вы могли бы сослаться на JPG на веб-странице), либо инкапсулировав пиксельное изображение в виде URI данных . Это дает SVG бесспорную гибкость и мощь.

Хотя SVG может способствовать тому, чтобы ваши изображения выглядели красиво в Интернете, это не обязательно тот формат, который обычный человек может использовать для сохранения и загрузки изображений через свой веб-сайт или платформы социальных сетей.

Онлайн-сервисы, такие как WordPress, Flickr, Medium, Tumblr и Facebook, либо принудительно преобразуют ваш SVG в формат, который им нравится, либо, что более вероятно, напрямую блокируют загрузку SVG. Алекс продемонстрировал несколько вариантов хостинга SVG, включая svgur.com , imgh.us и даже Github .

Несмотря на то, что я рад видеть, что меньшие хостинговые услуги решают проблемы SVG, Github в настоящее время является единственным SVG-дружественным сервисом, который, я уверен, будет на 99% через 5 лет. Если вы используете SVG для веб-дизайна, вы обнаружите, что вы почти всегда можете уменьшить размер файла по сравнению с чем-то вроде JPEG или PNG. Но учтите, что чем сложнее ваш SVG, тем больше будет размер файла.

Категория: Вектор / Без потерь

Используйте SVG для:

• Логотипы и значок с сильным, геометрическим, дружественным к вектору дизайном
• Графика, которая может потребоваться отображать в нескольких размерах и экранах
• Графика, которая отвечает на их устройство
• Графика, которую нужно отредактировать, обновить и перераспределить.

Сравнивать и противопоставлять

Теперь, когда мы рассмотрели различия между популярными форматами файлов, пришло время увидеть их рядом. Ниже вы увидите, как форматы GIF, JPEG, PNG и SVG обрабатывают изображения как простых, так и сложных цветов вместе с фотографическими изображениями.

Плоская цветная графика

Первый тип изображения, который мы собираемся рассмотреть, это плоская цветная графика. Это охватывает большинство логотипов и брендинга, значки, простые карты, диаграммы и диаграммы. Исходное изображение PNG размером 23,4 КБ с размером 1280 x 1280.

Ниже вы сможете увидеть разницу в размере сжатия, а также качество изображения. Обратите внимание, что изображения были сохранены с помощью опции «Сохранить для Интернета и устройств» в Photoshop с настройками высочайшего качества.

Перевод логотипа в векторный формат SVG

Растровый логотип в формате PNG или JPG (до сих пор в Интернете встречаются и такие логотипы) не целесообразно использовать на сайте. Растровый логотип при уменьшении или увеличении теряет четкость. Это видно, если открыть сайт на устройствах с разным расширением экрана.

Также размытое качество логотипа PNG видно, когда растровый логотип планируется использовать в печатной продукции или для рекламы на билборде. Размытая картинка бросается в глаза и оставляет отрицательное впечатление целевой аудитории.

Решение. Чтобы получить четкий логотип, который приятно использовать везде и всюду, переведите PNG логотип в векторный формат — SVG.

Почему на сайте лучше использовать логотип SVG, вместо PNG или JPG

Разница между PNG и SVG представлена на картинке ниже. PNG (растровое изображение) при масштабировании образует размытые края. Появляются пиксели (квадратики). Искажаются цвета. Логотип становится не читаемым.

SVG (векторное изображение) тоже увеличили, только качество изображения сохранилось. Это связано с тем, что векторное изображение адаптируется под заданные размеры во время масштабирования. То есть элементы логотипа пропорционально увеличиваются или уменьшаются с сохранением качества. Это особенно важно при просмотре сайта с разных устройств. Например, при просмотре с компьютера логотип выглядит приемлемо. При просмотре с телефона логотип настолько уменьшается, что становится не читаемым.

Чтобы логотип был четким при просмотре с разных устройств, переводим в векторный формат — SVG. Файл в формате SVG (Scalable Vector Graphics) — это векторное изображение, не теряющее качества при масштабировании. Уменьшайте или увеличивайте изображение сколько угодно раз, при этом качество логотипа будет неизменно четким.

Почему логотип SVG четкий, а PNG нет

Качество изображения в формате SVG достигается за счет математического описания геометрических примитивов (точек, линий, кругов, прямоугольников, кривых и так далее), которые образуют детали будущего изображения. То есть формат SVG хранит не само изображение, а инструкцию с формулами из точек и кривых для построения картинки.

За счет геометрических формул при уменьшении или увеличении SVG, кривые подстраиваются под новый масштаб, сохраняя пропорции, цвета и четкость. Эти точки и кривые перемещаются, меняются цвета.

PNG сохраняется в виде цельного изображения (один нередактируемый слой). И повезет, если вместе с логотипом PNG сохранился исходник. Если нет, то редактировать такое изображение не получится, только перерисовывать. Это дороже, чем редактировать готовый файл.

Правда ли SVG быстро загружается

По опыту изображения в формате SVG действительно быстрее загружаются на странице. Дизайнер, подготавливающий логотип в векторе, заранее думает о малом весе файла. Именно сочетание четкости и малого веса — являются плюсами SVG логотипов.

Недостаток SVG

Недостаток один — формат SVG не поддерживается устаревшими и давно не обновленным браузерами. Пример, браузер Explorer 8 и ниже. То есть при просмотре сайта с древнего браузера логотип SVG не отобразится. Однако, этот недостаток выходит из внимания, понимая, что 95% пользователей ПК пользуются обновленными браузерами.

Причины и преимущества использовать логотип в векторе

1. При масштабировании сохраняет пропорции, четкость и насыщенность цвета.
2. Редактируется, из-за чего логотип не нужно каждый раз отрисовывать заново.
3. Низкий вес SVG относительно PNG и JPG.
4. Быстрая загрузка изображения на сайте.
5. Возможность использовать векторный логотип в полиграфии и веб-файлах с сохранением качества.

Теперь рассмотрим следующий логичный вопрос: почему перевод логотипа в SVG лучше заказать у профессионального дизайнера, а не искать экономное решение.

Почему логотип в SVG лучше заказывать у дизайнера

Для перевода png логотипа в SVG не используйте онлайн-конвертеры, потому что рискуете получить нередактируемое изображение. Логотип выгружается одним слоем и одним цветом, далее не поддается правкам. К тому же, если JPG или PNG исходник мелкий, то конвертер гарантировано выдаст мыльное изображение.

Сотрудничая с опытным дизайнером вы получите качественный и редактируемый логотип. Стоимость перевода логотипа PNG/JPG в вектор SVG — 1500р. Средний срок – 1 рабочий день. Как правило, наш дизайнер укладывается в срок. Если на перевод логотипа потребуется больше времени из-за проработки многих деталей, то мы согласовываем это с заказчиком. В будущем логотип можно использовать в любом масштабе с сохранением качества для: сайта, веб-файлов и полиграфии различного типа. Обычно наш дизайнер укладывается в этот срок.

• Слева — результат перевода логотипа через популярный онлайн-конвертер;
• Справа — работа нашего дизайнера. Разница очевидна.

Еще одна причина не использовать конвертеры: в логотипе добавлены мелкие и цветные детали, наложенные друг на друга. Онлайн-конвертер точно не справится, потому что не отличает детали. Конвертер видит крупные элементы и кое-как переводит в SVG. Итог: на картинке выше — логотип слева. Исправить такой результат невозможно. Лучше доверьте отрисовку логотипа в SVG профессиональному дизайнеру. Вы получите четкий логотип в формате SVG, как логотип справа на картинке выше.

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

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

Логотип, подготовленный вручную, редактируется: меняйте цвета, двигайте детали, заменяйте текст. Это дешевле, чем создавать логотип заново. При этом изображение четкое, яркое, детальное.

SVG, Iconfonts vs PNG

Статья по мотивам Изображения в верстке. Хватит это терпеть. Скорее даже по мотивам комментариев к этой статье и в общем реакции хабра на призыв использования векторной графики везде, где можно и действительно нужно.

Признаться, я был немного удивлен реакцией на такие мысли в 2014-м то году. По этому случаю рассмотрим более детально существующие техники работы с иконками.

На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.

Самую бурную реакцию вызвало именно применение SVG. Сначала юзер franzose заметил что:

Так как в статье речь шла преимущественно о иконках — такой коммент для меня совершенно непонятен. Да, я сам несколько раз получал от дизайнера ужасные иконки, которые представляли собой нагромождение примитивов, налепленных друг на друга. Но ничего не мешает подойти к дизайнеру и сказать, — “что за херня, мужик?!”, ну или самому зафиксить это дело в том же иллюстраторе, объединив в какой-нибудь общий shape (ну это конкретно мой случай, других “сложных векторов” я не видел пока). Еще для этих целей можно использовать SVGO. Кажется объединение в общий shape — это единственная его часть, которая действительно драматически влияет на производительность.

На самом деле даже если забыть про все эти вещи с иконками — я не могу представить какого-нибудь хоть минимально часто встречающегося кейса про “сложный вектор”. Да все равно вектор, применительно к задачам сегодняшнего веба будет меньше растра (это про вес).

Все мы понимаем что есть задачи, где это все же случается, но в таких случаях разработчики думают несколько другими категориями. Нужно например отобразить какую-нибудь огромную, сложную схему на небольшой площади, ну и будет подход вроде “что-то SVG-ха под мегабайт у нас выходит, коллега, давайте ка мы ее на сервере растрируем”. Тайлы те же на картах.

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

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

Я пообщался с парой людей, которые занимаются SVG частью в Chrome и Firefox и показал им вот это демо, которое Adrian Osmond делал еще год назад для, в принципе, таких же целей. Но тогда все было на порядки хуже. Почему, можно почитать в его статье и багтрекере вебкита.

Chrome

FPS проседает примерно раза в полтора, два. Печально конечно, но не 10x все же. Так что же происходит под капотом Хрома в этот момент?
Я немного почитал исходники на chromium.org, нашел кое-какой кэширующий код для SVG, и это меня запутало еще сильнее. Тут я решил спросить у знающих людей.

Philip Rogers из Google, который в общем то и пишет большую часть всяких дел с SVG в хромиуме, сказал что различия отрисовки SVG и PNG несколько сложнее. Во-первых PNG декодируется в отдельном потоке, а SVG в главном, а во-вторых помимо производительности есть еще такие вещи, как например, память. В общем они решили отказаться от хранения кэша для svg чтобы сэкономить памяти. Как по мне — так это какой-то сомнительный план. Не совсем понимаю почему бы не кэшировать все это дело. Bitmap, которым заканчивается рендер не будет каких-то неприличных размеров, с сегодняшними то объемами памяти, даже на мобильных устройствах. Ну и грядет же вектор, тема перспективная. Но видимо поэтому в Google работают они, а не я.

Так что да, в хроме SVG отсчитывается заново каждый фрейм. Правда Philip сказал что они там что-то придумали, что “should bring it much closer to png performance”. Будет в следующей Canary. Посмотрим. Тем не менее производительность на уровне чуть меньшем чем 60 FPS (а у меня в общем средний такой конфиг) на огромной куче иконок одновременно находящихся на экране — это вполне себе адекватная производительность.

Firefox

Я не знаю чем померить FPS в FF (видел какую-то софтину, но процесс инсталляции был не совсем тривиален и я не стал возиться), но на глаз производительность PNG и SVG одинаковая. Так же думает и Robert Longson, контрибьютор SVG в Firefox. По словам Роберта, в Firefox есть кэш для всех изображений и разница между SVG и PNG может заключаться разве что в том, что SVG немного дольше “декодируется” при первой отрисовке, что вполне закономерно.

Таким образом в FF мы вообще имеем идентичную производительность, если не производим каких-либо манипуляций инвалидирующих SVG кэш. Естественно, скролл ничего не инвалидирует. Возможно есть еще какие-то моменты, но драматически производительность они ухудшить не могут.

Новые IE часто бывают очень хороши во всяких неочевидных местах, например WebGL. Тут такая же ситуация. В IE демо работает намного лучше чем в 2-х предыдущих браузерах, показывает одинаковый framerate для SVG и PNG. Но делает это по каким-то магическим причинам не сразу.

К сожалению я не знаю кто занимается разработкой SVG в IE, а в багтрекер писать сомнительно как-то такие вещи, поэтому эта часть останется без комментариев с другой стороны.

По части вещей вроде SVGO — я отношусь к ним довольно скептически. Не знаю на какую долю процента ускорится рендер при немного более быстром парсинге, но на мой взгляд — это штука сомнительная. Т.е. конечно да, какой-то профит есть, но минимальный.

С практиками верстки SVG все более-менее понятно. Я предпочитаю рисовать SVG спрайты. Техника такая же как и для растровых спрайтов. Проблемы решаемые ими в принципе такие же. Естественно есть куча разных плагинов для этих целей, например вот.
Еще можно делать это с помощью data url. Тут я рекомендую вот такую штуку и их же софтину вот тут, для тех, в чей процесс Grunt по каким-то причинам не входит. Ну еще можно прям файлами на background-image, но не нужно.

Единственный современный браузер где я видел проблемы с рендерингом SVG — это IE на Windows Phone. Но там эта проблема решаема.

Iconfonts

Если в SVG мы в принципе можем нарисовать все что душе угодно, то с помощью шрифтов ограничены монохромными иконками (если не брать во внимание извращения вроде stackicons), что в рамках текущих веяний в дизайне не представляется таким уж недостатком. Зато перед нами открывается куча возможностей начиная от банальной смены цвета и размера, заканчивая пачкой CSS манипуляций с шрифтами, вроде тенюшек и т.д.

Техника с иконочными шрифтами сложнее чем те же SVG. Тут нужно обладать некоторым объемом знаний в областях, где не каждый дизайнер ориентируется. Казалось бы, делов то, запихай свои SVG-хи в один из кучи онлайн-упакавщиков типа того же Icomoon-а или настрой какой-нибудь Grunt\Gulp плагин, и будет тебе счастье.

В комментариях к статье главным обвинением относительно шрифтов было что-то вроде

А что вы хотели, ребят? Нарисовать огромную иконку приблизительно кегля так 48-го, проработать мелкие детали, потом воткнуть ее кеглем так 12-м и вместо удивления о каком-то плохом рендере этих ужасных вебшрифтов, наслаждаться идеальными чистыми иконками?

Хинтинг!

Вот основная вещь, которую нужно знать про iconfonts. Вот он, святой грааль иконок в вебе! Я считаю что если вы точно знаете что скажем, цвет иконок или их размер не изменятся (вероятно бывает и такое), нужно брать SVG и не морочить голову. Использовать шрифты без необходимости — какой-то не очень критичный конечно, но все равно overhead.

1. иконки в векторе
2. аналог icomoon-а
3. профессиональная штуковина для работы со шрифтами. Я использую FontLab Studio

Чтобы было понятно зачем нам это вообще нужно — вот такой пример: берем модный Font Awesome и одним хинтом делаем из вот такой иконки pinterest:

Лучше всего видно на мелком кегле, естественно.

С наступлением эры HDPI устройств заморачиваться с этими вещами фронтэндеру возможно скоро не придется вообще, потому что хинтировать глиф в такой ситуации:

немного сложнее чем в такой:

Я не тот человек, который может авторитетно написать о хинтинге, поэтому делать этого не буду. Буду рад если придет серьезный шрифтовик и напишет детальную статью. Нужно просто брать во внимание то, что он (хинтинг) существует. И это не шрифты криво рендерятся, это некоторые разработчики не хинтируют их совсем, или лепят автохинты (которые, надо сказать, неплохо спасают временами).

Субпиксельное сглаживание

Ну, все что нужно знать о субпиксельном сглаживании — это то, что оно есть. Версию назад с этим были проблемы в хроме, но сейчас все работает так, как должно.

Недостатки растровой графики с такой необходимостью учитывать HDPI устройства, какая есть сейчас — очевидны. Возможно, если бы плотность ограничивалась 2 вариантами ретина\не ретина — это было бы достойным вариантом, и мало кому в голову пришло бы заморачиваться со всеми неоднозначностями вектора, существующими сейчас в вебе. Но у нас есть 1.5x, 2x, 3x устройства. И собирать спрайты под каждое из них уже не кажется достаточно изящным вариантом.

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

Я работаю над системой мониторинга и управления всяким серьезным оборудованием, вроде электрических подстанций или котельных. У нас есть солидная пачка иконок, обозначающих те или иные неисправности на объектах. Причем иконки эти встречаются в разных местах, разного размера и разного цвета. И мы на самом деле убили бы кучу времени, если бы делали все это в PNG, еще и под HDPI.

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

Так вот, зачем я все это написал? Я предлагаю юзерам, негативно отозвавшимся о производительности и рендере векторных иконок, в том посте, с которого все началось, или сочувствующих им и их точке зрения, пари.

Вы предоставляете мне верстку или какой-то конкретный сайт (что лучше), иконки на котором сейчас заверстаны в PNG и под ретину и под простые дисплеи, исходники иконок которого у вас есть в векторе, который при любых эффектах выдает 60FPS на средней машине. Сразу оговоримся что объективно это должен быть обычный сайт. Не онлайн софтина по работе с иконками и не пример из этой статьи.
Я заменяю растр на вектор и оптимизирую какими хочу способами.

В итоге должна получиться страница, на которой FPS проседает не больше, скажем, 30%. О дальнейших условиях договоримся в процессе. Как вам? Докажем ущербность SVG?