Главная > Интернет > Векторные иконки svg. Как реализовать кросс-браузерные SVG иконки

Векторные иконки 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-элементов

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

Теги: , ,

Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG . Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.

Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px ). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds . Затем жмём save as и выбираем SVG , и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.

Приёмы для уменьшения размеров файла.

(Смотрите по оптимизации)

Чтобы добиться наименьшего размера SVG , логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO . Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS , так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.

Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool , который поможет удалить точки и при этом оставить общую форму той же.

Предварительная оптимизация

Smart Remove Brush Tool удалил точки

Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).

Точки вне сетки

Выравнивание по сетке

Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.

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

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... etc

В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .

Оригинал: 1,413b После оптимизации: 409b

В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)

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

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

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