Реклама мешает? Идти Без рекламы Сегодня 

Генератор значков README (стиль Shields.io)

ЦветРазработчикТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Шаблон

Предустановленный

Содержимое значка

Этикетка

Левая часть значка.

Сообщение

Правая часть значка.

Цвета

Цвет метки

Цвет сообщения

Пользовательский цвет

Стиль

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор значков для README

Генератор значков для README создает точные значки в стиле Shields.io прямо в браузере. Выберите шаблон или создайте собственный текст метки и сообщения, выберите цвета и стиль (плоский, плоский квадрат, для значка или пластиковый), и получите готовый к использованию Markdown, HTML, SVG и URL-данные. Без внешних API, без зависимости от сети, без повреждённых значков при отключении сервиса — SVG генерируется на стороне клиента и встраивается напрямую.

Как использовать

Выберите шаблон из выпадающего списка «Шаблон», или оставьте на «Собственный» и введите собственные метку и сообщение.
Выберите цвет метки и цвет сообщения — цвета по умолчанию Shields.io или пользовательский HEX-код.
Выберите стиль значка: плоский, плоский квадрат, для значка или пластиковый.
Следите за обновлением живого предварительного просмотра на фоне светлого и темного цветов.
Скопируйте Markdown, HTML, URL или исходный SVG — или загрузите SVG-файл.

Возможности

Четыре стиля значков – Плоский, плоский квадрат, для значка (заглавные буквы, более высокий), и пластиковый со градиентным выделением.
Включены шаблоны – Версия, лицензия, статус сборки, покрытие, скачивания, звёзды и шаблон «создано с любовью».
Живой предварительный просмотр – Мгновенное отображение с переключателем светлого и темного фона, чтобы увидеть, как значок вписывается в разные темы README.
Четыре формата вывода – Markdown, HTML img тег, SVG data URL и исходный SVG-код.
Самостоятельный SVG – Текст отображается как настоящие узлы SVG с измеренными ширинами, тенями и закруглёнными углами, где это необходимо.
Пользовательские цвета – Стандартный палитрой Shields.io плюс свободный выбор HEX-цвета.
100% клиентская сторона – Без вызовов API, без отслеживания, без ограничений скорости. Работает в оффлайне после загрузки страницы.
Одноклик копирование и загрузка SVG – Экспортируйте отдельный .svg файл, чтобы вставить его в любую репозиторий.

Распространенные случаи использования

Открытый исходный код README – Показывает статус сборки, версию, лицензию, покрытие или количество скачиваний на первый взгляд.
Проектные дашборды – Встраивает единые значки статуса в внутренние вики и сайты документации.
Сайты портфолио – Декорирует карточки проектов стилизованными тегами без загрузки внешних сервисов изображений.
Маркетинговые страницы – Используйте «создано с» и кастомные значки как легкие акцентные элементы.
Офлайн документация – Передаёт значки, которые отображаются даже при блокировке shields.io.

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

Удалённые сервисы значков удобны, но добавляют дополнительный ход по сети каждый раз, когда кто-то загружает README. Когда эти сервисы замедляются, ограничивают скорость или меняют свои настройки, ваши значки молча ломаются. Локально сгенерированный SVG — это один статичный файл, который отображается везде, где отображается Markdown или HTML, входит в репозиторий и выживает при отключении сервиса. Кроме того, вы получаете полный контроль над цветами, отступами и весом шрифта, поэтому значки могут соответствовать едиому визуальному стилю в рамках всей организации.

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что такое SVG-значок?

SVG-значок — это маленький векторный изображение, которое отображает метку и сообщение в виде пластины. Поскольку это векторный формат, он остаётся чётким при любом размере и может быть стилизован с помощью твёрдых цветов, градиентов и анти-алигированных текстов без необходимости серверной рендеринг.
Какова разница между стилями «плоский» и «для значка»?

Плоский — это компактный стиль по умолчанию с незначительным затенением с верху на низ и закруглёнными углами. Стиль «для значка» выше, использует жирные заглавные буквы и добавляет дополнительный горизонтальный отступ, что делает его более заметным и удобным для чтения на расстоянии.
Как рассчитываются ширины SVG-значков?

Каждая сторона текста измеряется с помощью расчёта метрик шрифта — обычно ширина каждого символа в шрифте Verdana 11 — затем добавляется отступ с обеих сторон. Ширины метки и сообщения суммируются для получения общей ширины SVG, чтобы прямоугольники фона точно соответствовали тексту.
Почему использовать data URL вместо хостированного изображения?

Data URL встраивает весь SVG прямо в Markdown или HTML, устраняя зависимость от внешнего хостинга. Значок отображается мгновенно без дополнительного запроса, не может сломаться при изменении API сервиса и остаётся видимым даже при отсутствии подключения к сети.