Еще одна интересная особенность значков SVG заключается в том, что они являются исходным файлом, что значительно упрощает их аккуратное группирование в папку для получения файлов гораздо меньшего размера и упрощения сжатия. Плюс, и именно здесь разработчики и дизайнеры для мобильных устройств прыгали от радости, SVG выглядит невероятно на дисплеях Retina.
Таким образом, независимо от того, являетесь ли вы новичком в конструкторе SVG или толпе пользователей, или если вы были в нем с самого начала, никогда не помешает добавить в свой список новые полезные веб-сайты. Ниже приведены несколько отличных значков, инструментов и ресурсов SVG, и все они являются бесплатными версиями. Какая версия указана прямо на ресурсе.
Иконки и пакеты SVG
Плоская икона
Веб-сайт Flat Icon содержит более 60 000 бесплатных векторных значков, доступных для загрузки в форматах SVG, EPS, PSD или PNG. Используйте бесплатный плагин Adobe Extension для загрузки значков непосредственно в Photoshop, Illustrator или AfterEffects. Чтобы быстро найти конкретный значок, используйте панель поиска или поиск по категориям, таким как сети, знаки, животные и т. д. Все значки SVG поставляются с лицензией Creative Commons, поэтому обязательно указывайте авторство, если вы используете какие-либо из этих значков. .
иконмонстр
Эти простые, но великолепно выглядящие значки совершенно бесплатны для коммерческого и личного использования без указания авторства и возможности изменять по своему желанию. Сайт iconmonstr включает в себя довольно большую коллекцию, которую определенно стоит добавить в закладки.
иконадыня
Это отличный веб-сайт для поиска фантастических иконок SVG для вашего веб-дизайна и дизайна мобильных устройств. Вы можете добавить фильтры, если хотите, такие как тени, размытие, тиснение, перед загрузкой. Он даже поставляется с простыми инструкциями по добавлению в код и использованию CSS для стиля.
Бесплатные иконки
Бесплатные иконки из Free Pik доступны для скачивания в форматах SVG и даже векторах, png и eps. Все они бесплатны для личного и коммерческого использования с указанием авторства через лицензию CC by 3.0. Ищите по содержимому или изучайте последние или самые популярные значки SVG.
Социальные иконки от Адама Фэйрхеда
Этот набор иконок SVG для социальных сетей выглядит красиво, и его легко встроить в код. На этой странице приведены простые инструкции, а пример страницы также включен в загружаемый пакет кода.
Открыть
Бесплатная версия Iconic с открытым исходным кодом содержит 223 значка в форматах SVG, веб-шрифта и растра. Размер файлов невероятно мал, и они готовы для Bootstrap и Foundation.
RoundIcons.com
Иконки SVG на RoundIcons.com не требуют авторских отчислений с ограничением в 200 на проект и 5 пользователями. Существует множество бесплатных пакетов значков, включая Doodle, Halloween, Flat и Vector Lines. Прямо сейчас вы можете приобрести все пакеты по сниженной цене в 99 долларов, если вам нужно больше, чем то, что включено в бесплатный список.
значки customizr.NET
Этот удивительный бесплатный настраиваемый пакет значков позволяет вам выбрать цвет внешней формы, цвет внутренней формы, фактическую форму, непрозрачность и даже размер перед загрузкой. Кроме того, вы можете видеть изменения, которые вы вносите, в режиме предварительного просмотра в реальном времени. Если вам нужно больше значков SVG, вы можете попробовать бесплатную пробную версию PRO-версии (7 долларов в месяц).
Наборы иконок
Кто-то приложил немало усилий для создания этой превосходной коллекции бесплатных наборов иконок Dribbble SVG. Каждый из них содержит ссылку на исходную загрузку, чтобы перепроверить лицензию. Или просто скопируйте и вставьте код для немедленного использования.
Учебники по значкам SVG, инструменты и многое другое
Иконки SVG FTW
Это отличная статья, в которой обсуждаются возможности значков SVG, включая добавление эффектов фильтров и интерактивности с пошаговыми инструкциями по написанию кода. Он также включает в себя забавный учебник, чтобы показать, что возможно.
Анимированные иконки SVG с помощью Snap.svg
В этом руководстве объясняется, как использовать библиотеку Snap.svg для анимации значков SVG. Он также включает в себя демонстрацию и кнопку для загрузки исходных файлов.
Система иконок со спрайтами SVG
В этой статье эксперта по CSS Криса Койера показано, насколько замечательна система, использующая встроенный SVG и элемент для ссылки. Coyier включает в этот учебник так много отличных советов и лучших практик, что он обязательно должен быть использован как новичками, так и теми, кто знаком со спрайтами SVG.
ИкоМун
Очень популярный менеджер шрифтов иконок и источник иконографии, IcoMoon включает в себя только лучшее в Интернете. Вы можете загружать и/или создавать собственные списки значков SVG, спрайтов PNG/CSS и шрифтов значков. Используйте бесплатное приложение или приобретите премиум-версию для таких функций, как облачная синхронизация и многое другое.
Fontastic.me
Это еще один сайт менеджера шрифтов значков, а также возможность вносить изменения в значки непосредственно в приложении. И совсем недавно Fontastic добавил возможность публиковать иконки в виде спрайтов SVG. Вы можете выбрать один из 9000 иконочных шрифтов на сайте или загрузить свой собственный совершенно бесплатно.
SVG Морфеус
Этот замечательный инструмент использует Javascript, чтобы ваши значки SVG трансформировались из одного значка в другой с крутым анимированным эффектом. Вы можете выбрать эффект перехода, скорость и даже добавить вращение — и все это бесплатно!
iconizr
Если вам нужна помощь в превращении ваших рисунков SVG в набор иконок CSS, iconizr поможет вам сделать это бесплатно. Просто перетащите свои значки на веб-страницу, и инструмент автоматически сделает всю работу за вас на удивление хорошо. Он предпочитает SVG, а не PNG, и URI данных, а не спрайты CSS или отдельные изображения. Он даже предоставляет запасные варианты для любых неподдерживаемых браузеров и выводит в Sass либо вместе с CSS, либо вместо него.
Анимируйте иконки SVG с помощью CSS и Snap
Еще одно руководство по использованию библиотеки snap.svg вместе с CSS для анимации значков, в нем также приводятся советы о том, как создавать свои собственные в Illustrator. В этой статье также упоминается несколько отличных ресурсов.
Плагин для иконок WordPress SVG
Спасибо Эвану Херману за этот невероятно полезный плагин для пользователей WordPress. Новым в этом плагине является возможность теперь импортировать свои собственные, настраиваемые пакеты значков SVG, тогда как раньше пользователи были ограничены пакетами, которые поставляются с плагином. Хотя этот плагин, конечно же, бесплатный, вы можете подумать о том, чтобы сделать пожертвование великодушному Герману за такой удивительный инструмент.
У вас есть любимые значки, инструменты или ресурсы для SVG? Если это так, пожалуйста, поделитесь с остальными в комментариях ниже!
(дпе)