Как использовать опцию "логотип" в shields.значки io?

Как использовать logo опция вщиты.IO значки?

например, что-то вроде

Raspberry Pi

не дает ожидаемого результата.

6
github readme shields.io

2 ответов

вам нужно base64 логотип вы можете использовать http://b64.io/ чтобы преобразовать png в код base64 ссылка должна быть экранирована ваше изображение было слишком большим для uri, вы можете масштабировать его до 14px высоты.

Raspberry Pi

6

вот 3-шаг руководство по использованию логотипа, например логотип GitHub, в щите / значке.

  1. кодирование изображение в Base64.

    С Википедия

    Base64-это группа аналогичных схем двоичного кодирования в текст, которые представляют двоичные данные в строковом формате ASCII путем перевода их в представление radix-64. Термин Base64 происходит от конкретного Кодирование передачи содержимого MIME.

    скачать изображение и используйте один из многих онлайн-инструментов, например http://b64.io/, чтобы закодировать его.
    Результаты представляют собой строку, начинающуюся с данные: изображение / png; base64, и за ним следует очень длинная строка символов.

  2. кодирование строка Base64 в процентной кодировке.

    от Википедия

    процентное кодирование, также известное как кодирование URL, является механизмом кодирования информации в Едином идентификаторе ресурса (URI) при определенных обстоятельствах. Хотя он известен как кодировка URL, на самом деле он используется в более общем виде в основном наборе унифицированных идентификаторов ресурсов (URI), который включает в себя как унифицированный локатор ресурсов (URL), так и унифицированное имя ресурса (URN).

    возьмите очень длинную строку Base64 и используйте (опять же) один из многих онлайн-инструментов, напримерhttp://meyerweb.com/eric/tools/dencoder/, для кодирования строки.
    Некоторые символы будут заменены на % следуют две шестнадцатеричные цифры. Например, / заменяется %2F.

  3. наконец, добавьте закодированную строку в URL-адрес экрана после ?logo=. В качестве примера: https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D соответствует . Вы можете попробовать использовать этот.

совет: иногда закодированная строка шага 2 или 3 может быть слишком длинной для использования. Затем вы должны попытаться уменьшить размер (общее количество пикселей) изображения и повторить попытку.

14