Создание мобильного контента, который ослепляет, означает балансирование объема загружаемых данных с максимальным визуальным воздействием. Векторная графика — отличный способ предоставить потрясающие визуальные результаты, используя минимальную полосу пропускания.
Многие думают, что холст — единственный способ рисовать смесь векторов и растров в Интернете, но есть альтернативы, которые имеют некоторые преимущества. Отличный способ добиться векторного рисования — использовать масштабируемую векторную графику (SVG), которая является ключевой частью HTML5 .
Мы все знаем, что адаптивный дизайн играет важную роль в работе с экранами разных размеров, а SVG идеально подходит для удобной работы с экранами разных размеров.
SVG — отличный способ представления векторных линейных рисунков и прекрасное дополнение к растровым изображениям, которые лучше подходят для изображений с непрерывным тоном.
Одной из самых полезных особенностей SVG является то, что он не зависит от разрешения, а это значит, что вам не нужно думать о том, сколько пикселей у вас на устройстве, — результат всегда будет масштабироваться и оптимизироваться браузером, чтобы выглядеть великолепно.
Популярные инструменты для создания, такие как приложение Drawing в Google Drive, Inkscape, Illustrator, Corel Draw и многие другие, генерируют SVG, поэтому существует множество способов создания контента. Мы рассмотрим несколько способов использования ресурсов SVG, а также несколько советов по оптимизации, которые помогут вам начать работу.
Основы масштабирования
Давайте начнем с простого сценария — вы хотите, чтобы полноэкранная графика была фоном вашей веб-страницы. Было бы очень полезно иметь логотип вашей компании или что-то подобное на весь экран на заднем плане все время, но, конечно, это очень сложно сделать красиво со всеми этими различными размерами экранов. Поэтому для иллюстрации мы начнем со скромного логотипа HTML5.
Логотип HTML5 показан ниже — и, как вы уже догадались, он создан в виде файла SVG.
Нажмите на логотип и посмотрите на него в любом современном браузере, и вы увидите, что он прекрасно масштабируется в окне любого размера. Попробуйте открыть его в своем любимом браузере, измените размер окна и обратите внимание, что изображение четкое при любом увеличении. Если бы мы попытались сделать это с растровым изображением, нам пришлось бы либо обслуживать много разных размеров для каждого экрана, с которым мы могли бы столкнуться, либо были бы вынуждены мириться с ужасно пикселизированными масштабированными изображениями.
Так в чем же дело? Ну, если вы не заметили, это единственный формат, который масштабируется независимо от устройства, на котором мы его просматриваем. Так что нам нужно предоставить нашим пользователям только один ресурс, без необходимости знать, какой у них размер экрана или окна — здорово!
Но подождите, это еще не все - логотип HTML5 весит всего 1427 байт! Ой, это так мало, что при загрузке он вряд ли повлияет на ваш мобильный тарифный план, что делает его быстро загружаемым, а это делает его дешевым и быстрым для ваших пользователей!
Еще одна приятная вещь в файлах SVG заключается в том, что их можно сжимать с помощью GZIP, чтобы еще больше уменьшить. Когда вы сжимаете SVG таким образом, расширение файла должно быть изменено на «.svgz». В случае логотипа HTML5 он сжимается всего до 663 байт при сжатии — и большинство современных браузеров справляются с этим легко!
С нашим примером файла на некоторых из последних устройств мы видим что-то вроде 60-кратного преимущества при использовании сжатых векторных данных! Также обратите внимание, что эти сравнения проводятся между JPEG и SVG, а не PNG. Однако JPEG — это формат с потерями, что приводит к более низкому качеству, чем SVG или PNG. Если бы мы использовали PNG, преимущество было бы более 80-кратным, что поразительно!
Но, конечно, PNG и JPEG не созданы равными. Ряд советов по оптимизации советуют использовать JPEG вместо PNG, но это не всегда такая уж хорошая идея. Взгляните на изображения ниже. Изображение слева — это PNG-изображение верхней правой части логотипа HTML5, увеличенное в 6 раз. Изображение справа — то же самое, но закодированное с помощью JPEG.
Легко заметить, что экономия размера файла в JPEG обходится дорого, с цветовыми артефактами на острых краях — вероятно, заставляя вашу сетчатку думать, что ей нужны очки:-) Справедливости ради, JPEG оптимизирован для фотографий, и именно поэтому он не так хорош для векторной графики. В любом случае, версия SVG такая же, как и PNG по качеству, поэтому выигрывает по всем параметрам — и по размеру файла, и по четкости.
Создание векторных фонов
Давайте посмотрим, как можно использовать векторный файл в качестве фона страницы. Один из простых способов — объявить файл фона с помощью фиксированного позиционирования CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Вы заметите, что независимо от размера дисплея изображение имеет четкие и чистые края.
Затем, конечно, мы хотели бы разместить какой-нибудь контент на фоне.
Но как вы видите, результат не идеален, так как мы не можем прочитать текст. Так что же нам делать?
Настраиваем фон, чтобы он выглядел лучше
Очевидно, что нам нужно сделать все цвета в фоновом изображении светлее. Этого легко добиться с помощью свойства непрозрачности CSS или с помощью непрозрачности в самом файле SVG. Вы можете сделать это, просто добавив этот код в свой CSS-контент:
#bg {
opacity: 0.2;
}
Это даст вам такой результат:
Это решение, хотя и простое, скорее всего, станет проблемой производительности на мобильном устройстве. Для большинства существующих мобильных браузеров использование свойства непрозрачности может быть намного медленнее при рисовании по сравнению с непрозрачными объектами.
Лучшее решение
Изменение цвета в исходном содержимом SVG намного лучше, чем установка непрозрачности с помощью CSS. Вот наш логотип HTML5, измененный так, чтобы он выглядел выцветшим, путем изменения используемых цветов и в процессе полного избегания свойства непрозрачности. Таким образом, фоновое изображение ниже выглядит идентично результату изменения непрозрачности, но на самом деле будет рисоваться намного быстрее и экономить нам процессорное время и драгоценное время батареи в этом процессе.
Итак, теперь, когда у нас есть достаточное представление о некоторых основах, давайте перейдем к другим функциям.
Эффективное использование градиентов
Допустим, мы хотим создать кнопку. Мы могли бы начать с создания прямоугольника с красивыми закругленными углами. Затем мы могли бы добавить красивый линейный градиент, чтобы придать кнопке красивую текстуру. Код для этого мог бы выглядеть примерно так:
<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">Press me</text>
</g>
</svg>
В результате кнопка будет выглядеть примерно так:
Обратите внимание, как добавленный нами градиент идет слева направо. Это направление градиента по умолчанию в SVG. Но мы можем сделать лучше по нескольким причинам: эстетика и производительность. Давайте попробуем изменить направление градиента, чтобы он выглядел немного лучше. Установка атрибутов 'x1', 'y1', 'x2' и 'y2' для линейного градиента управляет направлением цвета заливки.
Установка только атрибута 'y2' позволяет нам изменить градиент на диагональный. Итак, это небольшое изменение кода:
<linearGradient id="blueshiny" y2="1">
дает нам другой вид для нашей кнопки, в конечном итоге она выглядит так, как показано на изображении ниже.
Мы также можем легко изменить градиент так, чтобы он шел сверху вниз, с помощью этого небольшого изменения кода:
<linearGradient id="blueshiny" x2="0" y2="1">
и в итоге это выглядит как на картинке ниже.
Так что же происходит со всеми этими обсуждениями различных углов градиента, спросите вы?
Ну, оказывается, что последний пример — с градиентом, идущим сверху вниз, — самый быстрый для рисования на большинстве устройств. Это очень малоизвестный секрет среди графических гиков, которые пишут код браузера, что вертикальные (сверху вниз) градиенты рисуются почти так же быстро, как сплошной цвет. (Причина в том, что рисование объекта выполняется горизонтальными линиями вниз по странице — и внутренности кода рисования понимают, что цвет не меняется на каждой линии, и поэтому они оптимизируют его).
Поэтому, когда вы решите использовать градиенты в дизайне страницы, вертикальные градиенты будут быстрее и будут использовать меньше батареи в качестве побочного эффекта. Это ускорение также относится к градиентам CSS, так что это касается не только SVG.
Если мы почувствуем себя по-настоящему авантюрными, обладая новыми знаниями о градиентах, то, возможно, мы сможем добавить классный градиент позади нашего логотипа 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)"/></pre>
Приведенный выше код добавляет плавный вертикальный линейный градиент к фону нашего логотипа HTML5, чтобы придать ему едва заметный многоцветный оттенок, который быстро меняется — так же быстро, как и сплошной цветной фон.
Если вы загрузите контент в браузере настольного компьютера и измените размер до экстремальных соотношений сторон, вы увидите белые полосы сверху/снизу или слева/справа. В любом случае, после изменений кода, сделанных выше, результирующий фон будет выглядеть так:
Анимируйте с легкостью
К настоящему моменту вы, возможно, задаетесь вопросом, в чем смысл использования градиента SVG в качестве фона для вашей страницы. Действительно, это может иметь смысл с помощью градиентов CSS, но одно из преимуществ SVG заключается в том, что сам градиент находится в DOM. Это означает, что вы можете изменять его с помощью скрипта, но, что более важно, вы можете воспользоваться встроенной в SVG возможностью анимации, чтобы вносить едва заметные изменения в ваш контент.
В качестве примера мы изменим наш красочный логотип 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>
Взгляните на изображение ниже, чтобы увидеть результат этих изменений.
Код изменяет цвета нашего линейного градиента через все различные цветовые остановки, которые мы определили в непрерывном цикле, который занимает 20 секунд. Эффект этого заключается в том, что градиент выглядит так, как будто он движется вверх по странице в непрерывном движении, которое никогда не останавливается.
Прелесть этого в том, что не требуется никакого скрипта! Вот почему он запускается как ссылка на изображение с этой страницы, но также это снижает нагрузку на мобильный процессор, устраняя необходимость в скрипте.
Кроме того, сам браузер может воспользоваться своими знаниями о картине, чтобы гарантировать минимальную загрузку процессора при создании причудливой анимации.
Есть одно предостережение: некоторые браузеры вообще не поддерживают этот стиль анимации, но в этом случае вы все равно получите красивый цветной фон, но он просто не изменится — это можно обойти с помощью скрипта (и requestAnimationFrame ), но это немного выходит за рамки этой статьи.
Еще один момент, на который следует обратить внимание: размер этого несжатого SVG-файла составляет всего 2922 байта — невероятно мало для обеспечения такого насыщенного графического эффекта, который удовлетворит ваших пользователей и их тарифные планы.
Куда отсюда?
Есть много случаев, когда SVG не идеален, фотографии и видео лучше представлены в других форматах. Текст — еще один пример, где собственный HTML и CSS работают гораздо лучше в целом. Однако как инструмент в арсенале для линейной графики он может быть идеальным выбором.
Мы затронули несколько основных фундаментальных применений графики SVG, показав, как легко генерировать небольшой контент, который обеспечивает полноэкранную яркую графику с минимальным объемом загрузки. Небольшие улучшения контента могут легко создавать потрясающие графические результаты с небольшим количеством разметки. В следующей статье мы рассмотрим некоторые подробности о том, как анимация, встроенная в SVG, может использоваться для более простых и мощных эффектов, и сравним использование холста с SVG, чтобы выбрать правильный инструмент для создания вашего мобильного графического сайта.
Другие полезные ресурсы
- Inkscape — приложение для рисования с открытым исходным кодом, использующее в качестве формата файла SVG.
- Open Clip Art — огромная библиотека клипартов с открытым исходным кодом, содержащая тысячи изображений SVG.
- Страница W3C SVG , содержащая ссылки на спецификации, ресурсы и т. д.
- Raphaël — библиотека Javascript, предоставляющая удобный API для отрисовки и анимации SVG-контента с отличными возможностями для старых браузеров.
- Ресурсы SVG от Slippery Rock University — включает ссылку на отличный учебник по SVG Primer .