Как встроить svg изображение в html. Создадим изображение 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
В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
Дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
Я вам больше скажу: SVG - это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу - становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого - особенности.
Первый и самый простой - элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку - браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ - фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите - результат будет таким же, как с : за стеклом, но внутри что-то работает.
.picture { background-image: url(picture.svg); }
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ, через
На самом деле, вместо
За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.
Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное . Достаточно вспомнить, что когда-то через
Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.
Квадрат
С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты - ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях .
Минус в том, что такие картинки не кэшируются отдельно от страницы - хотя это можно обойти через символы и юзы, но это длинная история, мы об этом ещё поговорим отдельно.
SVG гораздо больше, чем просто формат графики - это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан , это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.
В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: и фона, а потом уже усложняйте - если не хватает.
Видеоверсия
Подробная статья об оформлении содержимого в элементе SVG
Графика в формате SVG особо часто применяется для создания иконок и одной из самых распространенных техник для этого являются SVG-спрайты с использованием SVG use для инстанцирования иконок в нужном месте документа.
Инстанцирование иконок или любого другого содержимого SVG в элементе
Но перед тем как начать, давайте быстро рассмотрим основную структуру и группирование элементов в SVG, постепенно перейдя к
Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG
SVG включает в себя 4 основных элемента для определения, структурирования и создания ссылок на содержимое SVG в документе. Эти элементы дают возможность многократного использования изображений, оставляя код читаемым и поддерживаемым. Из-за природы SVG некоторые из этих элементов имеют функциональность, аналогичную соответствующим командам в графических редакторах.
4 основных группирующих и связывающих элемента SVG это
Элемент
Группирование элементов полезно в тех случаях, когда вы хотите применить стиль ко всем элементам группы, а также, когда вы хотите анимировать все элементы группы, сохранив соотношение между ними.
Элемент
Элемент
У элемента
Элемент
Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор - это атрибут xlink:href и спозиционировать его, задав атрибуты x и y . Вы можете применить стили к элементу
Но что является содержимым
Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе
- Структурирование, группировка и ссылки в SVG - Элементы g, use, defs и symbol
- Разбираемся в системе координат SVG (Часть 1): Viewport, viewBox и PreserveAspectRatio
SVG и теневой DOM
Когда вы ссылаетесь на элемент с помощью
На экране отображается иконка, содержимое которой определено внутри
Но элемент
Ответ - в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).
Что такое теневой DOM?
Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же - теневой DOM.
В случае с элементом SVG
Итак, содержимое
Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к
Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ - да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано .
После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента
Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.
Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:
- Теневой DOM 101 (перевод на Frontender.info)
- Введение в теневой DOM (Видео)
С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое
Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:
Use path#line { stroke: #009966; }
Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.
Возможно, вы, как и я ожидаете, что презентационные атрибуты имеют самую высокую специфичность среди всех стилевых правил. Ведь обычно внешние стили переписываются внутренними декларациями, а те в свою очередь переписываются строчными стилями атрибутов - они имеют максимальную специфичность, а, соответственно, и приоритет перед остальными стилями. И хотя это ожидание имеет смысл, действительный механизм работы отличен.
На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.
Теперь, когда мы выяснили это, вернемся к нашему элементу
Мы знаем, что мы не можем задать стили внутри
Но мы также знаем, что как и в случае с элементом
Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри
Однако, это вызывает пару вопросов:
- Цвет заливки будет унаследован всеми потомками
элемента
, даже теми, к которым вы не хотите применять стили (но если внутри у вас всего один элемент, то этой проблемы не будет). - Если вы экспортировали SVG из графического редактора или по каким-либо иным причинам не можете изменять код SVG, тогда вы в конечном итоге будете работать с SVG, к которому уже применены презентационные атрибуты (если вы явно не отмените это при экспорте в формат SVG) и значения этих атрибутов будут иметь приоритет над унаследованными от
.
И даже если вы можете редактировать код SVG и можете избавиться от них, я настоятельно рекомендую этого не делать по следующим причинам:
- Удаление атрибутов ради последующей установки определенных свойств сбросит значения этих свойств на дефолтные, а это, как правило, черная заливка и обводка (применительно к цветам).
- Сбрасывая значения, вы вынуждаете себя задавать стили для всего набора свойств.
- Презентационные атрибуты, которые изначально заданы, являются отличным запасным вариантом на случай возникновения проблем с внешними стилями. Если CSS не загрузится, у ваших иконок будет по-прежнему привлекательный вид.
Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.
Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных
Давайте начнем с простых примеров и постепенно перейдем к сложным.
Переписывание значений презентационных атрибутов с помощью CSS
Презентационные атрибуты переписываются любой декларацией стилей. Мы можем это использовать, для того, чтобы презентационный атрибут получил значение, унаследованное от стилей
Это просто благодаря ключевому слову CSS inherits . Взгляните на следующий пример - иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project .
Содержимое нашей иконки с мороженым (path) определено внутри элемента
Мы выводим множественные экземпляры иконки с помощью
Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox , но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.
Icon { width: 100px; height: 125px; }
С этим кодом мы получили следующий результат:
Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого . Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры - он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.
Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:
Use.ic-1 { fill: skyblue; } use.ic-2 { fill: #FDC646; }
Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path . Чтобы это не произошло, нам надо вынудить path унаследовать цвет:
Svg path { fill: inherit; }
Вуаля! Цвета, заданные элементам
Теперь эта техника работает, после того как мы вынудили содержимое
Оформление содержимого с помощью свойства CSS all
Некоторое время назад, при работе над иконкой, активируемой с помощью
Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:
Path#myPath { fill: inherit; stroke: inherit; stroke-width: inherit; transform: inherit; /* ... */ }
Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit .
К счастью, нам поможет свойство CSS all . В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.
Используя свойство all мы можем сделать так:
Path#myPath { all: inherit; }
Это прекрасно работает во всех браузерах, поддерживающих all , однако надо учитывать следующий важный момент: эта декларация задает элементу наследование буквально всех свойств его родителя, в том числе и тех, которые вы не хотите задавать элементу. Поэтому, если вы не хотите, чтобы стилизовались все свойства CSS, вам это не подойдет - это крайняя мера и она частично подходит только тогда, когда у вас есть нестилизованный элемент и полный контроль над его свойствами в CSS. Если вы используете эту декларацию и не определяете значения для всех свойств CSS, они будут каскадироваться пока не найдут значение для наследования, в большинстве случаев это дефолтные стили браузера.
Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS - он унаследует стили, иначе нет.
Возможность активировать наследование презентационными атрибутами всех стилей
Использование переменной CSS currentColor для оформления содержимого
Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом .
Идея состоит в том, чтобы одновременно применять к
Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета - один для передней капли, а второй для задней.
Во-первых, начнем с кода для этого изображения: у нас есть symbol , содержащий описание иконки и три экземпляра
Если мы зададим цвет заливки (fill) в элементе
Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color .
Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет - это будет место в разметке, где определяется иконка, то есть внутри
Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента
Если бы мы использовали ключевое слово inherit , чтобы вынудить презентационные атрибуты унаследовать значения от
Теперь, используя свойства fill и color в
Codrops-1 { fill: #4BC0A5; color: #A4DFD1; } .codrops-2 { fill: #0099CC; color: #7FCBE5; } .codrops-3 { fill: #5F5EC0; color: #AEAFDD; }
Каждый элемент
Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента
Вот демо с использованным кодом:
Этот двухцветная техника отлично подходит для двухцветных лого. В своей статье Фабрис создал три различных версии лого Sass, изменяя цвет текста относительно фона.
Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом
Будущее: оформление содержимого c помощью переменных CSS
Код робота содержит все составляющие его цвета:
Теперь, мы не будем использовать переменные CSS в качестве значений атрибута fill для каждого контура. Вместо этого мы будем их использовать в качестве цветов заливки используя свойство CSS fill , сохранив на месте все атрибуты fill . Эти атрибуты будут использоваться в качестве запасного варианта для браузеров, не поддерживающих переменные CSS - изображение будет выглядеть в своем изначальном виде, если переменные CSS не работают.
С добавленными переменными код будет следующим:
Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill .
Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью
После этого зададим значения переменных для use , чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary , secondary и tertiary .
#robot-1 { --primary-color: #0099CC; --secondary-color: #FFDF34; --tertiary-color: #333; }
Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:
Вы можете использовать сколько угодно копий изображения и для каждой из них задать набор различных цветов, создав различные темы. Это частично полезно, когда вы хотите оформить лого различными способами в зависимости от контекста и в других подобных случаях.
Как было упомянуто, браузеры, не поддерживающие CSS-переменные используют заданные презентационные атрибуты в качестве запасного варианта, а браузеры с поддержкой переменных CSS используют их для заполнения свойства fill и переписывания атрибутов. Но что происходит, если браузер поддерживает переменные CSS, но вы забыли задать эти переменные в стилях или задали некорректное значение?
Для нашего робота-хипстера мы задали три переменных и только несколько его фрагментов не зависят от них - ведь он изначально разрабатывался для возможной темизации. Поэтому если вы запустите этот код в браузере с поддержкой переменных CSS и удалите все декларации с объявлением этих переменных, вы получите следующий результат:
Если значения переменных не заданы или не корректны, браузер будет использовать свой цвет по умолчанию, а это обычно черный цвет для заливки и обводки в SVG.
Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой - имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.
Итак, теперь код нашего робота выглядит так:
И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.
Используя эту технику, вы можете выводить этого робота где угодно на странице с помощью
Вы можете поэкспериментировать с демо, создать сколько угодно копий робота и раскрасить его любыми цветами - не забудьте только, что для этого обязательно надо использовать браузер с поддержкой переменных CSS :
Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.
Подводя итоги
Это была большая статья.
Используя возможности каскада CSS, оформление содержимого
Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.
Мы также можем получить другие способы оформления содержимого
Работа с многократно используемым содержимым SVG является одним из сложных вопросов SVG, это связано с поведением и местом расположения клонируемого кода. Здесь возникает очень много смежных вопросов, которые могут стать темой отдельных статей.
SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.
Для чего используют SVG
- Маленький размер файла, который хорошо сжимается
- Масштабирование до любого размера без потери качества
- Отлично смотрится на дисплеях retina
- Полный контроль дизайна при интерактивности и в фильтрах
Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:
Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.
После того, как вы сохраните файл, появится еще одно диалоговое окно с опциями SVG. Честно говоря, я не очень много знаю о всех представленных в этом окне настройках. Существует спецификация SVG профилей, так что, если вам интересно можете почитать. Я считаю, что SVG 1.1 работает отлично.
Оба способа могут оказаться полезными.
Используем SVG в виде тега img
В Illustrator наш холст получился 612px ✕ 502px.
Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:
Как сделать кроссбраузерный SVG
Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.
Если вам необходимо использовать SVG, но также нужна поддержка вышеперечисленных браузеров, есть несколько вариантов решения проблемы. Я использовал несколько техник в различных проектах для решения этой проблемы.
Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:
if (!Modernizr.svg) { $(".logo img").attr("src" , "images/logo.png"); |
David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:
< img src = "image.svg" onerror = "this.onerror=null; this.src="image.png"" > |
Стилевое оформление SVG
Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.
< ellipse class = "ground" > ellipse > < path class = "kiwi" > path > |
Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.
В SVG имеются забавные фильтры. Например размытие:
< svg ... = "" > < filter id = "pictureFilter" > < feGaussianBlur stdDeviation = "5" > feGaussianBlur > filter > |
Затем вы можете при необходимости применить это в css:
filter: url (#pictureFilter); |
Вот, что получилось:
Поддержка “inline” SVG браузерами
Один из вариантов фолбэка для такого типа SVG:
< svg > ... svg > < div class = "fallback" > div > |
Затем снова используем Modernizr:
Logo-fallback { /* Make sure it"s the same size as the SVG takes up */ No-svg .logo-fallback { background-image: url (logo.png); |
Использование SVG в качестве объекта object
Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:
Что такое SVG
SVG - это двухмерная векторная графика, дословно «масштабируемая векторная графика», и, тем не менее, это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online, ConceptDraw PRO и другие.
Фактическое развитие SVG началось с версии 1.1 опубликованной W3C в 2011 году. Анонс улучшенной версии 2.0, превосходящей возможности Flash, намечен на 2017 год. Благодаря языку разметки XML, легко встраивается в HTML документ.
SVG-объекты ничем не отличаются от стандартных в графических редакторах.
Давайте абстрагируемся от музыкальных метафор и пробежимся по основным советам по составлению композиции. Убедитесь:
Линии и ломаные линии
Многоугольники
Окружности и эллипсы
Кривые Безье
Сложные контуры
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например, визуализировать графики, круговые диаграммы, гистограммы
SVG для десктопа
SVG не теряет в качестве при масштабировании и не зависит от разрешения экрана
В связи с тем, что информация об объекте хранится в описательной форме, можно бесконечно увеличить графический примитив при выводе на графическое устройство
Объем данных, занимаемый описательной частью, не зависит от реальной величины объекта, что позволяет, используя минимальное количество информации, описать сколь угодно большой объект файлом минимального размера. Например, описание окружности произвольного радиуса требует задания только 3 чисел, не считая атрибутов.
Наличие прозрачного фона
SVG для мобильных
SVG хорошо выглядит без потери качества на мобильных устройствах и планшетах
Объекты SVG зачастую весят намного меньше растровых изображений
При помощи CSS3 и JavaScript можно менять стили и атрибуты для SVG-элементов
SVG идеально подходит для визуальных коммуникаций и микровзаимодействия с пользователем на мобильном устройстве
Анимация на основе SVG
Наличие прозрачного фона
Легко создавать и редактировать
Поддаётся gzip-сжатию и оптимизации без потери качества
Выжимаем максимум из SVG
Предостережение
С увеличением количества мелких деталей в изображении, растёт размер SVG-файла. Проще использовать jpeg или даже png. Например, изображение травы в векторе может весить 10мб, а тоже самое изображение в jpg будет весить 200кб.
Как работать с SVG. Что нужно знать в теории?
smooth curveto (S,s)
quadratic Bezier curveto (Q,q)
smooth quadratic Bezier curveto (T,t)
elliptical arc (A,a)
Структуру SVG документа в отдельном файле.
Для полноценной анимации будем использовать только inline-встраивание SVG.
Минимальный набор для встраивания в html:
viewBox="x y width height" - определяет пользовательскую область просмотра
Можно использовать аналог спрайтов, когда все иконки в одном файле, а областью видимости показываем только нужную.
Выравнивание с preserveAspectRatio необходимо для настройки пропорций изображения
Ось X в области просмотра:
xMin -левая граница области просмотра
xMid -центр по оси X
xMax -правая граница области просмотра
Ось Y в области просмотра:
YMin - по верху
YMid -по центру
YMax - по низу
meet - указывает, что изображение должно сохранить свои пропорции и быть полностью видимым (CSS-аналог background-size:contain;)
slice - указывает, что изображение должно сохранить свои пропорции и будет отмасштабировано в соответствии с максимальным граничным значением области просмотра (CSS-аналог background-size:cover;)
none - означает, что внутреннее изображение потеряет свои пропорции и будет использовать пропорции viewBox.
Основные примитивы SVG
В подробности вдаваться не буду (тема отдельной статьи), их описание можно найти в стандарте W3C https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#RectElement
А нас больше всего интересует тег, так как позволяет управлять любой точкой и кривыми безье в контуре. О нем будет рассказано ниже в практическом блоке. Важно знать, что существует несколько моделей построения кривых:
Моя задача подать материал максимально просто, поэтому за наглядные примеры http://www.petercollingridge.co.uk/svg-tutorial/paths благодарю Петра Колингриджа (Peter Collingridge).
По опыту компании, скажу что с абсолютными координатами точек работать проще.
Клонирование объектов с помощью тегов
У нас был проект, в котором использовалось много однотипных иконок с большим количеством цветовых оттенков. Задачу решили, создав глобальный inline-SVG для всех страниц с множеством переменных
Градиенты
Как работать с SVG. Что нужно знать на практике?
Var s = Snap("#svg"); // возьмем готовый svg на странице или создадим новый s = Snap(800, 600); // нарисуем новый контур var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ fill: "none", stroke: "#bada55", strokeWidth: 5 });
Суть анимации, плавно перейти из начального положения в конечное. Ниже описана пошаговая инструкция по созданию анимации на основе SVG.
Возможность встраивания SVG в HTML даёт преимущество управлять SVG-элементами и их атрибутами с помощью JS. На картинках ниже показано, что мы можем дотянуться не только до самих точек, а также, до кривых безье.
Любой графический редактор, обладающий возможностью работы с векторной графикой, имеет path-панель.
С ее помощью будем управлять точками и кривыми безье.
Наша задача нарисовать начальное и конечное положение кривых. А анимацию на html-странице описать Javascript’ом.
Визуально обозначим траекторию движения будущей анимации
Как видим, всё просто! Матрицы аффинных преобразований не потребовались:)
Как использовать SVG для анимации, интерактивности и микровзаимодействия
Важный момент: Почему мы не используем стандартные средства анимации в SVG? Язык SMIL (Synchronized Multimedia Integration Language) не рассматриваем, так как W3C больше не будет поддерживать SMIL.
Возьмем, к примеру, две кривые в виде XML
Программирование анимации (изменение X,Y-координат у точек) будет выглядеть примерно так:
- M 166.5 142.5 L 518 182.5 L 885.5 142.5
- M 166.5 150 L 518 190 L 885.5 150
- M 166.5 155 L 518 195 L 885.5 155
- M 166.5 350 L 518 170 L 885.5 350
- M 166.5 355 L 518 175 L 885.5 355
- M 166.5 362.5 L 518 322.5 L 885.5 362.5
!!! Важно чтобы количество точек совпадало.
Продолжаем пример. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с 8-ю точками.
Код для анимации такого квадрата:
Var s = Snap($("svg")); var path = s.path(start_path); // устанавливаем начальное положение $("play").click(function () { path.stop().animate({ "path": end_path }, 500, mina.easeout); // конечное положение (function () { path.stop().animate({ "path": start_path }, 500, mina.backout); // возвращаем начальное положение }).delay(500); }); //код передаёт только суть и не обязан работать
Библиотека Snap SVG «прорисовывает» движение между контурами по функциям плавности.
!!! Главное мы получаем 100% качественное кросс-браузерную анимацию без потери качества.
Мы коснулись технической стороны вопроса, но есть уровень более высокий, чем программирование анимации. Речь о концепте.
Концепт анимации
Просматривая различные концепты анимации, видно не правильную анимацию, которую скорее можно назвать презентационной и которую нельзя использовать в проекте. Мы собрали подборку интересных, на наш взгляд, решений, когда анимация действительно помогает пользователю и создает вау-эффект.
Хорошая анимация должна быть правильной с точки зрения достижения результата. Она должна объяснять пользователю, как работать с интерфейсом, должна помогать ориентироваться в нём - сейчас, во времена flat-дизайна, мы видим первые попытки сделать плоский дизайн живым и реалистичным.
На основе нашего практического опыта работы с интерфейсами для различных сайтов и мобильных приложений, мы смогли определить несколько правил и преимуществ анимации:
Повышение удобства использования
Оригинальность
Простота использования
Выполнение одновременно нескольких параллельных задач
Ускорение работы интерфейса
Улучшение обратной связи для пользователя
Цели анимации
Правила анимации
Анимация как дополнительный индикатор правильности работы интерфейса
Анимация как способ сэкономить место
Анимация как способ добавить реалистичности к интерфейсу и создать вау-эффект без вреда для использования
Анимация как способ скрыть «баги» или отвести внимание пользователя (лоадеры, параллакс-загрузки, индикаторы процесса)
Она не должна перегружать страницу или скрин, вызывая долгую и раздражающую загрузку
Нужно тщательно продумывать анимацию с учетом разных устройств и условий, с которыми целевой пользователь соприкоснется в работе с продуктом
Анимация не должна слишком отвлекать от главных функций или контента на экране или веб-странице
Она должна соответствовать общему стилистическому концепту приложения или веб-сайта, чтобы поддерживать общую гармонию в восприятии продукта
Роль SVG в эластичном дизайне
Эластичный прелоадер
Форма с плавной обратной связью
Эластичное меню
Роль качественной анимации в интерфейсах возрастает. Интерфейсы могут быть более живыми, чем просто плоские иконки и линейная анимация. Так родилось понятие эластичного дизайна.
И в первую очередь, эластичный дизайн - это дизайн, который реагирует на действия пользователя. Эластичный дизайн не ограничивает свободу движений. И помогает пользователям совершать нужные действия. Эластичный дизайн идеально вписывается в направление «интерфейсов в одном окне», а также в пространственные интерфейсы.
Как сказал один наш клиент: «Как желе, дрожит от любого прикосновения».
Роль SVG в эластичном дизайне сводится к анимированию, гибкости, текучести, взаимозависимости, плавности, наложению слоев... Вообщем сделать flat живым.
Основы эластичного дизайна
Элементы не живут сами по себе. Каждый элемент зависит от другого, создавая пространство единой системы взаимосвязей.
Эластичный дизайн адаптируется под любые разрешения.
Каждый элемент дает обратную связь на действия пользователя. У пользователя не должно остаться сомнений о совершении того или иного действия.
Эластичный дизайн направлен в первую очередь на удобство интерфейсов.
Усиливаем анимацию с помощью функций плавности и svg-фильтров
Ещё раз напомню два основных типа анимации, на которых мы сфокусировались:
Эластичная анимация
Анимация при микровзаимодействии
В стандарте SVG существует 19 фильтров:
feBlend - наложение слоёв (overlay, screen, multiply и другие)
feColorMatrix - цветовая матрица позволяет управлять цветом изображений
feComponentTransfer - используется для изменения цвета, как photoshop эффекты - brightness adjustment, contrast adjustment, color balance или thresholding.
feComposite - композитный фильтр, используется для наложения или вырезания двух слоёв.
feConvolveMatrix - аналог эффектов bevel, emboss, sharpen и edge detection.
feDiffuseLighting - направленная подсветка, чем-то похожа на bump mapping
feDisplacementMap - смещает изображение с использованием значений координат пикселей второго изображения
feFlood - по сути рисует новый квадрат
feGaussianBlur - размытие
feImage - преобразует векторную графику в растровую
feMerge - параллельное объединение SVG-фильтров
feMorphology - используется когда необходимо истончить или утолщить края исходного изображения
feOffset - сдвиг изображения по координатам x и y
feSpecularLighting - подстветка
feTile - мозаика и аналог паттернов
feTurbulence - создает фрактальный или беспорядочный шум
feDistantLight - фильтр для подсветки
fePointLight - фильтр для подсветки
feSpotLight - фильтр для подсветки
Чем не Photoshop? Мы можем использовать последовательное наложение фильтров.
Рассмотрим, как сделать «текучесть» в эластичном дизайне с помощью последовательного наложения SVG-фильтров.
Размытие на входе принимает исходное изображение, выдаёт результат blur.
Цветовая матрица принимает результат blur и выдает glow. Здесь меняется цвет входящего изображения, чтобы создать альфа-канал для композитного фильтра.
Композитный фильтр накладывает на изначальное изображение результат glow с помощью оператора atop (http://apike.ca/prog_svg_filter_feComposite.html)
На выходе получаем «текучесть» только между точками.
Пример работы функций плавности.
В библиотеке Snap.SVG за них отвечает переменная «mina» со скудным набором функций.
Полный набор функций плавности можно найти на сайте http://easings.net
Итог
Эластичная анимация интерфейса является отличным способом удержания пользователей на сайте, так как использование интерактивных элементов позволяет решать задачи быстрее и интереснее. А развитие технологий скоро позволит перенести полноценные Photoshop-инструменты в web, с возможностью анимации. Но перед тем как применять моушн-дизайн, нужно проанализировать его потенциал для улучшения удобства. Хорошая анимация рождается на стадии концепта и преследует четкие цели. Функции плавности доводят движения до реалистичности. Нас ждет по-настоящему живой flat. Преимущества и полезность применения анимации в процессе «визуальной коммуникации» очевидны и перевешивают возможные недостатки.
, Алла Кудин .Статья написана отделами AFFINAGE DESIGN и AFFINAGE PRODUCTION компании AFFINAGE .