Создание впечатляющего мобильного контента означает баланс между объемом загружаемых данных и максимальным визуальным воздействием. Векторная графика — отличный способ добиться потрясающих визуальных результатов при минимальной пропускной способности.
Многие люди думают, что холст — единственный способ рисовать в Интернете смесь векторов и растров, но есть альтернативы, которые имеют некоторые преимущества. Отличный способ добиться векторного рисования — использовать масштабируемую векторную графику (SVG), которая является ключевой частью HTML5 .
Мы все знаем, что адаптивный дизайн играет важную роль в работе с экранами разных размеров, а SVG идеально подходит для удобной работы с экранами разных размеров.
SVG — отличный способ представления векторных линейных рисунков и отличное дополнение к растровым изображениям, причем последние лучше подходят для изображений с непрерывными тонами.
Одна из самых полезных особенностей SVG заключается в том, что он не зависит от разрешения. Это означает, что вам не нужно думать о том, сколько пикселей у вас на устройстве, результат всегда будет масштабироваться и оптимизироваться браузером, чтобы выглядеть великолепно.
Популярные инструменты разработки, такие как приложение для рисования на 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;
}
Это даст вам такой результат:
Хотя это решение и простое, оно, скорее всего, станет проблемой для производительности на мобильном устройстве. Для большинства существующих мобильных браузеров использование свойства opacity может быть намного медленнее по сравнению с непрозрачными объектами.
Лучшее решение
Изменение цвета исходного содержимого 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 от Университета Слиппери-Рок — включают ссылку на отличный учебник по SVG .