Полезное

Полное руководство по SVG. Часть 1

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

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

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

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

8 причин использовать SVG

01. Четкость

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

SVG также имеет ряд других функций — с фильтрами, шаблонами, градиентами, маскировкой и свойством «viewBox» для создания сцен – и все они подлежат анимации. SVG чрезвычайно универсален и поддерживается всеми браузерами, начиная с IE9.

02. Доступный для навигации DOM

Внутри браузера SVG имеет свой DOM. Графика рассматривается браузером как отдельный документ, а затем помещается в обычную DOM-модель страницы. Это важно для свойства 'viewBox', так как мы можем нарисовать наше изображение на холсте любого размера, но затем отобразить его в браузере на другом, и все это все без обновления свойств внутри SVG. Этот отдельный, доступный для навигации DOM также является тем, как мы взаимодействуем с элементами внутри SVG с помощью CSS и Javascript.

03. Доступность

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

Содержимое этих тегов не будет отображаться браузером, но они будут обнаружены API доступности браузеров. Вы можете (и должны) также использовать правильные свойства ARIA, где это применимо, например, если вы скрываете элемент SVG.

04. Это независимое и адаптивное решение

Классический логотип Coca-Cola, выполненный с различными адаптивными размерами

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

Используя SVG, мы можем прекратить создание изображений @2x.png (если вам не нужна поддержка IE8) и создать один файл для всех наших иконок (подробнее об этом позже). SVG-изображения можно масштабировать так же, как и все остальные элементы адаптивного дизайна.

05. Возможность анимации

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

Анимацию можно создать с помощью CSS, API веб-анимации в Javascript или с помощью тега SVG '<animate>'. SVG анимация находится на интересной стадии развития. Google не рекомендовал  SMIL (тег анимации SVG) в Chrome 45, отказываясь от него в пользу анимации CSS и API веб-анимации, но с тех пор приостановил возражения.

06. Стилизация

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

07. Интерактивность

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

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

08. Размер файла может быть небольшим

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

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

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

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

Как использовать SVG

Есть несколько способов использовать SVG в интернете; поддержка браузеров достаточно хорошая, за исключением поддержки в IE8 и ниже, а также в действительно ранних версиях браузера Android. Графика очень безопасна, поэтому мы должны использовать ее! Используя SVG, вы отправляете инструкции о том, как нарисовать что-то в браузере, а не саму нарисованную вещь.

Есть много сайтов, где вы можете найти исходники SVG изображений

Тег изображения

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

<img src=«myAwesomeSVG.svg» alt=«My Awesome SVG»>

Включение изображения в страницу подобным образом, подразумевает исходный размер файла SVG, если вы не указываете атрибут width и height в HTML или через CSS. Использование тега изображения полезно для логотипов и другого контента, когда вам нужно, чтобы программы чтения с экрана имели доступ к атрибуту alt. Вы можете предоставить резервные копии, если SVG не поддерживается с помощью Modernizr для замены в PNG.

Фоновое изображение CSS

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

 

.hero {

  background-image: url('myAwesomeSVG.svg');

}

 

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

 

background-repeat: no-repeat;

background-position: center center;

background-size: contain;

 

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

 

.hero {

  background-image: url('myAwesomeSVGfallback.png');

  background-image: url('myAwesomeSVG.svg');

}

 

Встроенный SVG

SVG можно записать прямо в документ, используя тег SVG:

 

<svg

  width=«100px» height=«100px»

  viewBox=«0 0 100 100» version=«1.1»

  xmlns="...">

  <title>My Awesome SVG</title

  <circle class=«circle»

  cx=«50» cy=«50» r=«50»

  fill="#FFFF00">

  </circle>

</svg>

 

Поскольку SVG является масштабируемым (это есть в названии), если мы предоставим тег без атрибутов width и height, SVG вырастет до размера контейнера. Написав наш SVG на странице, мы могли бы удалить заполнение из встроенного SVG и стилизовать его в CSS:

 

.circle {

  fill: #FFFF00;

}

 

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

В качестве объекта

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

Написание SVG для Интернета

Это демо Винсента Харди: синхронизированная аудио- и графическая анимация, объединяющая SVG, JavaScript и имитированную «камеру»

Поскольку SVG является языком XML, он очень похож на HTML, где теги вложены, и они написаны с использованием этих узнаваемых угловых скобок.

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

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

Основные теги форм

SVG имеет теги для всех основных фигур; прямоугольники и квадраты (<rect>), круги (<circle>), эллипс (<ellipse>), линия (<line>), полилиния (<polyline>), многоугольник (<polygon>) и путь (<path>).

Эти теги используются для создания большинства элементов внутри SVG.

Текстовый тег

Текстовый тег (<text>) используется для создания текста внутри SVG, который будет доступен для выбора, как и любой текст в HTML.

Теги доступности

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

Групповой тег

Групповой тег (<g>) очень полезен в SVG. Этот тег используется для группировки элементов вместе, позволяя добавлять имена классов и применять анимацию, фильтры, шаблоны и эффекты для группы элементов.

Тег повторного использования

Данный тег (<defs>) используется для определения элементов для последующего повторного использования. Здесь вы можете создавать шаблоны, фильтры и маски для повторного использования позже. Он также используется для создания иконок.

Как установить SVG для Интернета

Это демо от Винсента Харди сочетает в себе SVG, веб-шрифты и аудио тег, чтобы создать визуально приятную анимацию песен

01. Экспортируйте SVG

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

02. Избавьтесь от лишнего

После экспорта файла откройте его в IDE или текстовом редакторе. Здесь можно удалить ненужные теги и комментарии, а также обновить теги доступности.

03. SVGO

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

04. SVGOMG

Единственная проблема SVGO заключается в том, что вы не видите, если изменения, вносимые во время оптимизации, визуально изменяют изображение. SVGOMG работает в браузере и визуально показывает изменения, которые вы делаете.

05. Оптимизация

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

06. Экспортируйте файл еще раз

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

Продолжение следует...

 

  • 471