Svg набор. Как реализовать кросс-браузерные SVG иконки. Наборы готовых иконок

Иконки, которые вы найдёте на этих ресурсах, можно также использовать, чтобы проиллюстрировать информацию в слайд-шоу, украсить визитные карточки, меню, флаеры и прочее.

Мы написали, что иконки на этих сайтах бесплатные, но всё же обращайте внимание на условия скачивания, так как они могут измениться в любой момент.

01. Smashing Magazine 22. PixelsMarket

26. Blugraphic

Blugraphic – варианты PSD, PNG и векторных иконок. Поиск ограничен тегами, но можно подписаться на рассылку и еженедельно получать бесплатную подборку по электронной почте.

27. Icon Shock

Icon Shock – это тысячи бесплатных иконок для личного использования. Чтобы применить картинку в коммерческом проекте, нужно внести разовый платёж.

28. CSS Author

CSS Author предлагает еженедельные подборки лучших бесплатных иконок в сети.

29. Creative Tail

Хотите свежих иконок? На Creative Tail есть наборы, которых больше нигде не найти.

30. All-Free-Download

All-Free-Download предлагает лёгкий поиск и прямые загрузки PSD, PNG и векторов.

31. Ego Icons

Ego Icons предлагает более 1500 премиальных иконок и 100 бесплатных векторных значков. Посетите также дочерние сайты, кликнув по кнопкам верхней навигационной панели.

32. AlienValley

На AlienValley представлен широкий ассортимент иконок высокого качества в обмен на ваш адрес электронной почты.

33. Dreamstale

Dreamstale снабдит вас отличными бесплатными иконками премиум класса при условии указания авторства.

34. DuckFiles

35. 1001 Free Downloads

1001 Free Downloads специализируется на плоских иконках, представленных множеством прекрасных и причудливых вариантов.

36. GraphicsBay

37. Pixeden

На Pixeden можно искать иконки в нескольких размерах. Здесь широкий выбор от 16х16 до 512х512 в формате PNG.

38. NounProject

NounProject – это удобный поиск, лёгкая загрузка и высокое качество иконок. Ссылка на автора обязательна. Членство с ежемесячным взносом снимает ограничения на скачивание.

39. Iconmonstr

Iconmonstr предлагает иконки в нескольких размерах без указания авторства.

40. Fusionplate

В этом посте я продемонстрирую как реализовать SVG иконки, способ реализации фоллбека, а также как превратить иконки в SVG-спрайт.

Базовая интеграция SVG-элементов

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

По скриншоту выше вы можете видеть, что я использую иконки (Twitter, Dribbble и GitHub), чтобы символически ссылаться на свои рабочие профили. Я скачал эти иконки из flaticon , где было множество различных иконок и символов в векторном и растровом форматах.

PNG и SVG

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

Я использовал Sketch для получения PNG-иконок, и я снова им воспользуюсь, чтобы подготовить SVG иконки.

Если вы посмотрите на скриншот выше, вы заметите, что я назвал все группы и фигуры в левой панели соответствующим образом (в Adobe Illustrator есть такой же список в панели Layers). Очень важно называть все исходники правильно, это не только поможет хорошо организовать проект, но и поможет в последующих этапах этого урока.

Экспорт SVG-версий

Теперь я экспортирую иконки в SVG иконки, это очень просто сделать с помощью инструмента нарезки в Sketch (Slicing). Для более детального описания работы этой опции изучите Понимание опций экспорта в Sketch . Я буду экспортировать их как отдельные файлы и помещу их в папку с изображениями в своем проекте.

В норме, чтобы показать картинку на сайте вы ссылаетесь на исходник с помощью элемента с атрибутом src или чем-то похожим:

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

twitter-icon Created with Sketch.

Это одна из иконок, которую я экспортировал, в формате XML. Этот код очень похож на HTML (это структурный формат), что означает, что мы можем встраивать его прямо в страничку.

Добавление SVG в HTML

Давайте начнем с базовой HTML-страницы, которая включает PNG-иконки с их анкорами, и контейнером:

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

twitter-icon Created with Sketch.

Я разместил SVG прямо над соответствующими PNG-иконками в страничке HTML. На данный момент я оберну строку с обычным PNG-изображением в тег комментария, чтобы оно не появлялось рядом с версией SVG

Более чистый SVG

Я также почищу код в своем SVG. Удаление элементов атрибута опционально, так как большинство фрагментов, которые я удаляю, не изменят поведения SVG. Вот код до и после, на случай если вы захотите проделать то же самое:

twitter-icon Created with Sketch.

Посмотрите, какие элементы я удалил. Элементы The , , и сейчас не нужны, но они пригодятся дальше в этом уроке. Также там есть несколько элементов которые ссылаются на группы, и соответствуют группам, созданным в моем Sketch-документе. По умолчанию Sketch размещает все внутри страницы, отсюда и элемент группы

Вот одна из моих SVG иконок на страничке, и вы заметите, что моя оригинальная PNG-иконка все еще на месте, но она закомментирована. Это изображение PNG и будет нашим фоллбеком.

Удаление комментариев

Сначала я удалю комментарии. Надо подвинуть вверх и к элементу svg>, сразу после группы, содержащей саму иконку. Затем я оберну в SVG элемент под названием foreignObject. Если брайзер не сможет понять векторную информацию SVG, тогда он будет ссылаться на “внешний объект ” и будет использовать из него. Нам также нужно дать браузеру понять, что нужно обращаться к векторной версии, если такая поддерживается. И для этого используется элемент , в который я обернул и группу, и сам foreignObject. И вот обновленный код:

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

Создание SVG-спрайта

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

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

Для начала я создам новый элемент в элементе моей страницы, сразу перед закрывающим тегом. Этот новый SVG будет содержать все иконки, которые до этого были на странице.

Затем мне нужно туда поместить иконки. Мне не надо переносить весь SVG, нужно только элемент group с его содержимым. Это я могу встроить в элемент в голове файла.

David Darnes - Web Designer & Front-end Developer

Примечание : Если вам удобно использовать Grunt, вот плагин , который автоматизирует объединение всех отдельных SVG-файлов.

Прячьте!

Теперь у нас все SVG иконки в head, и нужно их спрятать; добавляем атрибут display=”none” к новому svg>, что значит ни одна иконка не будет появляться вверху странички.

Определение каждой SVG иконки

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

David Darnes - Web Designer & Front-end Developer

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

Иконки теперь определены, но нужно также обозначить метод их использования, и для этого возьмем элемент use. Элемент позволяет взять любой элемент из и вызвать его в любом месте на странице. Мы выбираем элемент по его ID, поэтому было важно назвать иконки правильно еще в документе Sketch. Посмотрите на ID в примере выше, и как я ссылаюсь на каждый, используя элемент .

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

Совершенствуем наш SVG-спрайт

Еще один плюс к использованию SVG-спрайтов состоит в том, что код страницы гораздо чище, и его проще читать другим людям, которые также работают над сайтом. Мы можем еще немного улучшить результат. Внизу я заменил элементы в своем SVG-спрайте на элемент symbol, плюс я передвинул атрибут viewbox из SVG элементов на странице к новым элементам symbol.

David Darnes - Web Designer & Front-end Developer

Использование не только более правильно с точки зрения семантики, в моем примере, но также избавляет от необходимости повторять атрибут viewbox вместе с элементами и . Мы можем вернуть элементы title иdesc, которые удалили раньше, и использовать их для улучшения доступности иконок. Примечание : Помните, что содержимое элементов по умолчанию отображается в IE7.

David Darnes - Web Designer & Front-end Developer Twitter Twitter account Dribbble Dribbble portfolio GitHub GitHub account

Меняя элемент group на symbol. Мы можем реализовать все эти улучшения . Можно удалить элемент из SVG-спрайта, делая код еще чище.

Заключение

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

Теги: , ,

Иконки PSD – незаменимый элемент любого дизайна UI , не уступающий по важности даже шрифтам, однако на практике редко кто занимается разработкой собственных иконок для каждого веб-проекта. С другой стороны, на поиск подходящих по качеству и оформлению иконок также уходит немало времени, но сегодня мы решили помочь вам, и подготовили подборку бесплатных наборов иконок на все случаи жизни.

01. Icons8

Icons8 — набор из 20 тысяч плоских иконок в любых форматах, размерах и цвете! Здесь представлены такие категории, как бизнес, одежда, еда и многие другие. Icons8 можно скачать в виде приложения для Mac или в виде ZIP-архива .

02. Freepik

Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI , .EPS и .SVG .

03. Iconfinder

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

04. 195 flat flag PSD icons

Отличный набор иконок PSD для сайта, который можно использовать при разработке международного сайта, интернет-магазина или блога о путешествиях. В набор входит 195 бесплатных иконок с закругленными углами.

05. Metro UI Icon Set

Если вы фанат Windows 8 , то вам стоит познакомиться с этим бесплатным набором иконок. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.

06. Modern UI Icons

Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS . Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone .

07. 350 pixel perfect icons

Невероятный набор из 350 идеально четких иконок для приложений или сайтов. При этом их можно изменять в размере без потери качества.

08. 80 mini icons

80 идеально четких миниатюрных иконок, которые можно скачать как в PSD-формате , так и в виде иконического шрифта. Эти опрятные и утонченные социальные иконки PSD идеально подойдут для проектов любого типа.

09. Simple and practical web icon vector graphic

Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.

10. Free flat icons

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

11. Mono icons

Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.

12. Metrize icons

Бесплатная коллекция в стиле Metro , которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD , SVG , ESP и AI , но также и веб-шрифты.

13. Tab Bar Icons iOS 7

Элегантный набор иконок, разработанных под вдохновением от iOS 7 , который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD , AI и ESP .

14. Chunky Pika Icon Set

Иконки в стиле Pika , созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.

15. Iconic

Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG , SVG , SWC и других форматах, что позволит адаптировать их под собственные дизайны.

16. 44 Shades of Free Icons

Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.

17. Token icon set

Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом .

18. Flat icons (PSD)

Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.

19. Free 32px icons set

Набор, в котором вы найдете иконку PSD любого назначения: Skype , Facebook , Twitter , RSS , чашка кофе, “лайк ” и многое другое.

20. 48 flat designer icons

Если вы фанат минимализма, то этот набор точно вам понравится. Он состоит из 48 бесплатных иконок, отражающих офисные задачи, социальные аспекты, а также путешествия. Все они представлены в форматах AI и PNG , и их можно масштабировать без потери качества.

21. Plex icons set

Набор включает в себя свыше 100 иконок, среди которых календари, антивирус, часы, электронная почта, приложения Microsoft Office , социальные сети, а также многое другое.

22. Vectory mini free

Набор из более чем 1000 иконок PSD , разработанных командой Icojam . Все они представлены также в формате PNG . Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.

23. Eldorado mini free

Очередная коллекция мини-иконок от Icojam , в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.

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

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

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

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

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

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

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

icomoon.io

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

flaticon.com

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

Рисуем сами

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

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

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

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

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.

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

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

Спрайт .icon { background-image: url(your.svg); }

Плюсы:

• короткий читабельный код;
• картинка кешируется;

Минусы:

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

Base64 в data URI .icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...); }

Плюсы:

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

Минусы:

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

SVG в data URI .icon { background-image: url("data:image/svg+xml;utf8,