Иконка Телеграмм svg код

Содержание

Есть ли где-то svg код иконок для html?
Сейчас использую awesome , но хотелось бы убрать лишние скрипты, и что лучше: awesome или svg код, на странице по 20-30 таких кодов может быть?

Имею ввиду такое

Вопрос задан более трёх лет назад
8654 просмотра

Комментировать
Решения вопроса 0
Ответы на вопрос 5
Если не хочешь быть первым — не вставай в очередь!

подскажите пожалуйста , есть ли где-то svg код иконок для html?

В сети их как грязи, например тут.

Сейчас использую awesome

Там тоже несколько тысяч.

но хотелось бы убрать лишние скрипты

Не вижу ни одной помехи для этого.

и что лучше awesome или svg код

FontAwesome — можно скачать отдельно, в SVG формате (каждую иконку отдельно).

на странице по 20-30 таких кодов может быть?

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

SVG иконки Flaticon снова бесплатные. Раскрываю секрет, как пользоваться Premium иконками.

P.S. Есть масса различных инструментов для анализа скорости загрузки страницы и оценки ряда прочих факторов. Например, Google Page Speed. Лучше — когда показатели высокие и/или вписываются в норму, остальное второстепенно.

Источник: qna.habr.com

SVG-иконки

Адаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.

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

Вот, например, один SVG-спрайт в 4-х разных размерах, исходный — 32px:

SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.

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

Наборы готовых иконок

iconmelon.com

Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью use .

От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.

icomoon.io

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

flaticon.com

Большая коллекция, иконки удобно поделены на категории. Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.

Рисуем сами

Для создания своего набора иконок потребуется векторный редактор:

Adobe Illustrator — по-моему, лучший. 599 руб./месяц в составе подписки на Creative Cloud;
Inkscape — бесплатный и не очень удобный;
Sketch — для Mac OS, $79.99. Имеет некоторые проблемы с векторизацией обводок, но вообще довольно удобный.

Еще по теме: Документы и данные Телеграмм занимают много места что делать на Айфоне

Снижение веса

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

petercollingridge.appspot.com/svg-optimiser github.com/svg/svgo github.com/sindresorhus/grunt-svgmin

grunt-svgmin — задача для Grunt с использованием svgo. При этом файлы сами будут браться из папки с исходниками, оптимизироваться и складываться в папку с результатами. Очень удобно.

Спрайт или иконочный шрифт?

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

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.

Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:

Выберите иконки из набора и/или загрузите свои.
Кликните внизу кнопку Font.
На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.

Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно:

Картинка из статьи Криса Коэра Icon System with SVG Sprites. Я на этом же месте как-то видела иероглифы, но сейчас там SVG, так что скрин сделать не получится. CSS-tricks, кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.

Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.

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

Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

Как существуют способы вставки SVG на страницу?

Спрайт

Плюсы:

короткий читабельный код;
картинка кешируется;
хорошая поддержка браузерами: все, кроме старых IE.

Минусы:

запрос к серверу;
в старых Операх фоновый SVG поддерживается странно: могут возникать проблемы при добавлении рамки элементу с SVG-фоном, а в Opera Mini работают только фоны без viewBox;
иконки в спрайте недоступны для стилей страницы;
большие спрайты могут вызывать проблемы с производительностью.

Base64 в data URI

Плюсы:

нет запроса к серверу.
хорошая поддержка браузерами: все, кроме старых IE.

Минусы:

картинка не кешируется и каждый раз рендерится заново;
длинная строка в CSS;
не читабельно: по коду непонятно что он содержит;
закодированная картинка может весить больше исходной;
для закодирования/раскодирования нужны дополнительные инструменты;
иконки недоступны для стилей страницы.

SVG в data URI

Плюсы:

нет запроса к серверу;
относительно читабельный код (можно прочитать или отредактировать);
не требует раскодирования;
поддерживается всеми современными браузерами, если закодировать SVG.

Минусы:

не кешируется;
длинная строка в CSS;
иконки недоступны для стилей страницы;

Еще по теме: Как отправить доверенность Телеграммой

Use (переиспользование SVG-элементов)

Плюсы:

читабельный код;
картинкам можно добавить title и desc ;
символы доступны для стилей страницы. Также можно задать иконкам fill=»currentColor» , и они будут краситься вместе с текстом.

Минусы:

вставляется непосредственно в HTML. Перед использованием элементы должны быть объявлены вверху страницы в инлайновом SVG. Возможно, есть более изящный способ подключения библиотеки элементов, мне не удалось найти.

Шрифт

Плюсы:

удобный код;
единственный из способов поддерживается в IE8 без фолбеков;
иконки доступны для стилей страницы, и будут краситься вместе с текстом.

