15 полезных SVG инструмента


Содержание
. Важно чтобы количество точек совпадало. Продолжаем пример. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с точками. Код для анимации такого квадрата: Библиотека 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 — по сути рисует новый квадрат feImage — преобразует векторную графику в растровую feMerge — параллельное объединение SVG-фильтров feMorphology — используется когда необходимо истончить или утолщить края исходного изображения feOffset — сдвиг изображения по координатам x и y 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. Преимущества и полезность применения анимации в процессе «визуальной коммуникации» очевидны и перевешивают возможные недостатки. Полезные ссылки Snap SVG — snapsvg.io — библиотека для работы с SVG Greensock — greensock.com — библиотека для анимации easings.net — Шпаргалка функций плавности jQuery Easing Plugin — функции плавности anime.js — anime-js.com — библиотека для анимации dynamics.js — dynamicsjs.com — библиотека для анимации https://www.w3.org/TR/SVG/ Scalable Vector Graphics (SVG) 1.1 (Second Edition) — W3C Recommendation 16 August 2011 https://www.w3.org/TR/2020/CR-SVG2-20200915/ Scalable Vector Graphics (SVG) 2 — W3C Working Draft 15 September 2015 http://caniuse.com/#search=svg — возможность поддержки SVG различными браузерами Авторы GIF изображений, использованных в статье: Сергей Валюх, Эрнест Асанов, Алла Кудин. Статья написана отделами AFFINAGE DESIGN и AFFINAGE PRODUCTION компании AFFINAGE. Полное руководство по SVG: векторная графика в веб-дизайне и этапы ее создания С развитием возможностей техники у пользователей увеличиваются требования к веб-дизайну и разработке сайтов в целом. Теперь владельцам ресурсов не следует использовать плохо подобранные шрифты, некачественные изображения, если хочется достойно выглядеть на фоне конкурентов и повышать конверсию. Использование векторной графики решает вопросы, связанные с качеством изображений и быстрой загрузкой сайтов. SVG является одним из таких форматов. Сегодня мы расскажем о SVG-графике, ее использовании в веб-дизайне, а также влиянии на тренды современного дизайна. Что такое SVG, сложности в использовании SVG (Scalable Vector Graphics) — технология, с помощью которой на сайтах описывается векторная графика. Посредством SVG можно создавать анимацию, векторные и смешанные изображения, текст. Разбиение IT-сферы на разработчиков и дизайнеров приводит к тому, что не все идеи могут быть реализованы версткой. Формат SVG с одной стороны помогает веб-дизайнерам и разработчикам понимать друг друга, а с другой — необходима возможность использовать SVG в продукте, а это не всегда просто. Нужно изменять технологические параметры, а также позаботиться об экспорте SVG из использующихся дизайнером редакторов. Еще одна сложность работы с SVG — несовместимость с более старыми версиями браузеров. Несмотря на то, что технология достаточно хорошо поддерживается текущими версиями, существует небольшой процент пользователей, которые устанавливают обновления. На графике показана поддержка SVG для различных версий самых распространенных браузеров как для декстопа, так и для мобильных телефонов. Красным цветом обозначены версии, в которых SVG не поддерживается, желтым — частично, зеленым — поддерживается. Зачем веб-дизайнеру нужен SVG Веб-дизайнеры, которые знакомы с векторной графикой, знают, как важно следить за качеством своих работ и экономить время. Разберем причины, которые делают SVG одним из удобных инструментов при работе с векторными изображениями и не только. Причина 1. Масштабируемость В отличие от растровой графики, векторные изображения не теряют в качестве после увеличения. Растровые изображения состоят из пикселей, поэтому при увеличении такие картинки получаются зернистыми и размытыми, так как пикселей фиксированное количество. Векторные же состоят из геометрических фигур — кривых, линий, кругов и прочее. Гибкость таких изображений позволяет изменять размеры и другие характеристики (заливка цветом, форму) без потери качества. Причина 2. Простота изменений Модификации формата SVG можно добиться как при использовании графических редакторов, так и посредством CSS на самом сайте. Мы с легкостью можем поменять цвет, параметры, форму изображения и прочее. При использовании растровых картинок необходимо делать изменения только в исходном макете и затем экспортировать. Причина 3. Возможность использования анимации С помощью JavaScript или CSS3 можно добавить в SVG динамические эффекты. Эффектный и динамичный дизайн поможет не только выделиться среди конкурентов, но и, при правильном подходе, станет инструментом повышения конверсии. Также SVG помогает добавить на сайт интерактивности: можно вставить ссылку на один из элементов, изменять изображение при наведении и прочее. Причина 4. Быстрота загрузки Кроме визуального оформления, веб-дизайнеру нужно учитывать скорость загрузки страницы, так как это напрямую влияет на конверсию. Пользователи стали менее терпеливыми, поэтому клиенты не будут ждать, пока сайт прогрузится, а закроют его и перейдут к конкурентам. Особенно процент отказа повышается, если сайт не грузится с мобильных устройств. SVG-файлы — одно из решений данной проблемы. Они занимают меньше места, чем растровые картинки, также с помощью кода можно использовать «клонирование» — один раз прописать характеристики и использовать ссылки в разных местах сайта. Также SVG подходит для разработки адаптивного дизайна страницы. Причина 5. Влияние на SEO Еще одна причина использовать SVG — влияние технологии на поисковые системы. Так как SVG-изображения можно представить в виде кода, поисковики их индексируют и вы можете оказаться выше в рейтинге среди конкурентов. Часто векторная графика используется при создании иконок, различных геометрических фигур, логотипов и иллюстраций. С помощью SVG можно использовать такие изображения и не терять в качестве. Рассмотрим несколько примеров использования этой технологии. Примеры SVG на веб-сайтах Векторный формат позволяет дизайнерам использовать в своих работах не рисованные иллюстрации, геометрические композиции, текстовые блоки и другие изображения, созданные с помощью кривых. Иллюстрации Сейчас, когда мы находимся в цифровом мире, особенно выделяются проекты, где дизайн будто бы нарисован от руки. С помощью иллюстраций мы можем создать уникальное оформление сайта и погрузить пользователя в рисованный мир графических фигур. SVG как векторный формат позволяет рисовать абстрактные формы, узнаваемые объекты любых цветов. На данном примере с помощью SVG дизайнеры создали образы сотрудников компании, которые помогают своим клиентам продвигать продукт. Яркие цвета и рисованные фигуры запоминаются пользователем и придают веб-странице особую индивидуальность. Больше об иллюстрациях на веб-сайтах можно прочитать здесь. Иконки Чтобы выделить какие-то преимущества компании, показать цикл работ или выделить основные услуги часто используются иконки. Традиционно используется векторный формат, чтобы на различных устройствах маленькие картинки не теряли качество и адаптировались под размер экрана. На примере используется иконка, нарисованная с помощью SVG, также добавлена анимация в виде описывающей окружность цветовой линии, которая меняет иконку на другую после совершения полного круга. Текст Иногда текст переводят в кривые и представляют на сайте как SVG. Такой прием используется в основном для больших заголовков и важной информации. Здесь надпись представлена как SVG-изображение, которое состоит из линий вперемешку с геометрическими вставками. Декоративные элементы Волнистые линии, геометрические фигуры и формы часто представляют с помощью SVG. Можно быстро отредактировать их позиционирование, изменить цвет и размеры, также они легко отобразятся на экранах с высокой плотностью пикселей и не станут нечеткими при масштабировании. Еще один пример — виджет часов, также выполненный с помощью SVG. Можно добавить анимации с помощью JavaScript и придать динамичности веб-странице. Логотипы Обычно логотипы создаются в векторном формате, чтобы была возможность помещать их на полиграфическую продукцию, упаковки товаров, баннеры и использовать на веб-сайтах. В веб-дизайне для отображения логотипа также можно применять формат SVG: Изображение было полностью нарисовано с помощью кода. Его можно легко модифицировать, логотип будет качественно отображаться на любом устройстве. Использование векторной графики с одной стороны упрощает работу веб-разработчику, с другой — процесс работы нужно оптимизировать и разбираться в технологиях. Рассмотрим, как происходит создание и внедрение SVG на веб-сайты на простых примерах. Создание SVG: графические редакторы, возможности кода SVG создают как с помощью графических редакторов (и сохраняют в формате .svg), так и описывают посредством кода. Для этого существует специальный парный тег . Вот как это выглядит в коде веб-страницы: Для создания SVG-изображений используются редакторы, которые имеют возможность работать с вектором, например: Adobe Illustrator; Adobe InDesign; CorelDRAW; Inkscape и прочее. После создания изображения желательно его оптимизировать для быстрой загрузки и правильного внедрения на сайт. Для этого делают следующее: уменьшают количество точек; если используется текст, его переводят в кривые; удаляют ненужные перекрытия, если используют несколько изображений. Можно обойтись без графических редакторов и создать SVG с помощью кода. Элементы (фигуры, картинки, текст) вставляются в тег . Создадим простой круг: Тегом мы обозначаем фигуру с характеристиками: радиус, положение центра окружности относительно оси X и Y, цвет. Получается такая фигура: Таким образом рисуются простые иллюстрации, иконки и другие изображения: фигуры накладываются друг на друга, прописывается позиционирование и другие характеристики каждого элемента. Например, для многоугольников используется тег , для прямоугольников — и так далее. Внедрение SVG в HTML Внедрить SVG на веб-сайт можно различными способами. Рассмотрим самые используемые из них. Inline ( ) Это тег , о котором говорилось выше. Подходит для простых фигур и картинок. Изображение рисуется прямо в HTML коде. Можно применять CSS-стили (немного отличаются от стандартных, для применения уточняйте наличие в спецификации) и анимацию. Сам тег характеризуется шириной, высотой и уникальным идентификатором id. Плюсы данного метода — не нужно подгружать дополнительные файлы, можно многократно использовать один и тот же элемент, менять нарисованную графику с помощью стилей и анимировать. Как изображение Для более сложных фигур и иллюстраций используют тег . Для этого нужно сохранить файл в формате .svg через специальный графический редактор или конвертер. Пример вставки тега в HTML: В папке img мы храним изображение круга в формате .svg, задаем изображению высоту и ширину, а также вспомогательный атрибут alt для тех пользователей, у кого не загружаются изображения в браузере. Также можно загрузить SVG-файл как фоновое изображение. В HTML картинка вставляется как обычный блок: А потом меняются стили: .imageSvg <
background-image: url(«img/circle.svg»); width: 250px; height: 300px; > К сожалению, при использовании данного варианта нельзя изменять свойства SVG с помощью стилей и применять интерактивные анимации. Как объект Универсальный способ вставки мультимедийного контента в код HTML — тег В type указывают принадлежность к типу «изображение» и формат SVG. Объекты можно менять с помощью стилей CSS, хорошо поддерживаются браузерами. В последние годы SVG стало использоваться все чаще, благодаря своей простоте, удобству в применении и возможности улучшить качество дизайна для пользователей. Возможно, в будущем SVG станет стандартом и будет применяться наравне с другими форматами. Конечно, растровые изображения никуда не уйдут, так как качественные фотографии пока можно представить только с помощью фиксированного количества пикселей. В своих проектах студия дизайна IDBI использует различные форматы как векторной, так и растровой графики. Мы анализируем способы повышения конверсии интернет-магазинов, продающих сайтов, активно используем в своих работах и тренды веб-дизайна (такие как SVG-графика, градиенты, динамические эффекты), и классические приемы.
  • Анимация и интерактивность, основанная на JavaScript
  • Почему нельзя использовать SVG для всех изображений?
  • Практическое руководство
  • Подготовка и оптимизация
  • Приёмы для уменьшения размеров файла.
  • Оригинал: 1,413b
  • После оптимизации: 409b
  • После оптимизации с использованием : 311b
  • Варианты использования (реализации)
  • Background-image
  • Iframe
  • Embed
  • Object
  • Inline
  • Заключение
  • JS -манипуляции
  • Фиксированная ширина и адаптивность
  • Объект
  • Встроенные
  • Background-image
  • Анимация
  • SVG -анимация
  • Object
  • Inline
  • Background-image
  • CSS3 -анимация
  • Спрайты
  • Медиавыражения
  • Запасной вариант
  • Оптимизация и защита: img → SVG → Fonts
  • 15 полезных SVG инструмента
  • SVG для десктопа
  • SVG для мобильных
  • Выжимаем максимум из SVG
  • Предостережение
  • Как работать с SVG. Что нужно знать в теории?
  • Как работать с SVG. Что нужно знать на практике?
  • Как использовать SVG для анимации, интерактивности и микровзаимодействия
  • Концепт анимации
  • Цели анимации
  • Правила анимации
  • Роль SVG в эластичном дизайне
  • Основы эластичного дизайна
  • Усиливаем анимацию с помощью функций плавности и svg-фильтров
  • Полезные ссылки
  • Полное руководство по SVG: векторная графика в веб-дизайне и этапы ее создания
  • Что такое SVG, сложности в использовании
  • Зачем веб-дизайнеру нужен SVG
  • Причина 1. Масштабируемость
  • Причина 2. Простота изменений
  • Причина 3. Возможность использования анимации
  • Причина 4. Быстрота загрузки
  • Причина 5. Влияние на SEO
  • Примеры SVG на веб-сайтах
  • Иллюстрации
  • Иконки
  • Текст
  • Декоративные элементы
  • Логотипы
  • Создание SVG: графические редакторы, возможности кода
  • Внедрение SVG в HTML
  • Inline ( )
  • Как изображение
  • Как объект
  • Цукерберг рекомендует:  Вакансии ТиДев

    Анимация SVG с помощью CSS

    На сегодняшний день существует уже не один способ создавать SVG анимацию. Это можно сделать с помощью тега , который вставляется прямо в код SVG . Есть специальные библиотеки, такие как Snap.svg или SVG.js .

    Мы рассмотрим немного другой подход: с помощью встроенного SVG (SVG кода прямо в HTML) и анимации отдельных частей прямо через CSS .

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

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

    Окончательный вид анимации очень простой. Вот как она выглядит:

    Посмотреть на CodePen

    Давайте рассмотрим, как это делается.

    1. Составляем список элементов, которые мы будем использовать

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

    Мой план заключался в том, чтобы сделать супер простую рекламу Wufoo , использовав их классический логотип, цвета и корпоративный стиль. А затем добавить немного креатива:

    1. Создать эффект, будто буквы убегают со страницы. Wufoo — это веселое слово, пусть буквы тоже будут веселыми;
    2. За день до этого мы разработали дизайн футболки, на лицевой стороне которой был изображен динозавр, а на задней надпись: « Быстрый. Умный. Грозный ». Это черты, которые присущи и динозаврам, и Wufoo . Не говоря уже о том, что мы обыграли слово « FORMidble » (грозный). Поэтому я захотел сделать так, чтобы в анимационном блоке появлялись и исчезали эти слова;
    3. Чтобы связать эти слова с динозавром, у нас будет появляться голова T-Рекса, а затем быстро исчезать. При этом будет выводиться слово « Быстрый », что будет еще одним интересным связующим звеном для элементов.
    4. Все эти элементы я загрузил в Illustrator :

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

    Текст, который вы видите, « Быстрый. » так и остается в Illustrator в формате текста.

    Когда я сохраню файл в Illustrator , надпись останется элементом .

    2. Сохраняем в формате SVG

    Illustrator поддерживает функцию сохранения в формате SVG :

    Вы можете открыть этот SVG -файл в редакторе кода и увидеть в нем код SVG :

    3. Вычищаем SVG, задаем классы для фигур

    Вы можете пропустить код через SVGO , чтобы оптимизировать его и убрать ненужные элементы типа DOCTYPE и тому подобное.

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

    4. Вставляем SVG

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

    Вы можете сделать что-то вроде этого:

    5. Анимация!

    Теперь все эти фигуры загнаны в DOM , и мы можем позиционировать их и задавать стили, как и для любого другого элемента HTML. Давайте сделаем это.

    Предположим, мы хотим использовать 10-секундную временную шкалу:

    Сначала выпадают и исчезают слова

    Первое, что мы хотим сделать, это вывести поочередно слова « Быстрый. Умный. Грозный. » Каждое слово будет показываться в течение одной секунды.

    Так мы создаем анимацию, в которой показ каждого слова занимает 10% времени:

    Затем указываем первое слово и длительность всей анимации в 10 секунд (10% из которых составляет 1 секунда):

    Следующие два слова сначала будут скрытыми ( opacity: 0; ), а затем используем ту же анимацию, только с задержкой во времени, чтобы следующие слова выводились немного позже:

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

    Прыгающие буквы

    Как только мы задали анимацию для этого элемента, приступаем к эффектам для букв в слове Wufoo , которые должны прыгать в сторону вот так:

    Хитрость тут в том, что мы создаем анимационный эффект, который длится всего 5 секунд, но запускаем его один раз вперед, а затем в обратном направлении.

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

    Эффекты для каждой буквы имеют небольшую задержку во времени, поэтому они перемещаются не все одновременно, а одна за другой:

    Приведенный выше SCSS -код — это просто короткая версия, он не включает в себя префиксов (которые понадобятся вам на практике).

    Я думаю, что animation-delay это свойство, которое было бы полезно взять из оригинального CSS . Это выглядело бы более аккуратно, когда буквы сдвигаются с небольшой задержкой.

    И наконец, динозавр

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

    Поскольку для позиционирования анимации эффективнее использовать преобразования, мы сделаем это с помощью keyframes :

    Мы хотим, чтобы этот фрагмент анимации выводился в « последние » приблизительно 3 секунды. Этот цикл на самом деле работает все 10 секунд, но собственно видимые эффекты вы будете наблюдать в течение последних 3 секунд.

    Когда translateY (150 пикселей) применен в эффекте, динозавр перемещается так далеко вниз вне поля блока, что вы его не видите.

    Но в течение 37% времени этой анимации (около 3 секунд) вы видите, что он медленно двигается вверх, а затем быстро убирается вниз.

    Когда мы применим эту анимацию, мы убедимся что:

    • Динозавр сначала скрыт;
    • Вывод этого фрагмента анимации задерживается во времени, так что он начинается сразу после того, как буквы в слове логотипа закончили свой пляс (совершили смешение в сторону и вернулись на место).

    Динозавр падает вниз как раз в последнюю секунду так, чтобы сразу после этого в блоке снова появилось слово « Быстрый » (интервал воспроизведения анимации установлен на infinite , чтобы она запускалась по кругу снова и снова). Это привносит немного веселой синергии.

    6. Делаем блок кликабельным / интерактивным объявлением

    Одной из полезных особенностей SVG является возможность масштабировать объекты до любого размера без потери качества.

    Чтобы создать встроенный блок SVG с сохранением оригинального качества изображений, мы можем использовать технику ol’ padded box .

    Идея заключается в том, что « обертка » всегда будет принимать форму квадрата, отталкиваясь от значения его ширины. Затем мы задаем абсолютные значения позиции SVG внутри этого идеального квадрата, размеры которого подгоняются, исходя из ширины.

    Поскольку это объявление (которое, конечно, должно быть кликабельным), то в качестве содержащего контейнера вместо

    Мысли напоследок , для справки.

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

    Данная публикация представляет собой перевод статьи « Animating SVG with CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

    Очередной блог фрилансера

    коротко и полезно о веб-разработке

    Символьный SVG-спрайт. Подробное руководство

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

    SVG-спрайты бывают разные. Самый простой вариант – это склеивание всех иконок в один файл и последующее использование его в виде фоновой картинки со смещением background-position для каждой иконки. Все, кто работал ранее с растровыми спрайтами, знакомы с такой технологией и найдут ее для себя простой и понятной. К сожалению, в таком варианте спрайта масштабирование и управление цветом будет недоступно, также, как и возможность использовать спрайт в теге img.

    Другие виды svg-спрайтов выглядят интереснее. Об их разновидностях, преимуществах и недостатках хорошо изложено в этой статье на Хабре. Там же рассказывается о библиотеке svg-sprite, к которой мы позднее вернемся.

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

    Устройство спрайта

    Символьный svg-спрайт, представляет собой один корневой элемент svg, внутри которого создаются области symbol , внутри которых содержится код svg-иконки. Каждому элементу symbol назначается уникальный id , по которому к нему в дальнейшем можно будет обратиться в документе.

    Symbol создает шаблон из любых svg-объектов, который в дальнейшем можно многократно использовать с помощью тэга use . Контент, расположенный внутри symbol , не отображается на странице.
    Предположим, у нас имеются две разные svg-иконки:

    Для того, чтобы объединить их в спрайт, достаточно код каждой из них обернуть в элемент symbol , к нему добавить атрибут viewbox и указать уникальный id . Вот так выглядит самый простой символьный svg-спрайт.

    Использование на странице

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

    После того, как спрайт находится на странице, вывести нужную иконку можно с помощью тэга use :


    Управление с помощью CSS

    Перед тем, как переходить к стилизации иконок средствами CSS, нужно удалить из спрайта атрибуты fill , stroke , style . Эти атрибуты в svg имеют больший приоритет и переписать их средствами CSS не получится. В нашем примере это атрибут fill . После его удаления, иконки станут черными:

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

    Обращаясь к классу элемента svg, с помощью CSS можно указать нужный размер, изменить цвет, назначить эффект наведения, добавить анимацию, применить svg-фильтры.

    Список свойств, доступных для изменения через CSS, есть на сайте W3C

    Стилизация отдельных частей иконки

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

    Все дело в теге use , с помощью которого мы встраиваем иконку на страницу. Фактически, use вставляет на страницу не саму иконку, а копию именованной области на которую мы ссылаемся в атрибуте xlink:href . Где бы эта область не находилась (на этой же странице или во внешнем файле), тег use найдет ее и скопирует. При этом код иконки не станет частью документа, а будет помещен в теневой DOM. Поэтому, можно сколько угодно назначать классы отдельным частям иконки — результат останется прежним. Ограничения теневого DOM не дадут стилизовать внутренние части изображения.

    Но кое-что сделать все же можно.

    Есть два способа, которыми можно добиться желаемого. И один из них даже имеет неплохую поддержку современными браузерами.

    Предположим, что вам не требуется глубокая стилизация частей изображения, и вы вполне можете ограничиться двумя цветами. В этом случае, вполне можно обойтись использованием currentColor . Как говорится в спецификации о currentColor :

    Это ключевое слово, содержащее значение свойства color. currentColor можно использовать в любых свойствах, принимающих значение color

    То есть, если у нас есть элемент, в котором один и тот же цвет используется сразу в нескольких свойствах, достаточно указать его только один раз, а дальнейшее упоминание доверить ключевому слову currentColor :

    Этот же прием, можно использовать в svg-спрайте. Предположим, нам необходимо раскрасить две части иконки в разные цвета. Удаляем атрибуты fill у тех элементов, что красятся в основной цвет средствами CSS. А в той части, которая планируется быть раскрашенной другим цветом – наоборот добавим атрибут fill , со значением currentColor . После этого, достаточно в CSS указать два значения: fill для цвета основной иконки и color для цвета ее второй части.

    Как я уже упоминала выше, currentColor , на сегодняшний день, имеет неплохую поддержку всеми современными браузерами и IE11+. Если вам не требуется работа в старых версиях браузеров, смело можно брать этот прием на вооружение.

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

    В качестве значений указываем CSS-переменные, через которые и проводим стилизацию в CSS:

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

    С поддержкой CSS-переменных дела обстоят немного хуже, в случае некоторых версий IE, Opera Mini и Android Browser, она отсутствует вовсе.

    Вообще о стилизации svg элементов через use есть замечательная статья на английском, в которой очень подробно и с примерами изложена эта тема.

    Использование внешней ссылки на спрайт

    Давайте представим, что вы дошли до текущего раздела и все у вас прекрасно работает. Не радует только необходимость держать спрайт в теле страницы. На самом деле, ничего плохого в этом нет.
    Если вас все устраивает, можно продолжать в том же духе.

    При таком способе подключения есть только один существенный недостаток – отсутствие кэширования спрайта. К счастью, эта проблема легко решаема. Внутри атрибута xlink:href достаточно прибавить к идентификатору путь, по которому расположен ваш спрайт:

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

    Этот скрипт добавляет поддержку ссылок на внешние svg-файлы не только в IE, но и в любых других браузерах, не поддерживающих подобный функционал.

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

    «Я все сделал как в статье, а у меня не работает»

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

    Что же может не работать? Давайте рассмотрим несколько примеров.

    Иконка не отображается совсем или отображается частично

    Вставляем тэг use на страницу, а ничего не происходит. Если используете ссылку на внешний svg-файл – отключите и вставьте спрайт на страницу. Внимательно сверьте id символа иконки и атрибута xlink:href .

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

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

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

    Обратите внимание, в этом коде мы видим блок defs , внутри которого определяется градиент для последующего использования внутри атрибута fill или любого другого атрибута. Этот внешний градиент и является, в нашем случае, корнем всех зол. Если вот этот код, не меняя, обернуть элементом symbol и добавить в спрайт, вы заработаете как минимум одну проблему, а возможно и больше.

    Самая очевидная и известная проблема в браузере Firefox (версия 51.01). Независимо от того используете ли вы ссылку на внешний файл или встроили спрайт на страницу, он просто не отобразит градиент, находящийся внутри блока symbol . Есть один способ решения, люди советуют просто вынести блок defs c градиентом за пределы элемента symbol .

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

    Далее, Chrome (версия 55) также, при использовании внешней ссылки на спрайт, проигнорирует градиент. И здесь тот же фокус, что и с Firefox уже не действует. Внятных объяснений такому поведению в хроме я не нашла. Если сталкивались с подобной проблемой и нашли решение, делитесь в комментариях.

    Подводя итоги по градиентам, напрашивается довольно простой вывод. Если необходимо использовать иконки с градиентами в символьном svg-спрайте – не используйте ссылку на внешний файл, и выносите блок с градиентом за пределы symbol .

    Не получается изменить цвет иконки

    Здесь все довольно просто. Если иконка у вас выводится без проблем, но смена цвета средствами CSS не работает, скорее всего у какого-нибудь из внутренних элементов остались атрибуты fill , stroke или style . Еще раз проверьте всю разметку иконки на наличие оставшихся атрибутов. Даже если их не осталось в корневом элементе, они могут присутствовать в дочерних. После удаления их удаления проблема должна решиться.

    Использование в качестве background-image

    Я думаю, ни один верстальщик не любит лишней HTML-разметки. Инлайновый SVG это конечно хорошо и замечательно, но далеко не всегда удобно. Как же быть со старым добрым background-image? Думаю, правильным ответом на этот вопрос, будет «это невозможно». Но оказывается, все же возможно. Хотя придется, конечно, потрудиться.

    Известно, что в качестве фона можно указывать внешний svg-файл. Поскольку код внутри symbol не отображается на странице, понадобиться комбинация из тегов view и use для каждой иконки.

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

    Обратите внимание на атрибуты viewbox и значение y элементов view и use . Начиная со второй иконки, нужно добавить сдвиг по оси y (или x ), чтобы иконки на наползали друг на друга. Модифицированный таким образом спрайт, можно увидеть на странице. После этого, можно ссылаться на иконку в свойстве background :

    И о чудо, действительно картинка выводится в фоне и масштабируется исходя из размеров блока. Плохие новости – управлять цветом через CSS не получится. При острой необходимости, можно создать для одной и той же иконки несколько вариантов view и use , атрибутами style , где указать разные варианты цветов. Браузеры Firefox, Chrome, IE11 – все работает. Есть информация, что не работает в Safari.

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

    Автоматическая генерация спрайта

    Если вы как и я, не любитель собирать спрайты вручную, можно автоматизировать этот процесс с помощью плагина gulp-svg-sprite. Плагин имеет множество опций и умеет не только символьные спрайты но и многие другие.

    npm install gulp-svg-sprite

    Редактируем gulpfile.js и создаем объект конфигурации, который в дальнейшем будем передавать плагину:

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

    В свойстве mode описываются виды спрайтов, которые требуется сгенерировать. Если нужно, можно указывать хоть все сразу, но мы остановимся на symbol . Указываем свойство dest , это папка для результирующего спрайта. В принципе, можно оставить это значение пустым. Тогда плагин по умолчанию создаст папку symbol а внутри нее папку svg и туда положит спрайт. У меня там точка, чтобы не создавать дополнительную папку symbol .

    Создаем таск для спрайтов

    Все просто, отдельные svg-иконки лежат в папке svg-separate . Указываем путь к ним, запускаем плагин с объектом конфигурации, и помещаем результат в папку sprites . Плагин генерирует id для элементов symbol из имен файлов svg-картинок. Поэтому, было бы неплохо давать им осмысленные имена, с тем чтобы не испытывать сложностей в дальнейшей работе.

    Заключение

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

    Автор svg-иконок из примеров — Elias Bikbulatov

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    Обзор софта для работы с SVG-графикой

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

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

    Но вопрос не только в размере и качестве — разработка дизайна для web-страницы оказывается делом, требующим от дизайнера знания широкого спектра разноплановых технологий и программных продуктов, поскольку для разных видов графической информации приходится использовать разнообразные форматы файлов и различные технологии их создания. Для статичной графики применяют форматы GIF, JPG или PNG, создавать которые можно в самых разных графических пакетах. Для анимационных объектов используют форматы animation GIF и Flash, а разрабатывают такие объекты в специализированных программных приложениях (особых для каждого из названных типов форматов). Интерактивные элементы (ролловеры, карты ссылок ImageMap и т.п.) тоже, как правило, создаются в специализированных приложениях и представляют собой набор графических изображений, связь между которыми устанавливается в дополняющем их файле с HTML-кодом.

    Удачным решением названных проблем может стать переход на графический формат SVG (Scalable Vector Graphics — масштабируемая векторная графика), основанный на языке XML, благодаря чему любое SVG-изображение можно представить набором командных строк (рис. 1), а сам SVG-файл можно открыть в любом текстовом редакторе, включая блокнот. Эта сравнительно новая технология изначально разрабатывалась компанией Adobe специально для web, а сегодня представляет большой интерес и для мобильных устройств, обеспечивая создание высококачественной статичной, анимационной и интерактивной графики. Поэтому нет ничего удивительного в том, что она активно поддерживается консорциумом W3C (http://www.w3.org/Graphics/SVG) — в 2003 году стандарт SVG 1.1 был принят в W3C в качестве рекомендации, а на данный момент идет разработка спецификации SVG 1.2 (http://www.w3.org/TR/SVG12/).

    Рис. 1. Фрагмент SVG-файла вместе
    с соответствующим ему изображением

    Технология SVG позволяет объединить в одном формате текст, графику, анимацию и интерактивные компоненты и базируется на трех типах графических изображений: векторных формах, рисунках и тексте. Формы, как это принято в векторной графике, представлены либо прямолинейными и криволинейными контурами, либо графическими примитивами (прямоугольниками, эллипсами и др.), а рисунки представляют собой импортированные растровые изображения. Помимо этого формат SVG поддерживает различные виды анимационных (напоминающих GIF- и flash-анимацию) и интерактивных объектов, таких как ролловеры, карты ссылок и прочие элементы навигации. А поскольку данный стандарт основан на языке XML, то SVG-файл наряду с элементами, предназначенными для визуального отображения, может содержать также различные метаданные.

    Плюсы и минусы применения формата SVG

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

    • высокое качество изображений независимо от их размеров, что объясняется векторной природой SVG-формата. Изображения могут неограниченно уменьшаться или увеличиваться без потери качества (рис. 2) в соответствии с размером дисплея, что позволяет получать качественное изображение графической информации на различных типах устройств (десктопах, карманных компьютерах и пр.), а также дает возможность более тщательно рассмотреть отдельные детали — это важно, например, при работе с техническими рисунками;
    • гораздо меньший размер файлов по сравнению с форматами GIF, JPG, PNG и animation GIF, а тем более с форматом Flash. Например, если протестированный для статьи файл формата GIF, сжатый в режиме LZW-компрессии, составлял 26 Кбайт, то размер соответствующего ему SVG-файла занял 1220 байт, а при сжатии в формате SVGZ составил всего 685 байт.


    Но дело не только в этом. По сравнению с традиционными вариантами графического представления Сети применение SVG-формата имеет немало других неоспоримых преимуществ.

    Так, для разработчиков важными плюсами являются:

    • возможности совмещения в одном формате разработки статичных, анимационных и интерактивных элементов, а также сочетания векторных и растровых объектов;
    • улучшенная работа с текстом, включая кернинг, текст по кривой и неограниченное использование шрифтов;
    • более эффективное управление точностью передачи цветов и широчайшие возможности в плане использования в web-изображениях градиентных заливок высокого разрешения, теней, фильтров и т.п.;
    • текстовая природа SVG-формата и поддержка им каскадных таблиц стилей, что значительно упрощает процесс обновления web-сайта и позволяет при необходимости вносить в него изменения без обращения к специальным программам;
    • интеграция с построенными на стандартах XML (Extensible Markup Language) и CSS (Cascading Style Sheets) базами данных, что позволяет сохранять SVG-изображения в базе данных и создавать с их использованием динамические web-страницы — различные для разных платформ, персональных настроек и т.д.;
    • отсутствие проблем индексации — SVG-файлы индексируются любыми поисковыми машинами (в отличие, например, от SWF-файлов).
    Цукерберг рекомендует:  Одно устройство. Везде

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

    Рис. 2. Просмотр SVG-графики при разном масштабировании

    Тем не менее, как водится, наряду с плюсами у технологии SVG имеются и минусы, причем весьма серьезные.

    • SVG-изображения слабо поддерживаются производителями Интернет-браузеров. В результате для просмотра SVG-графики из браузера пользователи вынуждены дополнительно устанавливать обеспечивающий данную возможность плагин от сторонних производителей, например SVG Viewer от компании Adobe. Теоретически это несложно — соответствующие плагины просты в установке, бесплатны, имеют небольшой объем и их можно быстро скачать по Сети. На практике все оказывается гораздо сложнее, поскольку большинство Интернет-пользователей не догадываются о существовании данных возможностей и потому не могут просматривать данный вид графики — без плагина она просто не видна. Однако ситуация постепенно меняется, и в прошедшем году два ведущих разработчика web-браузеров внедрили поддержку формата SVG. Весной компания Opera Software выпустила 8-ю версию браузера Opera, поддерживающую SVG 1.0 Tiny; в появившейся чуть позже версии Opera 9.0 реализована частичная поддержка формата SVG 1.0 Basic. Вторым разработчиком, включившим поддержку SVG, стала The Mozilla Organization — в состав выпущенного ею браузера Firefox 1.5 включен модуль Mozilla SVG project, обеспечивающий просмотр SVG-графики спецификации 1.1. Кроме того, в середине 2005 года активную работу по внедрению поддержки SVG 1.1 начали разработчики браузера Safari, функционирующего на компьютерах под управлением Mac OS X;
    • в сравнении с другими графическими форматами формат SVG пока слабо поддерживается и разработчиками графического ПО, хотя такие ведущие графические пакеты, как Adobe Illustrator, Corel DRAW и др., позволяют экспортировать графику в SVG-файлы. Конечно, SVG-файлы могут быть созданы и в любом текстовом редакторе, однако это нецелесообразно в смысле быстроты и дешевизны разработки. В текстовом редакторе удобно подправить файл в случае необходимости (что, кстати, возможно только при наличии глубоких знаний о XML-технологии), но создавать его с нуля неразумно, поскольку это потребует чрезмерных затрат времени и сил. Для этого нужны простые и удобные средства быстрой визуальной разработки графики в формате Scalable Vector Graphics с возможностью правки в этой же среде соответствующего изображению программного кода, однако таких продуктов совсем немного и они недостаточно известны.

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

    Но можно посмотреть на ситуацию и с другой стороны: поддержка SVG (хотя пока и не в полном объеме) двумя популярными Интернет-браузерами, равно как и интерес к технологии именитых разработчиков говорит о том, что «лед тронулся» и что у SVG появился реальный шанс превратиться в один из популярных форматов для представления web-информации. Этот шанс повышается и в связи с ростом интереса к технологии SVG в отношении мобильных устройств, где требования к размеру и качеству изображений гораздо выше. Компания Opera Software, например, предполагает вначале реализовать полную поддержку формата SVG на десктопах и лишь затем перенести ее на мобильные платформы. Поэтому самое время задуматься об использовании SVG и web-дизайнерам — иначе они рискуют в ближайшем будущем оказаться в числе отстающих.

    Плагины для просмотра SVG-графики

    Как уже было отмечено, пока что большинству пользователей для просмотра SVG-графики в полном объеме в окне Интернет-браузера придется воспользоваться одним из подходящих плагинов, наиболее известными из которых являются бесплатные модули Adobe SVG Viewer и Corel SVG Viewer. Первый из них — Adobe SVG Viewer — поставляется как отдельное приложение, отличается компактностью и удобством, работает на разных платформах, поддерживает большое количество Интернет-браузеров и потому гораздо более популярен среди пользователей. Приложение Corel SVG Viewer входит в состав пакета Corel Smart Graphics Studio, но доступно и как freeware.

    Существуют и другие варианты просмотра SVG-графики — можно, например, воспользоваться соответствующими модулями из пакетов Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/batik), KDE KSVG (http://www.kde.org) и др. Полный список приложений, обеспечивающих просмотр SVG-изображений, приведен по адресу: http://wiki.svg.org/Viewer_Implementations.

    Adobe SVG Viewer

    Разработчик: Adobe Systems, Inc.

    Размер дистрибутива: 2,25 Мбайт

    Цена: бесплатно

    Работа под управлением: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

    Поддержка браузеров: Internet Explorer версии 4.0 и выше, Netscape Navigator или Communicator версий от 4.5 до 4.78 (за исключением версий 6.x)

    Corel SVG Viewer

    Разработчик: Corel Corp

    Размер дистрибутива: 4,9 Мбайт

    Цена: бесплатно

    Работа под управлением: Windows 98/NT/2000/Me/XP

    Поддержка браузеров: Microsoft Internet Explorer 5.5 и выше, Netscape Navigator или Communicator версий 4.79, 7.02

    Программы для создания SVG-графики

    Все программы для создания SVG-графики можно разбить на три большие группы. В первую входят популярные двумерные графические пакеты, ориентированные на работу с векторной графикой и позволяющие вместе с тем экспортировать изображения в формат SVG. Наиболее популярные из них — Adobe Illustrator и CorelDRAW; кроме того, подобный экспорт в той или иной мере поддерживает множество других приложений: AutoCAD, Microsoft Visio и пр. Основным преимуществом данной группы приложений является то, что они обладают расширенным инструментарием для создания векторных изображений и позволяют добиться уникальных эффектов за счет использования прозрачностей, градиентных заливок, разнообразных фильтров и пр. Но указанные приложения требуют серьезной специальной подготовки и потому в большей степени рассчитаны на профессиональных дизайнеров. Кроме того, они по большому счету не ориентированы на SVG-дизайн (хотя и позволяют получать графику в формате Scalable Vector Graphics) — обеспечивая удобное визуальное создание и отображение изображений, эти приложения не допускают корректировки их на текстовом уровне, что актуально в отношении SVG-графики. Существенным является и тот факт, что поддержка формата Scalable Vector Graphics в них реализована не в полном объеме, в результате чего не все элементы векторного изображения могут быть без ошибок экспортированы в SVG.

    Вторую группу программных продуктов образуют пакеты, предназначенные исключительно для создания SVG-графики. Они обладают гораздо меньшими возможностями в плане визуальной разработки векторных изображений, хотя и включают весь необходимый инструментарий. Но зато они предоставляют удобные средства для редактирования исходного кода и позволяют работать с SVG-объектами параллельно — и в визуальном режиме, и на уровне кода, причем между этими вариантами представления информации можно легко переключаться. Все приложения из этой группы очень просты и доступны и не требуют много времени на освоение. К тому же они имеют относительно небольшие по объему дистрибутивы (в сравнении с приложениями первой группы), поэтому без проблем могут быть приобретены через Интернет. Однако программ с такими возможностями совсем немного, и ниже мы подробно рассмотрим лишь четыре, представляющие наибольший интерес и рассчитанные на разные категории пользователей. С полным списком доступных для создания SVG-графики приложений можно ознакомиться по адресу: http://wiki.svg.org/Design_Tools.

    И наконец, в третью группу можно включить любые текстовые редакторы, в том числе обычный блокнот. Как было отмечено выше, формат Scalable Vector Graphics базируется на языке XML, что позволяет при необходимости создавать и редактировать SVG-файлы на текстовом уровне в текстовом редакторе.

    Полнофункциональные графические приложения, позволяющие создавать SVG-графику

    Adobe Illustrator CS2

    Разработчик: Adobe Systems, Inc.

    Размер дистрибутива: Macintosh-версия — 428,9 Мбайт, Windows-версия — 398,6 Мбайт

    Способ распространения: shareware (30-дневная демонстрационная версия пакета доступна по адресу: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

    Цена: 665 долл.

    Работа под управлением: Windows 2000 с Service Pack 3 или Windows XP, Mac OS X версий от 10.2.4 до 10.2.7, Java Runtime Environment 1.4.1

    Начиная с 9-й версии в Adobe Illustrator (рис. 3) реализованы импорт и экспорт SVG-файлов, причем на гораздо более высоком в сравнении с аналогичными графическими приложениями уровне. Пакет поддерживает все существующие SVG-спецификации, кодировки ISO 8859-1, UTF-8 и UTF-16, различные варианты экспорта текста и позволяет экспортировать изображения как в обычном формате SVG, так и в сжатом SVGZ.

    Рис. 3. Создание интерактивного SVG-элемента в Adobe Illustrator

    В создаваемой в его среде SVG-графике можно использовать градиенты, прозрачности, а также целую серию специально предусмотренных для этого SVG-эффектов (Effect=>SVG Filters) в виде различных теней, размытия и пр. Изображения с такими эффектами сохраняют четкость при просмотре в web-браузере с любым увеличением. Помимо статичной графики Illustrator позволяет получать и интерактивную графику в формате SVG — для этой цели предусмотрена специальная палитра SVG Interactivity (ее можно открыть из меню Window=>SVG Interactivity), в которой задаются действия для интерактивных объектов. Стоит отметить, что работа над интерактивными SVG-элементами в программе Illustrator требует знания языка Java Script и понимания основных принципов объектно-ориентированного программирования. Кроме того, с помощью формата Scalable Vector Graphics в данной программе можно создавать графику динамических данных (Dynamic Data-Driven Graphics).

    CorelDRAW Graphics Suite 12

    Разработчик: Corel Corp.

    Размер дистрибутива: 200 Мбайт

    Способ распространения: shareware (демонстрационную версию можно скачать с сайтов Интернет-магазинов, например по адресу: http://allsoft.ru/Download.php?ver=17605)

    Цена: 290 долл. (Allsoft.ru)

    Работа под управлением: Windows NT/2000/XP

    Известное приложение для разработки профессиональной векторной графики CorelDRAW (рис. 4), входящее в состав пакета CorelDRAW Graphics Suite 12, обеспечивает импорт и экспорт в форматах SVG и SVGZ на базовом уровне, а следовательно, может использоваться для создания статичной и интерактивной SVG-графики.

    Рис. 4. Экспорт векторного изображения
    в SVG-файл в CorelDRAW

    В приложении реализована поддержка нераспознанных данных, атрибутов и метаданных, а также предусмотрена возможность предварительного просмотра SVG-файлов в браузере перед экспортом. Кроме того, возможна кодировка Unicode для методов кодирования UTF-8 и UTF-16 и различные варианты экспорта текста и bitmap-изображений. В последней версии значительно улучшена поддержка экспорта символов, текста, теней, контуров, слоев, внедренных двоичных изображений и пр.

    Mayura Draw 4.3

    Разработчик: Mayura Software

    Размер дистрибутива: 1,3 Мбайт

    Способ распространения: shareware (демонстрационная версия — http://www.mayuradraw.com/mdraw.zip)

    Цена: 39 долл.

    Работа под управлением: Windows 95/98/Me/NT/2000/XP

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

    Рис. 5. Интерфейс программы Mayura Draw

    Специализированные пакеты для создания SVG-графики

    EvolGrafiX XStudio 6.1

    Разработчик: EvolGrafiX

    Размер дистрибутива: 7,25 Мбайт

    Цена: 449 долл. — коммерческая лицензия, 249 долл. — академическая лицензия

    Работа под управлением: Windows 2000/XP

    Профессиональный пакет XStudio (рис. 6) представляет собой удобный инструмент для создания разноплановой SVG-графики для Сети и мобильных устройств и обеспечивает полный контроль как над SVG-проектом в целом, так и над векторными изображениями, анимацией, скриптами и пр. Приложение отличается удобным, интуитивно понятным и легко настраиваемым пользовательским интерфейсом, предоставляет широкий набор инструментальных средств, имеет высокую скорость работы, позволяет создавать SVG-графику всех существующих спецификаций и поддерживает все стилевые оформления Scalable Vector Graphics. Все это в сочетании с относительно невысокой для профессионального пакета ценой позволяет считать его лучшим профессиональным решением подобного плана. Пакет XStudio поставляется с подробной документацией, дополненной серией уроков, и прост в освоении.

    Рис. 6. Совмещение визуального создания изображения с правкой исходного кода
    в EvolGrafiX XStudio

    Приложение обладает всеми необходимыми возможностями для создания и обработки векторных изображений и в этом плане очень напоминает пакет Adobe Illustrator. При этом XStudio ориентирован непосредственно на подготовку статичной, интерактивной и анимационной SVG-графики и потому наряду с классическими средствами работы с векторными объектами дополнен специфическими SVG-возможностями. Встроенная инструментальная панель Document Object Model (DOM) обеспечивает иерархическое представление SVG-объектов, удобный XML-редактор позволяет исправлять исходный код на текстовом уровне, а скриптовой редактор — дополнять его Java-скриптами. Работа с кодом организована очень удобно: автоматически выделяются фрагменты кода выбранного объекта, имеется возможность поиска текста и установки закладок и пр. Любые изменения кода мгновенно отражаются в визуальном окне просмотра, а визуальные изменения — в окне редактора.

    Inkscape

    Разработчик: IOSN (International Open Source Network — Международная сеть открытого ПО)

    Размер дистрибутива: 8,7 Мбайт

    Цена: бесплатно

    Работа под управлением: Windows 9x/NT/2000/XP, Mac OS X, Linux

    Inkscape (рис. 7) — самый перспективный векторный редактор на базе модели Open Source, являющийся многоплатформенным и представляющим собой мощный инструмент для разработки графики в соответствии со стандартом Scalable Vector Graphics. Своими функциональными возможностями работы с векторными изображениями, равно как и интерфейсом, Inkscape очень напоминает CorelDRAW. В нем реализованы поддержка alpha-каналов, работа со слоями, использование обтекаемого текста, эффектные градиентные заливки, большое число фильтров и эффектов, разнообразные трансформации, удобная работа с контурами и объектами, группировка объектов и многое другое. Возможны импорт данных из файлов JPEG, PNG и TIFF и внедрение их в SVG-изображения.

    Рис. 7. Правка исходного кода в окне
    встроенного редактора Inkscape


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

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

    Corel WebDraw

    Разработчик: Corel Corp

    Размер дистрибутива: 15,6 Мбайт

    Способ распространения: shareware (30-дневная демонстрационная версия — http://www5.jasc.com/pub/wdw102ev.exe)

    Цена: 179 долл. — download-версия, 199 долл. — CD-версия

    Работа под управлением: Windows 98/NT4/2000/Me/XP

    Пакет Corel WebDraw (рис. 8), более известный как Jasc WebDraw, — универсальное решение для создания высококачественной графики и анимации в формате SVG, ориентированное на профессиональных дизайнеров. А интуитивно понятный интерфейс программы делает ее привлекательной и для широкого круга пользователей.

    Рис. 8. Интерфейс программы WebDraw

    В приложении доступен обширный набор стандартных графических инструментов, характерных для полнофункционального приложения работы с векторной графикой: базовые формы (эллипс, прямоугольник, звезда и пр.), перо, полигон, полилиния, текст и т.п. Наряду с векторными объектами WebDraw позволяет дополнять SVG-объекты внешними растровыми изображениями. Помимо обычных заливок и наложения готовых стилей можно использовать сложные градиенты, заливки, в том числе и созданные собственноручно узоры. Для получения более эффектных изображений можно воспользоваться фильтрами — как достаточно простыми (размытие и наложение тени), так и сложными (текстурирование и освещение). Для точного размещения объектов предназначены сетки, направляющие и линейки, а встроенная инструментальная панель Document Object Model (DOM) представляет SVG-объекты в виде иерархического дерева, что существенно упрощает управление.

    WebDraw оснащен универсальной линейкой раскадровки анимации Animation Timeline, которая построена на базе объектной модели SVG DOM (Document Object Model), что позволяет выбирать и анимировать практически любой атрибут или свойство объекта всех типов в любое время. Механизм перетаскивания позволяет редактировать непосредственно в монтажной линейке начальную и конечную точки анимации, а также продолжительность каждой фазы анимации. Поскольку ключевые точки анимации (keytime) вставляются каждый раз при установке параметров анимации для атрибута или свойства объекта, их можно переносить на другие участки раскадровки в целях автоматической настройки распределения эффектов анимации во времени.

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

    Sketsa SVG Editor 3.2.3

    Разработчик: KIYUT

    Размер дистрибутива: 5,99 Мбайт

    Способ распространения: shareware (демонстрационная версия, добавляющая метку на изображение, — http://www.kiyut.com/products/sketsa/sketsa.zip)

    Цена: 49 долл.

    Работа под управлением: Windows 2000/XP, Java VM (JRE) 1.5 и выше (http://www.java.com/getjava), UNIX и Linux

    Приложение Sketsa (рис. 9) относится к самым популярным из SVG-редакторов и позволяет создавать профессиональную SVG-графику, в том числе с оптимизацией в формате SVGZ. Пакет удачно сочетает в себе простоту и удобство работы с широким перечнем возможностей и совместим с Windows-, Mac- и Linux-системами.

    Рис. 9. Визуальное редактирование изображения в Sketsa

    Sketsa поддерживает классический набор характерных для любого векторного приложения инструментальных средств, позволяющих создавать и трансформировать любые векторные объекты на основе как контуров, так и графических примитивов и текста, которые при желании несложно дополнить растровыми изображениями. Возможно управление прозрачностью, использование градиентных заливок и фильтров. Все это удачно дополнено специализированными SVG-возможностями, благодаря которым любое изображение можно редактировать не только визуально, но и в текстовом режиме. Для редактирования SVG-кода в пакете предусмотрен встроенный текстовый редактор XML. В целях удобства управления объектами имеется встроенная инструментальная панель Document Object Model (DOM), представляющая собой иерархический древовидный набор объектов в документе SVG, что позволяет выбрать любой объект документа для редактирования его свойств.

    Создаем SVG анимацию, используя CSS и JavaScript

    SVG или Масштабируемая Векторная Графика (Scalable Vector Graphics) применяет XML, дабы предоставлять вектору графическую информацию в легкой форме. В отличие от другого растеризированного формата изображения, такого как PNG и JPEG, SVG может быть изменен без потери качества изображения.

    Создавать SVG можно при помощи Adobe Illustrator, а также используя другие различные графические редакторы. Но еще возможно сделать это и вручную, используя XML/SVG DOM теги и настройки создания элементов.

    Так как это графика XML, возможно создавать некую анимацию SVG, путем использования возможностей CSS, JavaScript и SMIL (Синхронизированный Мультимедийный Язык Интеграции).

    В сегодняшнем уроке я покажу вам, как анимировать SVG с помощью CSS и JavaScript. А использовать мы будем изображение, текст и векторную графику.

    Для сегодняшнего урока нам понадобится:

    • SVG иконка
    • SVG текст
    • SVG ваза и цветок
    • Знание HTML и CSS
    • Время и чуточку терпения

    Экспортируем файлы в SVG

    Лучший способ экспортировать изображение в SVG формат, это воспользоваться возможностями Adobe Illustrator. Я уже создал SVG иконку и текст в illustrator, которые мы будем использовать в процессе урока.

    Чтобы экспортировать Ваши файлы Adobe Illustrator в SVG, просто зайдите в File->Save As(Файл->Сохранить как), следующим шагом будет выбор имени и SVG формата. В этом примере я буду использовать plant(вазу), формат файла выбираем SVG.

    Затем всплывет окно, удостоверьтесь, что у вас выбран SVG version(версии 1.1), после выберите location(местоположение):link(ссылка). В CSS properties(CSS свойствах) выбираем Style Elements(Элементы стиля). Если вам необходимо проверить SVG код, то вам нужно нажать на кнопку “SVG Show code”(Просмотр кода SVG), она находится в нижней части окна. Чтобы закончить процесс, экспорта необходимо нажать на кнопку OK.

    Используем SVG в HTML

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

    1. Вставляем целый SVG код в HTML

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

    Супер легкие SVG иконки различных брендов

    Набор очень легких (менее 1 килобайта) SVG иконок различных брендов, в основном IT компании и социальные сети.

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

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

    Поиск

    uWebDesign настоятельно рекомендует!

    Темы к ближайшему подкасту (10 комментариев)

    Предлагайте свои темы для выпуска #214 в комментариях!

    Как проектировать, создавать и анимировать SVG

    27 октября 2020

    Вы можете считать Масштабируемую Векторную Графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.

    Флаг Японии сделанный с помощью SVG

    Это пример SVG. Если посмотреть на его исходный код, то можно заметить, что он состоит из тегов и атрибутов так же, как и в HTML-документе. Все они находятся внутри тега . Здесь есть тег , рисующий прямоугольник с чёрной рамкой и белым цветом фона. И внутри него эллипс (почти что круг, но обратите внимание на атрибуты и ), который залит красным цветом.

    SVG в вебе можно использовать двумя способами. Например, использовать SVG-файлы в атрибуте src тега . То есть мы получим — точно так же, как с PNG или JPEG-изображениями.

    Но более интересное использование заключается в том, что мы можем вставлять SVG напрямую в

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

    Все эти вещи ранее были возможны только с использованием Flash, для которого требовался flash-плеер и много сложной работы. К тому же сейчас никто не любит использовать Flash.

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

    Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.

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

    Вот что происходит при увеличении растрового изображения:

    Что происходит при увеличении растрового изображения

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

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

    Вот что происходит при увеличении векторного изображения:

    Что происходит при увеличении векторного изображения

    SVG-теги

    Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

    Вот как он может выглядеть:

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

    Вот пример тега :

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

    Вот пример тега :

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


    Вот пример тега :

    определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием

    может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

    1. «M150 0» — переместись на (150,0);
    2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
    3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
    4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

    Вот пример тега

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

    Вот пример тега :

    Создаём SVG

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

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

    1. Для начала создадим круг.
    2. Затем добавим больше кругов и сохраним исходный код.

    CSS3-анимация

    SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.

    CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

    Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

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

    Анимационный тег

    Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.

    Вот пример анимации SVG с помощью тега :

    Анимация и интерактивность, основанная на JavaScript

    Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов ( id или class ).

    Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.

    В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:

    Почему нельзя использовать SVG для всех изображений?

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

    Практическое
    руководство

    Содержание
    Введение

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

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

    Scalable Vector Graphics это разметка, основанная на XML , который содержит двумерные векторы. Векторами могут быть простые геометрические формы, сложные контуры, да и всё то же самое, что можно сделать в Иллюстраторе. Этот формат изображений имеет намного больше общего с веб-страницей, чем тот же JPEG . SVG намного мощнее — им легко можно управлять при помощи кода (в текстовом редакторе или с помощью CSS / JS ).

    • не зависит от разрешения
    • поддерживается во всех современных браузерах
    • актуален в будущем ( W3C стандарт)
    • легко создавать и редактировать
    • изменяется с помощью CSS & JS
    • поддаётся сжатию

    Подготовка и оптимизация

    Подготовка 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 файле.

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

    Оригинал: 1,413b

    После оптимизации: 409b

    В итоге размер файла стал меньше на

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

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

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

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

    Варианты использования (реализации)

    Когда приходит время использовать SVG в вебе, появляется много различных способов, как это сделать. Некоторые из них имеют определённые преимущества в зависимости от того, чего вы хотите добиться, а некоторых стоит и вовсе избегать. Если требуется только базовая настройка, а разрешение и размер файла должны быть небольшими, то можно прописать SVG в img или как background-image в CSS , так же как любой другой формат файла.

    Здесь всё делается так же, как с любым изображением в этом формате. Можно даже использовать SVG как элемент

    . Но помните, что возможности преобразований в этом формате ограничены.

    Background-image

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

    Iframe

    Вы можете загрузить SVG как

    Embed


    применяется «во внешних приложениях» или «в интерактивном контенте». Вы можете использовать это для SVG , но лучше не стоит.

    Object

    Inline

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

    Заключение

    Если хочется выжать максимум из SVG , используйте

    JS -манипуляции

    Мои знания Javascript очень маленькие, поэтому я дам только основные советы о том, как можно использовать JS для изменений в SVG . Если вы хотите вставить свои скрипты внутри SVG , то не забудьте обернуть их в &lt![CDATA[ . ]]> снова, чтобы избежать ошибок анализа. Скрипты не будут работать если использовать или background-image из-за мер безопасности (то есть чтобы предотвратить запуск потенциально вредоносного кода на вашей странице).

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

    Фиксированная ширина и адаптивность

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

    Если размеры фиксированы, то единственная важная вещь, с которой нужно быть осторожным, если вы используете SVG как background-image — это то, что вам нужно быть уверенным, что background-size прописан, так как браузеры могут немного запутаться и или подрезать изображение, или сжать его, особенно, если отображаются размеры, отличные от оригинального размера изображения.

    Когда вы изменяете размер SVG , нужно помнить о некоторых вещах (если используем background-image ):

    Объект

    Работает, как ожидается, при width: 100%;

    Встроенные

    Ранее требовалась значение max-height для работы, в настоящее время работает, как ожидается. Помните, что Safari не так быстро отрисовывает изображения (если они сложные) при изменении размеров окна.

    Работает, как ожидается, при width: 100%;

    Background-image

    Требует padding-bottom: #%; , чтобы сохранить пропорций изображения, иначе не отображается.

    Анимация

    Когда требуется анимировать SVG существует несколько различных опций, которые можно использовать — анимирование SVG (основанное на SMIL -стандарте), CSS3 -анимация или JS -анимация. SVG — и CSS3 -анимации позволят сделать большую часть того, что вам захочется сделать, при этом SVG -анимация чуть мощнее, потому как имеет возможность «контролировать» некоторые особенности (или даёт доступ к некоторым возможностям). JS позволит относительно легко делать неплохую сложную анимацию, особенно используя такие библиотеки как Snap.svg. Это находится вне моих знаний о JavaScript, поэтому я позволю вам потестировать их демо версии, чтобы убедиться подходит ли это вам.

    SVG -анимация даёт огромные возможности, но я не собираюсь останавливаться на этом подробно, и, честно говоря, я ни разу не использовал её. Я могу представить, что может быть полезно добавить некоторую хорошую анимацию для ваших иллюстраций, но честно говоря, с практической точки зрения, не каждый проект имеет на это достаточное время и бюджет. Если у вас всё же есть возможность, довольно просто начать экспериментировать с этим, есть много прекрасных онлайн-уроков. В основном можно добавлять дочерние элементы к любому контуру или форме в ваших SVG -файлах, которые позволят контролировать анимацию. Самое лучшее в этом то, что оно работает со всеми методами использования SVG . Internet Explorer не поддерживает SVG -анимацию, однако вы можете использоваться полифил, такой как FakeSmile для работы с IE .

    Вот вам небольшой пример. Обратите внимание: я подсветил голубым цветом, чтобы легче было увидеть анимацию.

    SVG -анимация

    Object

    Inline

    Background-image

    Обычно, когда мы хотим анимировать иконки или иллюстрации в вебе, мы это делаем для добавления интерактива, то есть при наведении мыши и тому подобное. Это подпадает под пункты «Управление с помощью CSS» и «Интерактивная SVG-анимация» из табличек выше, и следовательно, не работает ни с SVG -, ни с CSS3 -анимациями при использовании или background-image . Чтобы сделать интерактивную анимацию в SVG можно добавить begin=»mouseover» и begin=»mouseout» . Для CSS3 -анимации всё то же самое, что и в любом другом случае — добавьте классы для SVG -элементов и стилизуйте их при (наведении) hover . Обратите внимание на одну вещь — если вы хотите стилизовать анимации из внешнего списка стилей, они будут работать, как ожидается при использовании встроенного SVG . А при использовании

    CSS3 -анимация

    Спрайты

    Можно создавать и использовать SVG -спрайты так же, как и в случае с PNG или background-image , чтобы получить преимущества в разрешении, или же можно шагнуть чуть дальше, используя дополнительные возможности SVG . Я не буду на этом подробно останавливаться, так как это становится довольно сложным (это комплексный подход), и я лично никогда не сталкивался с необходимостью использовать его. Основное преимущество — это использовать всю мощь SVG с меньшим числом HTTP -запросов.

    Существует два подхода, которые можно использовать — в первом вы определяете все иконки внутри тега в SVG , но скрываете их. Затем обращаетесь к каждому, когда это потребуется, используя элемент , ссылаясь на с xlink:href=»#id» . Второй подход — это использовать в SVG viewbox атрибут, чтобы обрезать рабочую область (область в SVG , которая видна) вокруг определённой области. Эти оба способа достаточно продвинутые, поэтому задумайтесь о них, только если решите использовать.

    Если вы хотите узнать как внедрить эти техники, то обратитесь к ссылкам на ресурсы, приложенные ниже, особенно к статье Sara Soueidan’s на 24ways.

    Если вы хотите использовать SVG -спрайт как PNG -спрайт с CSS , то нужно добавить атрибуты width и height рядом с атрибутом viewBox в SVG -коде. Традиционно, в процессе оптимизации они удаляются, потому что обычно они не нужны. Однако, в этом случае эти параметры требуются для IE9 & 10 чтобы корректно порезать их на части. Это происходит потому, что эти браузеры принимают размеры высоты и ширины, указанные в CSS , за размер изображения, а на самом деле это как раз размеры требуемой части изображения (а не всего изображения в целом).

    Медиавыражения

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

    Представьте, что вы большой бренд и вы хотите, чтобы ваш логотип использовался правильно, независимо от отображаемого размера. И вам это удастся. Только вставьте нужное медиавыражение, и вы сможете менять формат в зависимости от размера изображения на дисплее. Это работает со всеми реализациями, кроме background-image , и во всех браузерах (но помните: IE9—11 может игнорировать некоторые контрольные точки). Поэкспериментируйте со слайдером ниже, чтобы увидеть на живом примере, как это может работать:

    Запасной вариант

    К слову о запасных вариантах. SVG поддерживается во всех современных браузерах, но если ещё требуется поддержка IE8 , то нужно использовать запасные варианты, скорее всего, в виде PNG . Я не буду останавливаться на этом хотя бы потому, что уже пора прекратить пользоваться IE8 ¯\_(ツ)_/¯. В любом случае, если вам всё же нужны запасные варианты, всё усложняется довольно быстро, как и большинство вещей с SVG . Советую прочитать исчерпывающую статью Amelia Bellamy-Royds на CSS-Tricks.

    Оптимизация и защита: img → SVG → Fonts

    Приём не новый, но актуальный.

    Поисковые системы остро рассматривают производительность сайта (экран загрузки, время перехода в интерактив и другие метрики) при разных условиях: скорости соединения, устройства просмотра и так далее.

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

    • Брейкпоинты и медиазапросы в CSS (загрузка заранее подготовленного контента в зависимости от разрешения устройства).
    • JavaScript по оптимизации изображений (дополнительная нагрузка на сайт в виде исполнения скрипта).
    • «Ленивая» загрузка (с Chrome 76) при использовании в HTML атрибута loading=»lazy».
    • «Дедовское» сжатие и размещение на хостинге других изображений.

    Также стоит отметить, что сейчас развита тенденция использовать SVG (векторные изображения) вместо тех же PNG, JPG.

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

    Все преимущества можно почитать в других статьях.

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

    Рассмотрим на примере:

    Есть исходная картинка в формате PNG и SVG.

    15 полезных SVG инструмента

    SVG — это двухмерная векторная графика, дословно «масштабируемая векторная графика», и, тем не менее, это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online, ConceptDraw PRO и другие.

    Фактическое развитие SVG началось с версии 1.1 опубликованной W3C в 2011 году. Анонс улучшенной версии 2.0, превосходящей возможности Flash, намечен на 2020 год. Благодаря языку разметки XML, легко встраивается в HTML документ.

    SVG-объекты ничем не отличаются от стандартных в графических редакторах.

    Давайте абстрагируемся от музыкальных метафор и пробежимся по основным советам по составлению композиции. Убедитесь:

    Линии и ломаные линии

    Окружности и эллипсы

    SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT). Преобразуя в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например, визуализировать графики, круговые диаграммы, гистограммы

    SVG для десктопа

    SVG не теряет в качестве при масштабировании и не зависит от разрешения экрана

    При помощи CSS3 и JavaScript можно менять стили и атрибуты для SVG-элементов

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

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

    Наличие прозрачного фона

    Легко создавать и редактировать

    SVG для мобильных


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

    Объекты SVG зачастую весят намного меньше растровых изображений

    При помощи CSS3 и JavaScript можно менять стили и атрибуты для SVG-элементов

    SVG идеально подходит для визуальных коммуникаций и микровзаимодействия с пользователем на мобильном устройстве

    Анимация на основе SVG

    Наличие прозрачного фона

    Легко создавать и редактировать

    Поддаётся gzip-сжатию и оптимизации без потери качества

    Выжимаем максимум из SVG

    Удаляем лишние точки без потери визуальной формы

    Включаем Deflate или GZIP для .svg файлов

    Используем тег для повторяющихся элементов

    Кешируем image/svg+xml запросы (заголовки):

    Date:Tue, 04 Oct 2020 12:46:00 GMT

    Last-Modified:Mon, 10 Jun 2013 12:39:41 GMT

    Предостережение

    С увеличением количества мелких деталей в изображении, растёт размер SVG-файла. Проще использовать jpeg или даже png. Например, изображение травы в векторе может весить 10мб, а тоже самое изображение в jpg будет весить 200кб.

    Как работать с SVG. Что нужно знать в теории?

    Структуру SVG документа в отдельном файле.

    Для полноценной анимации будем использовать только inline-встраивание SVG.

    Минимальный набор для встраивания в html:

    viewBox=»x y width height» — определяет пользовательскую область просмотра

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

    Выравнивание с preserveAspectRatio необходимо для настройки пропорций изображения

    Ось X в области просмотра:

    xMin —левая граница области просмотра

    xMid —центр по оси X

    xMax —правая граница области просмотра

    Ось Y в области просмотра:

    meet — указывает, что изображение должно сохранить свои пропорции и быть полностью видимым (CSS-аналог background-size:contain;)

    slice — указывает, что изображение должно сохранить свои пропорции и будет отмасштабировано в соответствии с максимальным граничным значением области просмотра (CSS-аналог background-size:cover;)

    none — означает, что внутреннее изображение потеряет свои пропорции и будет использовать пропорции viewBox.

    Основные примитивы SVG

    В подробности вдаваться не буду (тема отдельной статьи), их описание можно найти в стандарте W3C https://www.w3.org/TR/2020/CR-SVG2-20200915/shapes.html#RectElement

    А нас больше всего интересует тег

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

    smooth curveto (S,s)

    quadratic Bezier curveto (Q,q)

    smooth quadratic Bezier curveto (T,t)

    elliptical arc (A,a)

    Моя задача подать материал максимально просто, поэтому за наглядные примеры http://www.petercollingridge.co.uk/svg-tutorial/paths благодарю Петра Колингриджа (Peter Collingridge).

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

    Клонирование объектов с помощью тегов и

    У нас был проект, в котором использовалось много однотипных иконок с большим количеством цветовых оттенков. Задачу решили, создав глобальный inline-SVG для всех страниц с множеством переменных . В нужных местах страницы использовали . В CSS применяли цвет use.green .

    К слову о градиентах. У SVG на данный момент возможности шире чем CSS. Смотреть здесь https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

    Пример использования градиента можно посмотреть по ссылке http://codepen.io/anon/pen/BLmrxB

    Как работать с SVG. Что нужно знать на практике?

    В конце статьи даются ссылки на библиотеки, которые помогают при анимировании

    Приведу простые примеры из «Инструкции новичка» по Snap.SVG.

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

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

    Любой графический редактор, обладающий возможностью работы с векторной графикой, имеет path-панель.

    С ее помощью будем управлять точками и кривыми безье.

    Наша задача нарисовать начальное и конечное положение кривых. А анимацию на html-странице описать Javascript’ом.

    Визуально обозначим траекторию движения будущей анимации

    Как видим, всё просто! Матрицы аффинных преобразований не потребовались :)

    Как использовать SVG для анимации, интерактивности и микровзаимодействия

    Важный момент: Почему мы не используем стандартные средства анимации в SVG? Язык SMIL (Synchronized Multimedia Integration Language) не рассматриваем, так как W3C больше не будет поддерживать SMIL.

    Возьмем, к примеру, две кривые в виде XML

    Программирование анимации (изменение X,Y-координат у точек) будет выглядеть примерно так:

    1. M 166.5 142.5 L 518 182.5 L 885.5 142.5
    2. M 166.5 150 L 518 190 L 885.5 150
    3. 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
  • . Важно чтобы количество точек совпадало.

    Продолжаем пример. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с точками.

    Код для анимации такого квадрата:

    Библиотека 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 — по сути рисует новый квадрат

    feImage — преобразует векторную графику в растровую

    feMerge — параллельное объединение SVG-фильтров

    feMorphology — используется когда необходимо истончить или утолщить края исходного изображения

    feOffset — сдвиг изображения по координатам x и y

    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. Преимущества и полезность применения анимации в процессе «визуальной коммуникации» очевидны и перевешивают возможные недостатки.


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

    Snap SVG — snapsvg.io — библиотека для работы с SVG

    Greensock — greensock.com — библиотека для анимации

    easings.net — Шпаргалка функций плавности

    jQuery Easing Plugin — функции плавности

    anime.js — anime-js.com — библиотека для анимации

    dynamics.js — dynamicsjs.com — библиотека для анимации

    https://www.w3.org/TR/SVG/ Scalable Vector Graphics (SVG) 1.1 (Second Edition) — W3C Recommendation 16 August 2011

    https://www.w3.org/TR/2020/CR-SVG2-20200915/ Scalable Vector Graphics (SVG) 2 — W3C Working Draft 15 September 2015

    http://caniuse.com/#search=svg — возможность поддержки SVG различными браузерами

    Авторы GIF изображений, использованных в статье: Сергей Валюх, Эрнест Асанов, Алла Кудин.

    Статья написана отделами AFFINAGE DESIGN и AFFINAGE PRODUCTION компании AFFINAGE.

    Полное руководство по SVG: векторная графика в веб-дизайне и этапы ее создания

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

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

    Что такое SVG, сложности в использовании

    SVG (Scalable Vector Graphics) — технология, с помощью которой на сайтах описывается векторная графика. Посредством SVG можно создавать анимацию, векторные и смешанные изображения, текст.

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

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

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

    Зачем веб-дизайнеру нужен SVG

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

    Причина 1. Масштабируемость

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

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

    Причина 2. Простота изменений

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

    Причина 3. Возможность использования анимации

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

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

    Причина 4. Быстрота загрузки

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

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

    Причина 5. Влияние на SEO

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

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

    Примеры SVG на веб-сайтах

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

    Иллюстрации

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

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

    Иконки

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

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

    Текст

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

    Здесь надпись представлена как SVG-изображение, которое состоит из линий вперемешку с геометрическими вставками.

    Декоративные элементы

    Волнистые линии, геометрические фигуры и формы часто представляют с помощью SVG.

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

    Еще один пример — виджет часов, также выполненный с помощью SVG.

    Можно добавить анимации с помощью JavaScript и придать динамичности веб-странице.

    Логотипы

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

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

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

    Создание SVG: графические редакторы, возможности кода

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

    Для создания SVG-изображений используются редакторы, которые имеют возможность работать с вектором, например:

    • Adobe Illustrator;
    • Adobe InDesign;
    • CorelDRAW;
    • Inkscape и прочее.

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

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

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

    Тегом мы обозначаем фигуру с характеристиками: радиус, положение центра окружности относительно оси X и Y, цвет. Получается такая фигура:

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

    , для прямоугольников — и так далее.

    Внедрение SVG в HTML

    Внедрить SVG на веб-сайт можно различными способами. Рассмотрим самые используемые из них.

    Inline ( )

    Это тег , о котором говорилось выше. Подходит для простых фигур и картинок. Изображение рисуется прямо в HTML коде. Можно применять CSS-стили (немного отличаются от стандартных, для применения уточняйте наличие в спецификации) и анимацию. Сам тег характеризуется шириной, высотой и уникальным идентификатором id.

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

    Как изображение

    Для более сложных фигур и иллюстраций используют тег . Для этого нужно сохранить файл в формате .svg через специальный графический редактор или конвертер. Пример вставки тега в HTML:

    В папке img мы храним изображение круга в формате .svg, задаем изображению высоту и ширину, а также вспомогательный атрибут alt для тех пользователей, у кого не загружаются изображения в браузере.

    Также можно загрузить SVG-файл как фоновое изображение. В HTML картинка вставляется как обычный блок:

    А потом меняются стили:

    .imageSvg <
    background-image: url(«img/circle.svg»);
    width: 250px;
    height: 300px;
    >

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

    Как объект

    Универсальный способ вставки мультимедийного контента в код HTML — тег

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

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

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

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих