Графика SVG

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

Многие разработчики думают, что canvas единственный способ сделать смесь вектора и растра в интернете — это не так, есть альтернативы которые имеют некоторые преимущества. Отличный способ применить векторную графику, использовать Scalable Vector Graphics, который является ключевой частью HTML5.

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

SVG не зависит от разрешения, это означает что вам не нужно думать о том:

— как много пикселей для этого устройства.

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

Популярные средства разработки для рисования векторной графики Google Drive, Inkscape, Illustrator, Corel Draw. В этой статье мы будем углубляться в некоторые способы использования активов SVG, а также некоторые советы по оптимизации.

Масштабирование

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

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

HTML5 логотип svg
Логотип HTML5 SVG

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

Это еще не всё, логотип HTML5 SVG весит 1427 байт — это так мало, что делает его быстрым для загрузки на мобильных устройствах!

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

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

Логотип HTML5, размер и сравнение
Устройство Разрешение PNG JPEG SVG
iPhone 3G 320×480 9.5k 6.3k 4.4 (9.5)
Nexus One 480×800 15.4k 9.8k 6.8 (14.7)
DROID RAZR 540×960 17.3k 12k 8.4 (18.1)
iPhone 4 640×960 20.7k 13.2k 9.25 (19.9)
iPhone 5 640×1136 21.6k 14k 9.8 (21.1)
Galaxy Nexus 720×1280 24.4k 15.8k 11 (23.8)
Ipad 1 и 2 1024×768 24.8k 15.7k 11 (23.7)
Galaxy Tab 10.1, Nexus 7 1280×800 27.1k 17.9k 12.5 (27)
Kindle Fire HD 1920×1200 44.1 29.9k 20.9 (45)
Ipad new 2048×1536 57.7k 39.6k 27.7 (59.7)

В таблице видно, на сколько SVG меньше.

Сравнение между JPEG и SVG, а не PNG. Тем не менее, JPEG это формат с потерями качества, чем любой SVG или PNG. Если бы мы сравнили PNG, преимущество SVG над PNG было бы еще больше.

Форматы PNG и JPEG не одинаковые. Советовать вам использовать PNG вместо JPEG не правильно, иногда JPEG лучше, например для фотографий. Взгляните на изображение ниже. Изображение слева PNG, верхняя правая часть логотип HTML5 увеличенная в 6 раз. Изображение справа с разрешением JPEG.

PNG изображение
PNG изображение
JPEG изображение
JPEG изображение

Экономия размера файла в формате JPEG связана с определенными затратами, артефакты на прямых краях, может одеть 3D очки -) Чтобы быть справедливым, JPEG оптимизирован для фотографий, и вот почему это не так хорошо для векторной графики. В любом случае SVG по всем параметрам выигрывает у PNG.

к меню ↑

Фон для веб-страницы

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

<style>
img #bg {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index: -1;
}
</style>
<img id="bg" alt="HTML5 logo" src="HTML5-logo.svgz" />

Демо

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

Если понадобится какое то содержания на переднем плане как в примере ниже:

Содержания над фоном svg
Содержания над фоном svg

Демо

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

к меню ↑

Регулировка фона

Нужно сделайте фон SVG немного прозрачным. Это легко делается свойством CSS opacity:

img #bg {
opacity: 0.2;
}

Результат:

Сделать фон SVG немного непрозрачным свойствами CSS
Немного непрозрачный фон SVG свойством CSS

Для большинства существующих мобильных браузеров, использование свойства opacity в CSS может замедлить работу браузера по сравнению с непрозрачными объектами.

к меню ↑

Решение скорости

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

Немного непрозрачный фон SVG изменяя цвет
Непрозрачный фон SVG изменяя его цвет
к меню ↑

Градиенты SVG

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

Код для этого может выглядеть примерно так:

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Кнопка</text>
</g>
</svg>

Кнопка выглядит так:

Кнопка SVG с линейным градиентом
Кнопка SVG с линейным градиентом

Обратите внимание, направление градиент слева направо. Это направление по умолчанию в SVG. Но мы можем сделать по другому. Давайте попробуем изменить направление градиента, чтобы он выглядел немного лучше. Установим x1, y1, x2, и y2 координаты линейного градиента, это укажет направление заливки цветом.

Указав значение только y2 позволяет нам изменить градиент по диагонали.

<linearGradient id="blueshiny" y2="1">
Кнопка SVG с градиентом по диагонали
Градиент заливки цветом по диагонали

С небольшим изменением в коде, можно изменить направление градиента сверху вниз:

<linearGradient id="blueshiny" x2="0" y2="1">
Кнопка SVG с градиентом сверху вниз
Градиент заливки цветом сверху вниз

Совет: для лучшей производительности лучше использовать градиент сверху вниз!

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

Итак, когда вы решите использовать градиенты на странице проекта, вертикальные градиенты будут быстрее. Это относится и к градиенту в CSS!

Если интересно можно добавить градиент позади нашего логотипа HTML5 SVG:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/>

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

Переходы линейного градиента для фона SVG
Переходы линейного градиента для фона SVG
к меню ↑

Анимации SVG

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

Для примера, мы будем модифицировать логотип HTML5 SVG изменив определение линейного градиента:

<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color" values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color" values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color" values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color" values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color" values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color" values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC" begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Постоянное изменение линейных градиентов для фона SVG
Постоянное изменение линейных градиентов

Код меняет цвет линейных градиентов в непрерывном цикле. Красота в том, что нет никаких сценариев.

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

Еще одна вещь, обратите внимание на то, что несжатый файл SVG для этого примера весит всего 2922 байт — это мало для анимации.

к меню ↑

Заключение

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

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

  • HTML5 SVG — рисуем простые фигуры
  • Inkscape — открытый редактор векторной графики.
  • Open Clip Art — библиотека клипартов, содержащая тысячи SVG изображений.
  • Рафаэль — библиотеки Javascript, удобный API для рисования и анимации SVG для старых браузеров.
  • SVG ресурсы — содержат ссылку на большие SVG.