Минусы:

если шрифт не загрузился (ещё не загрузился, вообще не загрузился или уже выгрузился), вместо иконок будут буквы или символы юникода или ничего.

Живой пример с поддержкой браузерами:

Пример представлен как есть, без попыток обеспечить совместимость с разными браузерами. Вы можете открыть демо в интересующем браузере и посмотреть как в нем поддерживаются разные способы.

Отображение иконок в браузерах без поддержки SVG

В данный момент самый удобный и надежный способ вставки — в виде спрайта.

Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:

Для старых Опер можно использовать такой селектор:

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

Из существующих способов вставки иконок мне больше всего нравится шрифт. Он был бы идеальным, если бы не проблемы с поддержкой. Use мне не нравится смешиванием разметки и оформления, хотя радует доступность для CSS и возможность добавить title и desc . Есть ещё один очень хороший, но плохо поддерживаемый способ, но это тема для отдельного поста.

UPD: Большое спасибо Роме Комарову за дополненния к тексту.

UPD от 04.04.14:

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

Особенности иконок в Телеграмм

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

Скачать иконку Телеграм в формате png можно по кнопке ниже.

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

К размерам тоже предъявляются требования. Telegram logo может быть только квадратным изображением.

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

Тогда необходим уже более сложный графический процессор, ведь в Paint нет функции прозрачности фона. Например, Photoshop. Из бесплатных можно порекомендовать InkScape.

Обязательно сохраните файл в формате .png или .gif. Только они поддерживают эту возможность.

Как получить .ico

Фотошоп не позволяет автоматически сохранить файл как иконку. Формат ico — это тот же bmp, немного измененный. Поэтому при отсутствии прозрачности можно сохранить изображение как bmp и потом вручную переименовать. В противном случае, когда фон не должен получить заливку, сохраняйте logo Telegram в png, а затем конвертируйте в онлайн сервисе. Рекомендуем https://convertio.co.

Еще по теме: Как клонировать Телеграм на самсунге

Просто перетащите файл в поле, нажмите «Преобразовать» и затем «Скачать». Значок будет готов.

Редактор векторной графики InkScape тоже не имеет возможности сохранять в виде .ico. Но в нем можно нарисовать куда более эффектное изображение, чем в растровом. Все же последние предназначены больше для работы с готовыми изображениями или фотографиями. Значок Телеграм, выполненный вектором будет более гладким и качественным. Здесь сохраняйте или в svg или в png.

И также конвертируйте.

Помимо этих редакторов существуют еще и специализированные, для создания именно графических иконок. Например, IconCool Editor.

Где можно скачать готовые иконки для Телеграмм

В интернете можно найти множество ресурсов с бесплатными значками. Iconbird http://iconbird.com Здесь все изображения разбиты на категории. Также можно выбрать и по стилю, например, 3D.

Icons8 https://icons8.ru/ Бесплатно предлагаются более 60 000 значков. Для некоторых можно выбрать цвет. Сайт имеет удобную навигацию и множество категорий для выбора.

Findicons https://findicons.com Не очень удобная навигация, зато все наборы бесплатны. Их очень много, можно подобрать иконку на любой вкус.

Как изменить иконку Телеграмм

Для ПК это сделать крайне просто. На примере Windows:

Наведите курсор мыши на изображение.
Нажмите правую кнопку.
Выберите «Свойства».
На вкладке «Ярлык» нажмите «Сменить значок».
Нажмите кнопку «Обзор».
Выберите на диске файл с новым изображением.
Нажмите «Ок» и значок на рабочем столе поменяется.

Для смартфона и планшета придется использовать сторонние программы. Рассмотрим последовательность действий на примере Awesome icons .

Скачайте и установите приложение в Google Play Market.
Вы увидите список всех приложений. Под каждым «родной» значок, изображение камеры и картины.
Пролистайте до Телеграмм.
Если хотите выбрать картинку с устройства, нажмите первую пиктограмму.
Появится запрос на разрешение доступа к файлам. Соглашайтесь.
Кликните в разделе «Icon».
В меню можно выбрать значки приложений, из библиотеки, рисунок или с камеры.
Выбор «Camera» позволит сфотографировать и разместить результат как иконку.
Если хотите просто скачанный рисунок, нажмите «Picture».
Откроется перечень всех картинок. В главном меню (три точки) укажите внутреннюю или внешнюю память (если таковая имеется). Выберите любую, чтобы сделать ее иконкой.
После выбора изображения вы увидите, как оно будет обрезано. Если вас устраивает, жмите «Crop» в правом верхнем углу.
Дальше нажмите «ОК».