Svg для сайта – Используем SVG на сайте / Habr

Содержание

Практическое руководство о 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, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки 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
<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE "image/svg+xml" \
                                    "text/css" \
                                    "text/html" \
                                    "text/javascript"
                                    ... etc
  </IfModule>
</IfModule>

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

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

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

Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент <use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.

После оптимизации с использованием <use>: 311b

Размер файла стал меньше на ~78%

Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.

svgontheweb.com

Использование SVG на вашем сайте

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

Крошечный размер файла

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

Масштабируемость

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

Взаимодействует с DOM

SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.

Легко модифицировать и адаптировать

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

Инструменты для работы с SVG

Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, мо

abraxabra.ru

html - Можно ли весь сайт делать на svg?

Stack Overflow на русском
  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

    ru.stackoverflow.com

    за и против / HTML Academy corporate blog / Habr

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

    Очень коротко: что такое SVG


    SVG (Scalable Vector Graphics) — язык разметки векторной графики, созданный W3C, подмножество языка XML. Предназначен для описания векторной и смешанной (векторно-растровой) двухмерной графики, поддерживает анимацию и интерактивность. В 2001 году вышла версия 1.0, в 2011 — версия 1.1, актуальная ныне. Поддержка браузерами хорошая, но есть нюансы в IE, пикселизация при увеличении в Opera Mini и Opera Mobile 12.1.

    Плюсы и сложности применения SVG


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

    Создать не просто красивый, но действительно хороший дизайн веб-страницы без понимания того, как эта страница будет загружаться, показываться в браузере, адаптироваться к размерам вьюпорта, меняться при модификации контента, просто невозможно. Исходя из этого, можно сказать, что веб-дизайнер — это техническая специальность (возможно, суть этой работы лучше передаёт термин «веб-инженер»), по большей части подразумевающая использование логики и знаний, и лишь малой толикой которой является художественное творчество. Иными словами, плох тот веб-дизайнер, который совсем не умеет верстать.

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

    Рассмотрим список плюсов SVG подробнее:

    SVG легко модифицируется (причём, как в графическом редакторе, так и на самой странице средствами CSS). Поменять расположение, форму, размер, пропорции, цвет, заливку и все прочие свойства составляющих частей изображения проще, чем в случае с растровой графикой. При работе с растром придётся хранить «исходник» в формате со слоями, все изменения делать в нём, экспортировать. С SVG обычно необходимости в «исходнике» просто нет.

    Для экранов с повышенной плотностью пикселей достаточно одного изображения. В случае с растровой графикой на данный момент (весна 2015 г.) нужно, минимум, три (!) версии картинки: 100% макетного размера, 200% и 300%. В случае использования SVG, достаточно одной версии — как и для любого векторного формата, пиксели, нужные для показа изображения, «возникают» непосредственно перед показом, исходя из необходимого пиксельного размера.

    SVG быстро загружается. Да-да, ведь, как мы выяснили выше, дизайнеры должны думать и о скорости загрузки страницы тоже, ведь чем больше времени проходит от отправки запроса до показа страницы, тем ниже конверсия проекта. Во-первых, SVG-файлы, как правило, имеют меньший размер файла, чем их растровые версии (исключения составляют изображения малого пиксельного размера и сложные векторные изображения со множеством форм). Во-вторых, в один SVG-файл можно добавить несколько версий изображения и показывать их по определённым условиям (уменьшение количества запросов к серверу). В-третьих, в SVG можно использовать «клонирование» — единожды прописать форму (градиент, текстуру) и многократно использовать её, ссылаясь на оригинал. Есть, правда, и минус: отрисовка SVG в браузере чуть медленнее, чем показ растрового изображения, но чтобы заметить эту разницу, нужно сравнивать большие и сложные изображения.

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

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

    Свободно распространяемое ПО. Для работы с SVG не обязательно использовать Adobe Illustrator (как стандарт в мире векторной графики), достаточно свободно распространяемого Inkscape. Есть и ряд других инструментов.

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

    Юрий Ветров, руководитель отдела проектирования и дизайна Mail.Ru

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



    Денис Кортунов, UX-директор Acronis

    Это вопрос не совсем к дизайнерам, но к веб-технологам или фронтенд-разработчикам. Сейчас немало дизайнеров изначально делают дизайн в векторе, и нет никакой проблемы представлять графику в виде SVG. Основная проблема — совместимость с разными браузерами. Такие картинки зачастую просто не отображаются и нужно много «танцев с бубнами». Распространённая альтернатива SVG — использование шрифтов. Это «хак», позволяющий использовать векторные изображения в вебе.

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



    Дмитрий Зимин, менеджер проекта «Киноход»

    Что касается того, «почему не используют SVG», я могу говорить только за наш проект. У нас есть особенность: большая часть контента — это фотографии (постеры, кадры из фильма, превью ролика).

    Интерфейс в мобильном приложении хотим перевести на вектор, потому что нарезать картинки в трёх разрешениях (х.png, @2x.png, @3x.png) и утомительно, и провоцирует на ошибки. Но, пока банально не дошли руки.


    Артём Геллер, главный разработчик сайта Kremlin.ru

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

    При этом, мы заменяем элементы в SVG на PNG, в том случае, если с этим форматом конкретная версия браузера не дружит.



    Никита Михеенков, директор по развитию Nimax Design

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

    Вот несколько примеров с векторной графикой: один, два, три.

    Вместо заключения: как делать SVG


    Конечно, дизайнеру не нужно держать в голове все возможные технические мелочи разработки проекта, но соблюдение нескольких простых принципов, всё же, необходимо:
    1. Лучше стараться обходиться как можно меньшим числом точек. Чем меньше точек, тем, как правило, проще редактировать файл и тем меньших он будет размеров. Если используются формы, нарисованные другими специалистами, имеет смысл их упростить — уменьшить количество как опорных, так и управляющих точек. В Adobe Illustrator наиболее оптимальные (с технической стороны) контуры получаются при рисовании инструментом «перо» при грамотном выборе типа точек. Наименее оптимальные, обычно, являются результатом преобразования нарисованных кистью линий в векторные участки, или бездумной трассировки.
      Изображение 1
      (Получено от дизайнера)
      83 Кб
      Изображение 2
      (оптимизировано количество точек)
      28 Кб
      Изображение 2
      (оптимизирована разметка)
      10 Кб
    2. Следует использовать пиксельную сетку и стараться располагать контуры так, чтобы их края были ровно на границе пикселей или на 1/2 пикселя. Если планируется изменения размеров элементов (например, иконки), то нужно проверить, как изменённый размер ляжет на пиксельную сетку. При этом важно помнить о том, что экран — это среда с серьёзными ограничениями, на любом размере попасть в пиксели невозможно, однако для наиболее частых размеров — нужно постараться.
      Формы выровнены по пиксельной сетке
      (400%)
      Формы не выровнены по пиксельной сетке
      (400%)
    3. Стоит создавать и сохранять SVG в том виде, в котором планируется дальнейшее использование этих элементов в дизайне. Иногда встречается ситуация, при которой к PSD-макету приложены использованные SVG, но в самом макете использована векторная форма с какими-то добавлениями (текстовой слой, что-то дорисовано растром, наложен какой-либо эффект). Подобный подход может исключить возможность использовать векторную графику для такого элемента дизайна.
    4. Нужно использовать как можно меньше фигур, группировать только необходимое. Следует удалять фигуры, которые не являются составными частями картинки или невидимы (прикрыты другими фигурами).
    5. Все символы, текстуры и рисунки кистью лучше преобразовывать в обычные векторные участки, не применяя растровые эффекты (Adobe Illustrator) и режимы наложения.

    Полезные ссылки

    habr.com

    6 бесплатных онлайн SVG-редакторов: сравнение

    От автора: SVG-изображения не так распространены, как наши любимые растровые форматы PNG и JPG, однако преимущества векторной графики привлекают все больше дизайнеров. Дизайнеры все чаще используют векторную графику в своих проектах. Раньше нам нужно было скачивать десктопные приложения типа Adobe Illustrator и Inkscape, но в 2017 проектировать векторную графику можно, не выходя из браузера. Если вы искали бесплатный SVG-редактор, то можете начать с этих шести бесплатный инструментов.

    Vectr

    Vectr – хороший выбор для новичков и продвинутых пользователей SVG. Интерфейс аккуратный и не переполнен множеством инструментов, которыми вы не будете пользоваться. Редактор хорошо подходит для новичков в векторной иллюстрации. Пользователь не должен теряться среди инструментов, которые непонятно для чего используются. В комплекте идет несколько уроков. Даже если вы полный ноль с SVG, у вас есть возможность быстро научиться.

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

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

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее

    Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.

    Возможно, самая крутая функция в Vectr – вы можете делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.

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

    С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP.

    RollApp

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

    Для работы в RollApp нужен аккаунт. Можно зарегистрировать новый или войти с помощью Google, Facebook, Amazon. Очень удобно, я ненавижу создавать тысячи новых аккаунтов лишь для того, чтобы увидеть приложение.

    После авторизации откроется следующая страница:

    Inkscape во всей красе! Без сомнения, RollApp – самое богатое на функционал приложение из списка. Вы буквально используете Inkscape в браузере! Я не сравнивал все до мелочей, но на вид в этом приложении есть ВСЕ фукнции Incscape, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д.

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

    BoxySVG

    Если вы давно читаете SitePoint, вам должен быть знаком редактор BoxySVG, потому что за последние 12 месяцев мы уже рассказывали про него. Не буду делать детальный обзор, так как это уже сделано в этой статье.

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее

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

    Janvas

    Пару лет назад Janvas был очень популярным SVG-редактором. К сожалению, последнее время данный редактор не разрабатывается, но даже так он до сих пор работает. Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас. Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице Google+. Janvas был довольно мощным инструментом.

    Главная проблема Janvas – он немного устарел. Браузеры развиваются, а приложения, которые не следуют за браузерами, с каждым днем становятся все менее стабильными. В Janvas множество функций: фигуры, текст, инструменты рисования, пути, маски и слои. Однако пользователи на форумах говорят, что множество этих функций не приносят желаемого результата.

    Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.

    DrawSVG

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

    С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т.д. Также SVG можно экспортировать в PNG.

    SVG-edit

    SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.

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

    С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.

    Заключение

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

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

    PS: также можно попробовать Figma. Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.

    Автор: Ada Ivanoff

    Источник: https://www.sitepoint.com/

    Редакция: Команда webformyself.

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее

    Препроцессоры Sass и Less

    Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

    Подробнее

    webformyself.com

    30 коллекций бесплатных и свежайших иконок в формате SVG

    Привет, друзья. Спешу представить Вам подборку самых новых и свежих, а так же бесплатных иконок в формате SVG. Их Вы можете использовать для создания дизайна своих сайтов и шаблонов. Тут 30 подборок различных иконок на самую разную тематику, таким образом появляется больше шансов найти именно то, что нужно.

    Огромное спасибо http://www.cssauthor.com и рекомендую прошлые подборки:

    Светлые иконки — Essential

    Скачать

    370 SVG иконок для веб интерфейса

    Скачать

    Цветные иконки для сайта — Practicons

    Скачать

    SVG иконки в стиле iOS7

    Скачать

    Скачать бесплатные иконки — Fanaticons

    Скачать

    Подборка SVG иконок с закругленными углами

    Скачать

    Подборка иконок — Bitcoin

    Скачать

    Flat иконки — Pixelvicon

    Скачать

    SVG иконки кредитных карт

    Скачать

    Бесплатные иконки социальных сетей в формате SVG

    Скачать

    100 бесплатных иконок на разную тему

    Скачать

    Минималистические иконки — Hawcons

    Скачать

    SVG иконки — Crispy

    Скачать

    Светлые и бесплатные иконки — Feather

    Скачать

    Бесплатные белые SVG иконки

    Скачать

    Несколько бесплатных векторных иконок

    Скачать

    Светлые и стильные иконки в стиле Flat

    Скачать

    Круглые иконки — Roundicons

    Скачать

    SPA — иконки в формате SVG

    Скачать

    SVG иконки под названием — Museum

    Скачать

    Иконки в стиле Stroke

    Скачать

    Несколько Flat иконок

    Скачать

    Иконки с тонкими линиями бесплатно

    Скачать

    Flat иконки в формате SVG — Ballicons

    Скачать

    Иконки на кухонную и ресторанную тематику

    Скачать

    Векторные иконки с тонкими линиями

    Скачать

    Иконки сердец бесплатно

    Скачать

    Иконки в SVG разнообразных разрешений файлов

    Скачать

    Иконки дня всех влюблённых

    Скачать

    Бесплатные социальные иконки

    Скачать

    beloweb.ru

    Создание svg иконок для сайта (favicon svg)

    От автора: простые, часто геометрические и выполненные в различных размерах иконки (favicon) отлично подходят под SVG формат. К сожалению, до недавнего времени браузеры очень плохо поддерживали SVG фавиконы. В Firefox 41 появилась поддержка данного формата, в Safari 9 для десктопной и мобильной версии (с некоторыми уступками). Однако в IE/Edge и Chrome все еще нет поддержки, по крайней мере, на данный момент. Тем не менее, ситуация вскоре изменится (должна измениться). Так что стоит уделить немного времени и изучить возможности и синтаксис SVG фавиконов, дабы подготовить ваш сайт к грядущим временам.

    Проблема

    С момента создания картинки 16х16 пикселей изменилась сама концепция фавиконов. Теперь фавикон должен работать с целой серией иконок, заточенных под тачскрины, с плиточным интерфейсом новых версий Windows, со специальными возможностями Retina дисплеев и т.д. Комплексное решение (от realfavicongenerator) включает в себя довольно длинный список всевозможных вариантов:

    <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" href="/favicon-96x96.png"> <link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">

    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

    <link rel="icon" type="image/png" href="/favicon-32x32.png">

    <link rel="icon" type="image/png" href="/android-chrome-192x192.png">

    <link rel="icon" type="image/png" href="/favicon-96x96.png">

    <link rel="icon" type="image/png" href="/favicon-16x16.png">

    <link rel="manifest" href="/manifest.json">

    <meta name="msapplication-TileColor" content="#da532c">

    <meta name="msapplication-TileImage" content="/mstile-144x144.png">

    <meta name="theme-color" content="#ffffff">

    Хотя большинство из этих файлов можно и просто положить в корень вашего сайта, а соответствующие приложения выберут, что им необходимо, не прописывая все их в явном виде в HTML, все же это не самый удачный подход. Слишком много контента нужно создать, а потом еще и обслуживать. Один масштабируемый файл будет работать намного лучше. К примеру, логотип нашего сайта сохранен в формате favicon.svg:

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <title>the new code favicon</title> <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" fill="#f06823"/> <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" fill="#f4e302" /> <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9" fill="#2f8bca" /> </svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">

        <title>the new code favicon</title>

        <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" fill="#f06823"/>

        <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" fill="#f4e302" />

        <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9"  fill="#2f8bca" />

    </svg>

    И выглядит так:

    Фавикон можно добавить строкой кода между тегов head:

    <link rel="icon" type="image/svg+xml" href="favicon.svg">

    <link rel="icon" type="image/svg+xml" href="favicon.svg">

    Несколько замечаний:

    Составляющие рисунка выполнены отдельными, не перекрывающими друг друга фигурами: значок должен иметь размер 16х16 пикселей. Тут важны простота и четкость.

    По тем же самым причинам фон в SVG иконке прозрачный, так что ее можно использовать в различных ситуациях.

    Viewbox для SVG должен быть квадратным.

    Рисунок должен занимать наибольшую площадь на viewBox’е (холст в SVG).

    Тег <title> описывает цели, для которых предназначен рисунок; также стоит добавить <desc> и <title> для каждого полигона <polygon>.

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    Чтобы SVG заработал необходимо указывать MIME тип image/svg+xml.

    Добавляем поддержку iOS

    В iOS 9 также поддерживаются SVG фавиконы в закрепленных закладках, но с некоторыми оговорками:

    Элементы SVG должны быть черного цвета.

    В ссылке на фавикон должен быть указан неофициальный атрибут mask-icon.

    Не обязательно, но цвет можно изменить также с помощью неофициального атрибута color. Поддерживаемые значения hexadecimal, keyword и rgb. Не рекомендуется использовать яркие цвета.

    Учитывая вышеописанные условия, я бы использовал новый SVG файл без информации о цветах:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <title>the new code favicon</title> <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" /> <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" /> <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9" /> </svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">

        <title>the new code favicon</title>

        <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" />

        <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125

        298.5,82.5 200.6,154.5" />

        <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6

        399.1,192.2 340.2,154.5 199.5,255.9" />

    </svg>

    Чтобы это заработало на iOS, добавляем строку:

    <link rel="mask-icon" href="icon.svg" color="blue">

    <link rel="mask-icon" href="icon.svg" color="blue">

    Собираем мысли вместе

    Предположим, что вам больше не нужно поддерживать IE8 и более ранние версии, значит, формат .ico можно выбросить, а браузерам оставить файл PNG. Чтобы фавикон отображался во всех браузерах и не забыть про SVG, расположим ссылки в следующем порядке:

    <link rel="icon" type="image/png" href="favicon.png"> <link rel="mask-icon" href="icon.svg" color="blue"> <link rel="icon" type="image/svg+xml" href="favicon.svg">

    <link rel="icon" type="image/png" href="favicon.png">

    <link rel="mask-icon" href="icon.svg" color="blue">

    <link rel="icon" type="image/svg+xml" href="favicon.svg">

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

    Для iOS и IE все еще нужно указывать отдельные иконки; SVG в данных браузерах еще не работает.

    Заключение

    SVG как будто создан для фавиконов, и остается только надеяться, что в скором будущем и Chrome будет его поддерживать. Идеальным было бы, чтобы в одном SVG файле для различных степеней детализации и размеров использовались разные элементы <symbol> или <use>… хотя мы и так уже хотим слишком многого.

    Источник: http://thenewcode.com/

    Редакция: Команда webformyself.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    PSD to HTML

    Верстка сайта на HTML5 и CSS3 с нуля

    Смотреть

    webformyself.com

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *