Svg графика: Знакомство с SVG-графикой / Хабр
Описание и примеры стандартных функций SVG
Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0
Основные преимущества формата SVG.
Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
Бесконечное полотно документа svg.
Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.
При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.
Взаимодействие SVG, XML с HTML, CSS, Jscript
В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.
Анимация и интерактивность SVG.
Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3.js, BonsaiJS, Svg.js, Snapsvg.js
Еще примеры анимации ⇛
Недостатки SVG формата
- С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
- Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
- В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛
Формат SVG: особенности, преимущества и недостатки.
Vasyl Holiney Обновлено Loading…Сегодня речь пойдет о формате векторной графики SVG. Что такое векторная графика и чем отличается от растра можно посмотреть тут.
SVG — XML язык разметки на основе векторной графики. По сути это текстовый файл, который является открытым веб-стандартом для описания двухмерных векторных изображений без потери качества при масштабировании. Также поддерживает интерактивность и анимацию. Разрабатывается с 1999 года и используется для того, чтобы описать с помощью языка программирования графические элементы сайта.
Акроним: Scalable Vector Graphics.
Тип изображения: векторный.
Тип сжатия: обычно не сжимается, но может быть сжат без потерь.
Особенности формата .svg
Формат SVG мы упоминали в этой статье, теперь разберем его особенности более подробно:
- размер SVG-файла не зависит от размера или глубины цвета. На вес влияет сложность точек и линий, с которых состоит изображение;
- во время масштабирования не теряет информацию, поэтому заменяет собой несколько вариантов растровых файлов для разных разрешений экрана;
- подходит для печати и индексации поисковыми системами;
- может быть встроен в html-код сайта, а значит, кешируется вместе с ним и загружается быстрее, чем изображения в .png или .jpeg.
Преимущества и недостатки формата .svg
Плюсы:
- масштабируемость без изменения качества — один и тот же логотип будет хорошо выглядеть и на экране смартфона, и на большом экране Retina;
- простота создания: программисты пишут иконки с помощью xml-кода, веб-дизайнеры рисуют более сложные элементы в редакторах векторной графики Adobe Illustrator, Corel Draw, Sketch или Macromedia Freehand;
- малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объекты растровой графики;
- гибкость: при помощи CSS можно изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице, а при помощи javascript задать анимацию элементов. Также можно отредактировать SVG-файл в графическом редакторе;
- четкая прорисовка деталей и лучший результат печати.
Минусы:
- не поддерживается старыми браузерами — Internet Explorer 8 и старше;
- WordPress воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно с помощью плагинов;
- подходит для создания примитивных объектов, которые могут быть описаны простыми фигурами или их частями: окружность, прямая, эллипс, прямоугольник и т.д.
Где использовать?
Обычно .svg используют в дизайне иконок, логотипов и элементов пользовательского интерфейса для веб-сайтов. Но область применения этого формата намного больше. С его помощью можно создавать графики и диаграммы, простую инфографику, масштабируемые дорожные карты, легкие игры вроде судоку или кроссвордов.
Полученные элементы будут без потерь растягивается и сжимается в зависимости от размера экрана, иметь малый вес и отлично смотреться на устройствах с высокой плотностью пикселей.
Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.
Что такое SVG-графика и зачем она нужна
Недавно мы рассказывали о том, чем отличается растровая графика от векторной. Если коротко: растровая графика фотореалистичная, состоит из точек, но её нельзя увеличивать бесконечно без потери качества. Векторная графика работает наоборот: она подходит не для фотографий, а больше для простых рисунков, но её можно увеличивать как угодно и качество останется идеальным.
Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами HTML.
Что такое и зачем нужно SVG
SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика». Это значит, перед нами векторное изображение, которое можно масштабировать без потери качества.
SVG — это не единственный формат векторной графики, есть много других. Но именно SVG используют на веб-страницах и в HTML-коде. Его инструкции оптимизированы для веб-разработки, и отрисовка происходит прямо в браузере. И, самое главное, все команды SVG представлены в виде текста и координат, а не в виде отдельных файлов. Это значит, что SVG-изображение можно зашить прямо в код веб-страницы, что иногда бывает незаменимо.
SVG используется в вебе для отрисовки:
- геометрических фигур и линий,
- логотипов,
- элементов интерфейса на странице,
- простых картинок и иллюстраций.
Как использовать SVG на странице
Обычно когда хотят что-то нарисовать в HTML, то используют холст с тегом <canvas> и рисуют на нём. Но плюс SVG-графики в том, что для неё не нужен отдельный холст — можно рисовать что угодно в любом месте страницы с помощью тега <svg>..</svg>. Все объекты, которые нам нужно нарисовать, задаются между этими тегами.
Например, мы можем поставить на странице любой заголовок, а потом прямо поверх него нарисовать пару зелёных кругов и красную линию:
Теперь давайте разберёмся, как это у нас получилось и что для этого нужно.
Линия
Линия — самый простой элемент SVG-графики. Чтобы нарисовать линию, нам нужно знать:
- начальные и конечные координаты,
- толщину линии,
- и её цвет.
Для линии используется тег <line/>:
<line
x1=»50″ y1=»30″ ← начальные координаты линии
x2=»250″ y2=»0″ ← конечные координаты
stroke-width=»3″ ← толщина линии
stroke=»red» ← цвет
/> Соберём всё вместе:
<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/> Теперь обернём эту команду в тег <svg>, поставим на страницу и посмотрим на результат:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>SVG-графика</title>
</head>
<body>
<svg>
<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>
</svg>
</body>
</html>Круг
Для круга используется команда <circle/>, в которой нам нужно указать:
- центр круга,
- радиус,
- цвет заливки,
- толщину контура,
- цвет контура.
Чтобы нарисовать зелёный круг с жирной фиолетовой обводкой, зададим такие параметры:
<circle
cx=»25″ cy=»25″ ← центр круга
r=»20″ ← радиус
fill=»green» ← цвет заливки
stroke-width=»5″ ← толщина контура
stroke=»rgb(150,110,200)» ← цвет контура
/>Соберём вместе, добавим второй круг и тоже положим это внутрь тега <svg>:
<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>Прямоугольник
С прямоугольниками тоже всё просто — указываем размеры, цвет заливки, а также цвет и толщину контура:
<rect
width=»30″ ← ширина
height=»20″ ← высота
fill=»orange» ← цвет прямоугольника
stroke-width=»1″ ← толщина контура
stroke=»rgb(0,0,0) ← цвет контура
«/><rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.
Многоугольник
Многоугольник — это фигура, которая получается так:
- Мы задаём любое количество точек по координатам.
- Через эти точки по порядку проходят линии, причём последняя точка соединяется с первой.
- То, что получилось внутри границ линий, закрашивается выбранным цветом.
Например, вот что нужно, чтобы нарисовать синий треугольник:
<polygon
points=» ← начались координаты вершин треугольника
100,140 ← координаты первой точки
250,118 ← координаты второй точки
170,60 » ← координаты третьей точки
fill=»blue» ← цвет фигуры
stroke-width=»1″ ← ширина обводки
stroke=»rgb(0,0,0) ← цвет обводки
«/><polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
<!-- сразу добавим ещё одну фигуру -->
<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>Как видите, многоугольник позволяет располагать любые фигуры в любом месте страницы.
Продвинутый уровень
Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега <svg> тег <h2>:
<h2>Привет, это журнал Код!</h2>Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:
- Добавить стиль к svg-тегу.
- В этом стиле прописать абсолютное позиционирование и установить значение z-index = -1, чтобы слои с рисунками оказались ниже всех и не мешали остальным.
- Также в этот стиль нужно добавить свойство display: block — оно управляет тем, как располагается содержимое всего блока. Подробно про это свойство мы рассказывали в подборке полезных CSS-команд — почитайте, если интересно, как управлять внешним видом страницы.
Добавим это в стили и соберём полную страницу:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>SVG-графика</title>
<style type="text/css">
svg{
position:absolute;
z-index:-1;
display: block;}
</style>
</head>
<body>
<svg>
<!-- круги -->
<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>
<!-- линия -->
<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>
<!-- прямоугольник -->
<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>
<!-- многоугольники -->
<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>
</svg>
<h2>Привет, это журнал Код!</h2>
</body>
</html>Внешние SVG-файлы
Инструкции SVG можно упаковывать во внешние файлы и подключать как обычные изображения. Например, вы нарисовали красивую иконку в векторном редакторе, сделали экспорт в формат SVG и подключили к странице как обычное изображение. Браузер поймёт инструкции и нарисует ваше изображение красиво и плавно, какого бы размера оно ни было.
Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах.
Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег <img src=»…»> — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться.
Что дальше
Мы разобрали только самые основы SVG-графики. Дальше будем делать красивую SVG-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.
Текст:
Михаил Полянин
Редактура:
Максим Ильяхов
Художник:
Даня Берковский
Корректор:
Ирина Михеева
Вёрстка:
Мария Дронова
Соцсети:
Олег Вешкурцев
плюсы и минусы его использования
Сегодня мы поговорим про SVG, что это за формат, с чем его едят и стоит ли его использовать. Хоть формат не особо новый, но свою популярность заслужил благодаря внедрению его на сайты. Все последние версии браузеров уже получили поддержку данного формата.
Почему же он такой популярный? И что именно отличает его от других? Сегодня мы ответим на данные вопросы, а также расскажем, что вы должны знать, чтобы начать работать с данными типами файлов.
Что такое SVG?
SVG – Scalable Vector Graphics (Масштабируемая Векторная Графика) – основанный на векторе формат для веб-разработчиков. Данный тип формата стал столь популярен благодаря тому, что его изображения возможно отображать на больших разрешениях без потери качества, так как SVG – это векторный формат.
Толчок развития данной языковой разметке впервые был дан Консорциумом Всемирной паутины (World Wide Web Consortium), который был более известен в 1999 году как W3C. W3C дала понятие SVG – языковая разметка для создания двухмерных графических интерфейсов и изображений.
Использование на практике
Что же делает SVG таким популярным, и почему все больше дизайнеров начинают использовать его? Все очень просто, он работает так, как это необходимо.
SVG имеет небольшой вес по сравнению с другими форматами. У этого формата просто невероятные возможности. Флаги, символы, элементы интерфейса. И это только небольшой список того, как его можно использовать. Самый большой плюс его использования, это то что он является векторным форматом, то есть его возможно использовать на любых дисплеях – каким бы ни было их разрешение, он везде будет отображаться одинаково.
SVG файлами довольно просто управлять, так как его файлы сохраняются как статическое изображение. Вы можете добавить интерактивности вашему сайту, сделав при помощи SVG очень простую, но красивую анимацию.
Несколько примеров того, где его можно использовать:
- Логотипы
- Фоновое изображение
- Использование как кнопки
- Карты
- Диаграммы или рисунки
Как правило SVG чаще всего используют при создании адаптивных сайтов, анимаций и других динамических эффектов.
Плюсы использования SVG
Так почему же стоит отказаться от привычных нам JPG или GIF в пользу SVG? Есть достаточно много причин того, почему же все таки стоит его использовать в вашем проекте.
- SVG – векторный формат, именно поэтому его стоит его использовать для адаптивных сайтов, на которых размер изображений зависит от разрешения дисплея пользователя, и SVG безупречно соответствует всем требованиям.
- SVG изображения используют XML для определения его свойств, и, соответственно, у него есть способность к еще большему сжатию.
- SVG изображениями очень просто управлять, и это открывает еще больше возможностей для дизайнеров, которые могут менять цвет, добавлять тень, фильтры, размытие и еще много других эффектов.
- SVG довольно прост для понимания
- SVG работает с открытыми веб стандартами
- Вы можете использовать обычный текстовый редактор кода для создания SVG. Это дает вам некоторую свободу в действиях, все зависит лишь от ваших потребностей и от уровня экспертных знаний в данной области.
Минусы использования SVG
Вы вероятно потрясены тем, сколько же у SVG плюсов. И возможно подумали, что у него нет минусов. Но нет, парочка точно есть, и вот некоторые из них:
- Нет поддержки у старых браузеров, таких как Explorer 8 и ниже.
- SVG не может использоваться в фотографиях, так как это векторный формат, и применяется он для создания различных фигур и линий.
Что же дальше?
Будущее SVG только начинается. Как принятый формат изображений (и стандарт) для мобильных, SVG только продолжит набирать обороты.
Согласно W3C, SVG 2 в настоящее время разрабатывается, и он получит более упрощенные опции для взаимодействия с файлами SVG, а также начнет еще больше взаимодействовать с HTML, CSS и DOM.
Если задуматься о будущем SVG, то его возможности также можно использовать и в сфере печатных изданий.
Еще больше об SVG
В заключение
Вы уже используете SVG для своих проектов? Если нет, то почему бы не начать?
SVG становится все более популярным с каждым днем, ведь это общедоступный инструмент. Поэтому расскажите в комментариях, как вы относитесь к SVG? А также решились ли вы его использовать, если нет – то почему.
Превью: Depositphotos
Читайте также:
Чем отличается плоский дизайн от материал дизайна
400+ отличных полезных сервисов для каждого
8 книг, которые должен прочесть каждый дизайнер
НОУ ИНТУИТ | Масштабируемая векторная графика
Форма обучения:
дистанционная
Стоимость самостоятельного обучения:
бесплатно
Доступ:
свободный
Документ об окончании:
Уровень:
Специалист
Длительность:
25:09:00
Выпускников:
177
Качество курса:
4.29 | 4.14
Курс содержит все необходимые сведения для создания и распространения SVG — документов.
Рассматриваются основные фигуры, кривые Безье, работа с текстом, различные виды градиентов, шаблоны, группы элементов, символы и маски. Практически разбирается применение трансформаций, включая команды translate, rotate, scale, skewX, skewY и matrix. Вводятся все необходимые сведения для работы с матрицами преобразований. Подробно рассматриваются все 19 фильтров, включая их структуры и атрибуты. Анимация и интерактивность SVG-графики иллюстрируется примерами, позволяющим создавать собственные ролики. Описываются экспорт графики и создание SVG – документов в специализированных программах Altova XML Spy, Sketsa SVG Graphics Editor, а также в таких популярных пакетах, как Adobe Illustrator и Corel Draw.
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементыПредварительные курсы
Дополнительные курсы
2 часа 30 минут
—
Введение в SVG
Поддержка SVG браузерами. Flash против SVG. Развитие векторных форматов. Просмотр SVG–графики в Adobe SVG Viewer. Панель информации в Internet Explorer 6 (Windows XP SP2). Создание SVG документов. Работа с Altova XML Spy. Вставка SVG рисунков в HTML – страницы. Обзор ресурсов, посвященных SVG–графике.—
Основные фигуры SVG – графики
Прямоугольник (rect). Окружность (circle). Эллипс (ellipse). Линия. (line). Ломаная (polyline). Многоугольник (polygone). Вертикальный порядок последовательности объектов. Стили в SVG – графике. Группы элементов. Основные типы данных SVG – графики. Свойство ViewBox.—
Элемент Path
Объект Path. Линии и формы. Кривые Безье третьего порядка (Cubic Bezier Curve). Кривые Безье второго порядка (Quadratic Bezier Curves). Эллиптические кривые (Elliptical Curves). Экспорт графики и объект Path.—
Текст
Элементы text, tspan, tref, textPath. Атрибуты baseline-shift, direction, dominant-baseline, dx, dy, fill, font-family, font-size, font-size-adjust, font-stretch, font-style, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, kerning, letter-spacing, rotate, text-anchor, text-decoration, unicode-bidi, word-spacing, writing-mode. Форматирование текста. Расположение текста на произвольной кривой в Corel Draw и SVG.—
Рисование
Заливка. Атрибуты fill, fill-opacity и fill-rule. Линейная и радиальная градиентные заливки. Прозрачность. Контуры. Атрибуты stroke,stroke-width, stroke-opacity, stroke-dasharray, dashoffset, stroke-linecap, sroke-linejoin, stroke-mitrelimit. Паттерны и маркеры. Элементы symbol, clipPath, mask.—
Трансформации
Трансформации. Команды translate (перенос), rotate (вращение), scale (масштабирование), skewX (искажение по горизонтали), skewY (искажение по вертикали), matrix (матрица). Отражение объектов. Вычисление матриц в Mathcad.—
Фильтры. Часть I
Введение в фильтры. Общие атрибуты. Фильтры feGaussianBlur, feBlend, feImage, feMerge, feComposite. Работа с фильтрами в Adobe Illustrator. Экспорт графики в формат SVG.—
Фильтры. Часть III
Фильтры feColorMatrix, feComponentTransfer, feTurbulence. Яркость и цветовой баланс изображений.—
Фильтры. Часть IV
Источники света в SVG – документах. Фильтры feDiffuseLighting, feDistantLight, feSpecularLighting, fePointLight, feSpotLight и feConvolveMatrix.—
Анимация
Анимация в SVG – графике. Элементы animate, animateColor, animateMotion, animateTransform, set. Атрибуты attributeType=»CSS», attributeType=»XML». Анимация градиента, нескольких преобразований, фильтров, по ссылке. Концепция SVG и Adobe Flash CS3.—
Интерактивность
Интерактивность SVG – графики. Гиперссылки. События мыши и клавиатуры. Использование скриптов.—
Практическое руководство о SVG в вебе
Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG. Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.
Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds. Затем жмём save as и выбираем SVG, и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.
Приёмы для уменьшения размеров файла.
(Смотрите ресурсы по оптимизации)
Существует множество статей по оптимизации SVG, предлагающих кладезь знаний в этой теме, но я хочу поделиться парой приёмов, которые считаю наиболее эффективными и полезными. Они не требуют много усилий и могут легко вписаться в рабочий процесс.
Чтобы добиться наименьшего размера SVG, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS, так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.
Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool, который поможет удалить точки и при этом оставить общую форму той же.
Предварительная оптимизация
Smart Remove Brush Tool удалил точки
Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).
Точки вне сетки
Выравнивание по сетке
Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.
И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.
AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "image/svg+xml" \
"text/css" \
"text/html" \
"text/javascript"
... etc
</IfModule>
</IfModule>В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO.
Оригинал: 1,413b
После оптимизации: 409b
В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)
Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент <use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.
После оптимизации с использованием <use>: 311b
Размер файла стал меньше на ~78%
Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.
зачем он нужен, как его подключать к HTML и что с ним можно делать.
Помимо привычных растровых форматов (JPG, PNG, GIF), в веб-разработке широко применяют векторный — SVG.
SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.
То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.
Прелесть SVG раскрывает масштабирование. Если увеличить растровое изображение сверх 100%-ного размера — проявляется пикселизация: отдельные точки превращаются в одноцветные блоки пикселей, границы областей становятся ступенчатыми, и в целом картинка выглядит негладко, некрасиво.
Если же увеличить векторное изображение — все его детали останутся чёткими, то есть их видимое разрешение не уменьшится. Поэтому svg-картинки отображаются на самых больших разрешениях без потери качества — и просто идеальны для адаптивных сайтов.
У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.
И наконец, при прочих равных SVG весит намного меньше растровых изображений.
Их мало. Во-первых, SVG не поддерживается очень старыми браузерами, а во-вторых, не используется для фотографий.
Максим Васянович
Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик
— SVG: масштабируемая векторная графика
Элемент svg — это контейнер, который определяет новую систему координат и область просмотра. Он используется как внешний элемент документов SVG, но его также можно использовать для встраивания фрагмента SVG в документ SVG или HTML.
Примечание: Атрибут xmlns требуется только для внешнего элемента svg из документов SVG . Это не нужно для внутренних элементов svg или внутри HTML-документов.
-
базовый Профиль - Минимальный языковой профиль SVG, необходимый для документа.
Тип значения : -
contentScriptType - Язык сценариев по умолчанию, используемый фрагментом SVG.
Тип значения :приложение / ecmascript; Анимационный : нет -
contentStyleType - Язык таблиц стилей по умолчанию, используемый фрагментом SVG.
Тип значения :текст / css; Анимационный : нет -
высота - Отображаемая высота прямоугольного окна просмотра.(Не высота его системы координат.)
Тип значения : <длина> | <процент> ; Значение по умолчанию :авто; Анимированные : да -
сохранить соотношение сторон - Как нужно деформировать фрагмент
svg, если он отображается с другим соотношением сторон.
Тип значения : (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMax4Max3 | 9Max3 x0003 | 9Max3 x0003 | 9Max3 x0003 | 9Max3 встретить|срез)? ; Значение по умолчанию :xMidYMid соответствует; Анимированные : да -
версия - Какая версия SVG используется для внутреннего содержимого элемента.
Тип значения : <число> ; Значение по умолчанию : нет; Анимационный : нет -
просмотр Коробка - Координаты окна просмотра SVG для текущего фрагмента SVG.
Тип значения : <список-номеров> ; Значение по умолчанию : нет; Анимированные : да -
ширина - Отображаемая ширина прямоугольного окна просмотра.(Не ширина его системы координат.)
Тип значения : <длина> | <процент> ; Значение по умолчанию :авто; Анимированные : да -
х - Отображаемая координата x контейнера svg. Не влияет на внешние элементы
svg.
Тип значения : <длина> | <процент> ; Значение по умолчанию :0; Анимированные : да -
y - Отображаемая координата y контейнера svg.Не влияет на внешние элементы
svg.
Тип значения : <длина> | <процент> ; Значение по умолчанию :0; Анимированные : да
Примечание: Начиная с SVG2, x , y , шириной и высотой являются Geometry Properties , что означает, что эти атрибуты также могут использоваться как свойства CSS.
Глобальные атрибуты
- Основные атрибуты
- В частности:
id,tabindex - Атрибуты стиля
-
класс,стиль - Атрибуты условной обработки
- В частности: требуется
Расширения, системаЯзык - Атрибуты событий
- Глобальные атрибуты событий, графические атрибуты событий, атрибуты событий документа, атрибуты событий элементов документа
- Атрибуты представления
- Наиболее примечательны:
clip-path,clip-rule,color,цветовая интерполяция,цветопередача,курсор,дисплей,заливка,непрозрачность заливки,fill-rule,filter,mask,opacity,pointer-events,shape-rendering,stroke,stroke-dasharray,stroke-dashoffset,stroke- linecap,штрих-линия, соединение,штрих-митрлимит,штрих-непрозрачность,ширина штриха,преобразование,векторный эффект,видимость - Атрибуты Aria
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex-colindex —aria-controls,aria-current,aria-describeby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-extended,aria-extended,-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyhortcuts,aria-label,aria-label0003 9000ria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-Ориентация,aria-own,aria-placeholder,aria-posinset, aria-selectedария прессованная 90 004,, aria-selectedaria-readonly,aria-related,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
| Категории | Элемент контейнера, структурный элемент |
|---|---|
| Разрешенное содержимое | Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы Элементы формы Структурные элементы Градиентные элементы < a> , , , , , , , , , , , , , |