Как правильно готовить значки для GitHub

Image for post
Image for post

Написать эту статью, меня сподвиг факт появления значка на GitHub “Developed by Mad Devs”. Очень классная идея! И после того как попросил значки себе, решил немного опередить события включения значка в README.md (так как на этот момент, еще не добавили публичного url, по которому можно было бы сослаться на изображение в Markdown или Html). И в итоге через пол часика у меня был сервис на glitch.com.

Текущие версии значков от дизайнеров

Оба представлены в svg формате и доступны по урлам:

Image for post
Image for post
Вот такие значки находятся по вышеперечисленным URL.

Что не понравилось в дизайнерской версии значка?

Посмотрев на значки в их исходнике, понял, несколько следующих моментов:

  • Шрифт не отличающийся особо от стандартного, оказался преобразованным в примитивы <path> (растеризован).

В общем, значок смотрится неплохо, но хотелось чего-то другого.

Изменение структуры значка

Первым делом я решил взять за основу значок, сгенерированный на shields.io. Давайте разберем, что у нас получилось?

Я воспользовался созданием простого значка, с двумя секциями, одной темной, а другой зеленой. В обоих секциях был текст. К сожалению, лого Mad Devs нет на simpleicons.org, но думаю, что в будущем появится! Если бы был шрифтовой лого, можно было бы прям на shields.io создать статический значок с лого компании, без всяких плясок с бубном. Но простых путей сразу не бывает и приходится пользоваться обходными путями.

И так приступим к разбору структуры значка

Я ввел надпись “Developed by” в форму быстрого создания значка

Image for post
Image for post

И получил вот такой значок

Image for post
Image for post
Вот такой значок получился, как основа
  • Надпись “Developed by” размещена “как есть” в тэге <text> (и их было 2, второй тэг для создания тени для текста). И это простое решение для неплохого отображения текста.
Тут видно небольшое смещение по Y на 10 единиц
  • Все значки, более менее стандартизированы и имеют первую часть темной. Почему так? А все потому, что на GitHub нет темной темы и если вставить значок со светлым фоном, то он не будет смотреться нормально.
Image for post
Image for post
Исходник значка, который получился после подгонки размеров области с лого (красным, подчеркнул места что пришлось подкорректировать)

Из исходной, дазайнерской версии значка, был взят только лого в красном и белом цветах.

Итоги оптимизации

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

Image for post
Image for post
Вот такие вот значки получились.
Это значок с белым лого на красном фоне
Этот значок с красным лого на черном фоне

Ссылки на мои версии значков:

И для сравнения продублирую сюда исходные значки:

Image for post
Image for post
Исходный вид значков

Какие лучше, решать конечно же вам, дорогой читатель!

Сервис для отдачи значка

А вот теперь встал вопрос, а как быстро развернуть сервис без всяких там коммитов и сложностей. Сразу же вспомнился glitch.com!

Быстренько создал там заготовку на node.js в один клик! Это очень удобно!

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

Вот такой незамысловатый код, для отдачи нужного значка по параметру запроса ?theme=red-white или ?theme=black-red

Ссылка на сервис по отдаче значков https://mdbadge.glitch.me/.

Image for post
Image for post
Вот так выглядит страничка сервиса для включения моей версии значка для Developed by Mad Devs

Как работает система значков на GitHub

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

Image for post
Image for post
Вот такие километровые ссылки на гитхабе.

Перейдя по любой из ссылок, видим исходный файл.

Теперь поговорим о шрифтах

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

Тем более, посмотрев на то, что используются стандартные шрифты, понял, что запекание (растеризация) для этих шрифтов, не нужна! И стоит воспользоваться стандартным тегом <text> как и во многих значках на GitHub.

Но, к примеру, для таких значков, которые содержат нестандартный шрифт, как значок Circle-CI, используется растеризация.

Image for post
Image for post
Значок Circle-CI с растеризованным шрифтом

Но так ли это хорошо? Нет конечно, правильный путь это включение шрифтов в base64 формате. И казалось бы, конечно же это увеличивает размер SVG, но благодаря сервису https://vecta.io/nano, вы сможете убрать не используемые части шрифта и облегчить свою SVG. Но при этом будет включена оптимизация отрисовки шрифтов со стороны операционной системы и браузера соответственно. А раз так, то значит на разных экранах с разным разрешением, значок будет смотреться отлично.

Вот сравнения размеров PNG версии и версии с растеризованным шрифтом.

Image for post
Image for post
Результат сравнения PNG и аналогичного SVG c растеризованным шрифтом. (картинка взята из статьи https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/)

В итоге на экранах с низким разрешением и ClearType будет проблема с размытием шрифтов.

Image for post
Image for post
Картинка взята из статьи https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

Теперь посмотрим на результаты, после включения шрифтов (преобразованных в Base64) в SVG и посмотрим что получится. Но для упрощения некоторых частей, всего этого непростого процесса, воспользуемся https://vecta.io/nano. Очень хорошая статья, в которой рассказывается, о способах решения проблем со шрифтами в SVG.

Но я, решил произвести эксперимент и взять один из сложных шрифтов из Google коллекции и применить включение base64 в svg.

  1. Для начала я скачал прикольный, как мне показалось шрифт.

2. Распаковал его в папку

Image for post
Image for post
Вот что получилось после распаковки

3. Далее превратил файл IndieFlower-Regular.ttf в base64 строку. Для этого, нужно выполнить команду $ base64 IndieFlower-Regular.ttf > fontb64.txt

4. Открыл файл fontb64.txt текстовым редактором и скопировал содержимое, а затем вставил вместо плейсхолдера [INSERT BASE64 HERE].

Каркас SVG с включением шрифтов в base64 формате

5. После этого, у вас должно получится следующее:

6. Смотрим результат в браузере

Image for post
Image for post
Вот такой значок, с прикольной надписью и включенным шрифтом в base64

7. Если не включить шрифт в svg, то значок будет выглядеть вот так:

Image for post
Image for post
Шрифт по умолчанию, не тот вид, что задумывал

Глянем на оптимизацию через vecta.io и наблюдаем следующую картинку

Image for post
Image for post
Небольшой результат получился, похудел на 1 KB

Файл похудел на 1.4% за счет удаления отступов и пробелов. Так как используется один вид шрифта Regular, то ничего не было вырезано из шрифтов. Но здесь нужно понимать, цель использования необычного шрифта и еще нужно понимать, что чем витиеватей шрифт, тем больше точек нужно для его отображения и тем больше будет весить ваш значок.

Сервисы для генерации значков

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

Это сервисы:

Image for post
Image for post
Image for post
Image for post

При помощи badgen.net я сгенерировал для своего репозитория значок “dependabot enabled”

[![Dependabot](https://badgen.net/badge/Dependabot/enabled/blue?icon=dependabot)](https://dependabot.com/)

Image for post
Image for post

После того как я прогнал свои значки через https://vecta.io/nano, я получи 25,9 % оптимизации по размеру! Уменьшив svg значки, в целом, на 908 байт! Уррааа товарищи!

Image for post
Image for post

Итог

Для значков на GitHub не стоит использовать растеризацию (превращение в path) текстовой части, с целью сохранения шрифта, так как это негативно отразится на мониторах с низким разрешением и TrueType технологией. Если вы дискриминируете по признаку “разрешения монитора”, то тогда вполне можно поступить как Circle-CI, они растеризуют шрифт в своем значке.

По возможности стоит использовать стандартные шрифты

font-family=”DejaVu Sans,Verdana,Geneva,sans-serif”

Если уж действительно хочется крутого значка, тогда воспользуйтесь включением base64 закодированной версии, кастомных и красивых шрифтов в SVG и оптимизацией через, к примеру https://vecta.io/nano.

Всем огромное спасибо за прочтение этой статьи! Пусть никто не обижается, если кого-то задену этой статьей, я сам не дизайнер и конечно же, мало что понимаю в этом, но я решил, что нужно поделиться своим видением процесса создания значков для GitHub.

Mad Devs Blog — Custom Software Development Company

Engineering your growth. Mad Devs is the team behind large scalable projects, globally.

Alexander Vishnyakov

Written by

«Переписывание с нуля гарантирует лишь одно — ноль!» — Мартин Фаулер

Mad Devs Blog — Custom Software Development Company

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Alexander Vishnyakov

Written by

«Переписывание с нуля гарантирует лишь одно — ноль!» — Мартин Фаулер

Mad Devs Blog — Custom Software Development Company

Mad Devs is a Cambridge-headquartered IT company developing enterprise-level software solutions for finance, transportation & logistics, security, edtech, and advertising industries. For more information about us, please browse our website: https://maddevs.io/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store