Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
Нам предстоит рассмотреть следующие вопросы:
• SVG, краткая история и анатомия простого SVG-документа;
• создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений;
• вставка объектов SVG-графики в страницу с помощью тегов img и object;
• вставка объектов SVG-графики в качестве фоновых изображений;
• вставка объектов SVG-графики непосредственно в код HTML в качестве линейных объектов;
• повторное использование SVG-символов;
• ссылка на внешние SVG-символы;
• возможности, предоставляемые каждым из методов вставки;
• анимация объектов SVG-графики с помощью SMIL;
• придание стилевого оформления объектам SVG-графики с помощью внешней таблицы стилей;
• придание стилевого оформления объектам SVG-графики с помощью внутренних стилей;
• изменение и анимация объектов SVG-графики с помощью CSS;
• медиазапросы и SVG-графика;
• оптимизация объектов SVG-графики;
• использование объектов SVG-графики с целью определения фильтров для CSS;
• манипуляция объектами SVG-графики с помощью кода JavaScript и JavaScript-библиотек;
• советы по внедрению SVG-технологии;
• ресурсы для дальнейшего изучения.
SVG-технология — предмет непростой. Какие разделы данной главы в большей степени отвечают вашим потребностям, будет зависеть от того, что конкретно вам нужно получить от SVG. Надеюсь, я сразу же смогу предложить ряд кратчайших способов ее использования.
Если вам просто нужно заменить статичные графические ресурсы на сайте их SVG-версиями с целью повышения резкости изображений и/или использования файлов меньших размеров, тогда обратитесь к менее объемным разделам по использованию SVG в качестве фоновых изображений и внутри img-тегов.
Если вы интересуетесь тем, какие приложения и сервисы могут помочь создать SVG-ресурсы и управлять ими, сразу переходите к разделу «Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений», где будет дан ряд полезных ссылок и указателей.
А если желаете разобраться с SVG поглубже или управлять этой графикой, в том числе с применением анимации, то вам лучше усесться поудобнее и запастись двойной порцией любимого напитка, поскольку разговор будет долгим.
Приступая к освоению этой технологии, для начала заглянем в 2001 год.
Краткая история SVG
Первый выпуск SVG состоялся в 2001 году. И это не опечатка. SVG как технология существует с 2001 года. С тех пор она постепенно набирала обороты, но широкий интерес к ней и практическое применение связаны с появлением устройств с экранами высокого разрешения. Введение в SVG-технологию изложено в ее спецификации версии 1.1 (http://www.w3.org/TR/SVG11/intro.html) следующим образом:
«SVG — это язык описания двухмерной графики в XML [XML10]. SVG позволяет создавать три типа графических объектов: фигуры векторной графики (например, пути, состоящие из прямых и кривых линий), изображения и текст».
Судя по названию технологии (масштабируемая векторная графика), SVG позволяет дать в коде описание двухмерных изображений в виде векторных опорных точек. Это открывает для нее широкие перспективы по созданию значков, прорисовке линий и схем.
Поскольку векторы задаются с помощью относительных описаний, их можно масштабировать без потери качества до любых размеров. Более того, так как данные SVG-графики представлены в виде описаний векторных опорных точек, их объем получается мизерным по сравнению с данными файлов JPEG, GIF или PNG, содержащими изображения сопоставимых размеров.
Кроме того, в настоящее время SVG-графика пользуется широкой поддержкой браузеров. Ее в числе прочих поддерживают Android 2.3 и следующие версии, а также версии Internet Explorer, начиная с 9-й (http://caniuse.com/#search=svg).
Графика, представляющая собой документ
Обычно при попытке просмотра кода графического файла в текстовом редакторе понять что-либо абсолютно невозможно.
А вот SVG-графика описывается языком разметки. SVG записывается на расширяемом языке разметки (Extensible Markup Language (XML)), являющемся близким родственником HTML. Возможно, вы не в курсе, но XML повсеместно используется в Интернете. Вам приходилось пользоваться RSS-каналом? А ведь в нем также используется XML. Именно в этом языке заключается содержимое RSS-канала, обеспечивая его доступность для разнообразных средств и сервисов. Следовательно, читать и понимать SVG-графику могут не только машины, но и мы с вами.
Позвольте привести пример. Посмотрите на изображение звезды.
Данное SVG-изображение можно найти в файле Star.svg, который находится в каталоге example_07-01. Файл можно открыть как в браузере, на экране которого он появится в виде звезды, так и в текстовом редакторе, где можно будет увидеть код, формирующий эту звезду. Рассмотрим код:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.
w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.
com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-
rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#9 79797" stroke-width="3"
fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.22 14748 184.9 01699 51.44 71742 119.45085 3.894 34837 73.09 83006 69.61 07374 63.54 91503 99 4 128.3 89263 63.54 91503 194.1 05652 73.09 83006 146.5 52826 119.45085 157.7 78525 184.9 01699 "></polygon>
</g>
</svg>
И это все, что нужно для создания звезды в качестве SVG-графики.
Если раньше вам никогда не приходилось видеть код SVG-графики, то у вас может возникнуть вопрос: а зачем это нужно? Если требуется всего лишь получить отображение векторной графики на веб-странице, просматривать этот код действительно не имеет смысла. Нужно найти графическое приложение, способное сохранять результаты вашего векторного творчества в формате SVG, и вы получите то, что хотели. Перечень таких приложений будет дан чуть позже.
Это, конечно же, лишь начальный подход, позволяющий работать с SVG-графикой из графических редакторов, а вот понимание взаимодействия SVG-компонентов и освоение способов вмешательства в их совместную работу, несомненно, пригодится в том случае, когда появятся потребности в манипуляции SVG-графикой и получения на ее основе эффектов анимации.
Поэтому разберемся в SVG-разметке и постараемся понять, что происходит при ее выводе на экран. Я хочу привлечь ваше внимание к ряду ключевых моментов.
Корневой элемент SVG
У корневого SVG-элемента имеются атрибуты для ширины (width), высоты (height) и области просмотра (viewbox):
<svg width="198px" height="188px" viewBox="0 0 198 188"
Все это при отображении SVG на экране играет весьма важную роль.
Надеюсь, к этому времени вы уже хорошо разбираетесь в том, что такое окно просмотра. Оно использовалось в большинстве глав книги для описания той области экрана устройства, на которой просматривается содержимое. Например, у мобильного устройства может быть окно просмотра размером 320 × 480 пикселов, у настольного компьютера — 1920 × 1080 пикселов.
Фактически SVG-атрибуты width и height создают окно просмотра. Через определенное таким образом окно мы можем смотреть на фигуры, определенные внутри SVG. Как и при просмотре веб-страницы, содержимое SVG может быть больше окна просмотра, но это не означает отсутствия всего остального, оно просто не войдет целиком в текущее окно. В то же время область просмотра определяет систему координат, в которой управляют всеми фигурами SVG.
viewbox-значения 0 0 198 188 следует рассматривать в качестве описания левой верхней и правой нижней точек прямоугольной области. Два первых значения, известные в техническом смысле как min-x и min-y, описывают левый верхний угол, а два вторых значения, известные в техническом смысле как ширина и высота, описывают правый нижний угол.
Наличие атрибута viewbox позволяет увеличивать или уменьшать изображение. Например, если в нем уменьшить наполовину параметры ширины и высоты:
<svg width="198px" height="188px" viewBox="0 0 99 94"
фигура уменьшится, чтобы поместиться в размерах SVG-параметров ширины и высоты.
совет
Чтобы подробнее разобраться с атрибутом viewbox и системой координат SVG, а также с предоставляемыми ими возможностями, я рекомендую изучить следующую статью Сары Сьюайден: http://sarasoueidan.com/blog/svg-coordinate-systems/, а также статью Якоба Женкова (Jakob Jenkov): http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.
Пространство имен
У рассматриваемого кода SVG имеется дополнительное пространство имен, определенное для сгенерировавшей его графической программы Sketch (для пространства имен XML используется аббревиатура xmlns):
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
Ссылки на пространство имен предназначены исключительно для использования той программой, которая генерировала SVG, поэтому, когда SVG-графика привязывается для использования в веб-приложениях, эти ссылки зачастую оказываются не нужны и поэтому удаляются в ходе оптимизации, проводимой с целью уменьшения размера SVG-графики.
