SVG новые возможности графики

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

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

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

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

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

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

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

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

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


HTML5 логотип svg

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

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

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

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

Логотип HTML5, размер и сравнение
Устройство Разрешение PNG
изображений
JPEG
изображение
Изображение
векторное отношение
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, преимущество было бы больше.

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

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

Экономия размера файла в формате JPEG связано с определенными затратами, артефакты на прямых краях, может одеть нужные очки :-) Чтобы быть справедливым, 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=
http://www.pixelcom.crimea.ua/"HTML5-logo.svgz" />


Демо

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

Возможно нам понадобится какое то содержания на переднем фоне, как в примере ниже:

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

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

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

С помощью CSS сделайте фон немного прозрачным. Это легко делается свойствами CSS:




img #bg {
opacity: 0.2;
}



Это даст вот такой результат :

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

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

Решение

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


Содержания над фоном 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. Но мы можем сделать по другому. Давайте попробуем изменить направление градиента, чтобы он выглядел немного лучше. Установим ‘x1′, ‘y1′, ‘x2′, и ‘y2′ атрибуты линейного градиента, это укажет направление цвета заливки.

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



<linearGradient id="blueshiny" y2="1">


Другой вид кнопки.

Кнопка SVG

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



<linearGradient id="blueshiny" x2="0" y2="1">


Теперь кнопка выглядит вот так:

Кнопка SVG

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

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

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

Отметим, что радиальные градиенты следует избегать, они мучительно медленные.

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



<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 в качестве фона для страницы. Возможно, имеет смысл сделать это с помощью CSS градиента, но одним из преимуществ SVG является то, что SVG градиент DOM. Это означает, что вы можете изменить его с помощью скрипта, и важно то что можно добавить анимации.

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



<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 не идеал, фотографий и фильмы, которые лучше в других форматах. Для текста родной HTML и CSS работать гораздо лучше в целом. Однако, как инструмент в арсенале SVG может быть идеальным выбором.

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

Полезно знать

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://www.pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>