Масштабируемая векторная графика в HTML5

Базовые концепции и использование

Формат масштабируемой векторной графики (Scalable Vector Graphics, SVG) является частью семейства стандартов векторной графики. Он обладает определенными преимуществами перед своими растровыми аналогами: JPEG, GIF и PNG. В этой статье рассматриваются базовые концепции и использование графики SVG в HTML5. Узнайте о графических возможностях, фильтрах, градиентах, тексте и добавлении XML-кода SVG на Web-страницы.

Джереми Дж. Висхюзен, разработчик Web-приложений, Binary Neuron L.L.C.

Jeremy Wischusen photoДжереми Висхюзен (Jeremy Wischusen) имеет более чем 13-летний опыт разработки Web-сайтов и приложений для таких заказчиков, как Purple Communications, myYearbook.com, HBO и другие. Для создания своих серверных и клиентских систем Джереми использовал языки Flash, Flex, jQuery, PHP, MySQL, MSSQL и PostgreSQL. Джереми преподавал Web-дизайн, Flash и ActionScript для таких заказчиков, как Wyeth Pharmaceuticals, The Vanguard Group, Bucks County Community College и The University of the Arts.



25.01.2013

Введение

Формат масштабируемой векторной графики (Scalable Vector Graphics, SVG) является частью семейства стандартов векторной графики. Векторная графика отличается от растровой, в которой определение цвета каждого пиксела хранится в некотором массиве данных. Наиболее распространенными растровыми форматами, используемыми в Интернете в настоящее время, являются JPEG, GIF и PNG, каждый из которых имеет свои достоинства и недостатки.

Часто используемые сокращения

  • CSS: Cascading Style Sheets (Каскадные таблицы стилей)
  • GIF: Graphics Interchange Format (Формат обмена графическими данными)
  • GUI: Graphical User Interface (Графический пользовательский интерфейс)
  • HTML: Hypertext Markup Language (Язык разметки гипертекста)
  • JPEG: Joint Photographic Experts Group (Объединенная группа экспертов по машинной обработке фотографических изображений)
  • PNG: Portable Network Graphics (Переносимая сетевая графика)
  • SVG: Scalable Vector Graphics (Масштабируемая векторная графика)
  • XML: Extensible Markup Language (Расширяемый язык разметки)

Формат SVG обладает несколькими преимуществами перед любым растровым форматом:

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

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

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

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


Основы SVG

При создании графического изображения в формате SVG используется совершенно иной процесс, нежели при создании файлов в форматах JPEG, GIF или PNG. Файлы JPEG, GIF и PNG обычно создаются с помощью какой-либо программы редактирования изображений, например, Adobe Photoshop. Изображения в формате SVG, как правило, создаются с использованием какого-либо языка на базе XML. Существуют графические пользовательские интерфейсы редактирования графики в формате SVG, которые генерируют для вас код XML, лежащий в основе изображения. Тем не менее, в данной статье предполагается, что вы работаете напрямую с XML. Информацию о программах редактирования изображений в формате SVG можно найти в разделе Ресурсы.

В листинге 1 показан пример простого XML-файла SVG, в котором рисуется красный круг с 2-пиксельной черной границей.

Листинг 1. XML-файл SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle  cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red" />
</svg>

Приведенный выше код дает изображение, показанное на рисунке 1.

Рисунок 1. Красный круг с 2-пиксельной черной границей
A red circle with a 2-pixel border

Создание базовых геометрических фигур

При работе с графикой в формате SVG для создания геометрических фигур используются теги XML; эти элементы XML показаны в таблице 1.

Таблица 1. Элементы XML для создания графики в формате SVG
ЭлементОписание
lineСоздает простую линию
polylineФормирует фигуры, построенные с использованием нескольких определений линий
rectСоздает прямоугольник
circleСоздает круг
ellipseСоздает эллипс
polygonСоздает многоугольник
pathПозволяет определять произвольные траектории

Элемент line

Элемент line представляет собой простейший графический элемент. В листинге 2 показано, как создать горизонтальную линию.

Листинг 2. Создание горизонтальной линии
<svg xmlns="http://www.w3.org/2000/svg" version='1.1'
 width="100%" height="100%" >
   <line x1='25' y1="150" x2='300' y2='150'
           style='stroke:red;stroke-width:10'/>
 </svg>

Код, приведенный в листинге 2, дает изображение, показанное на рисунке 2.

Рисунок 2. Простая горизонтальная линия
A flat red horizontal line

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

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

Определение линии можно создать путем задания начальных и конечных координат по осям X и Y относительно рабочей области. Атрибуты x1 и y1 представляют собой координаты начала, а атрибуты x2 и y2— координаты конца линии. Чтобы изменить направление вычерчивания линии, необходимо просто изменить координаты. Например, путем изменения предыдущего примера вы можете создать диагональную линию, как показано в листинге 3.

Листинг 3. Создание диагональной линии
                <svg xmlns="http://www.w3.org/2000/svg" version='1.1'
                width="100%" height="100%" >
                    <line x1="0" y1="0" x2="200" y2="200"
                        style='stroke:red;stroke-width:10'/>
                </svg>

На рисунке 3 показан результат кода, представленного в листинге 3.

Рисунок 3. Диагональная линия
A red diagonal Line

Элемент polyline

Ломаная линия представляет собой рисунок, составленный из нескольких линий. В листинге 4 приводится пример создания рисунка, который выглядит, как ступеньки лестницы.

Листинг 4. Создание ломаной линии, похожей на ступеньки лестницы
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         style="fill:white;stroke:red;stroke-width:4"/>
</svg>

Код, приведенный в листинге 4, дает изображение, показанное на рисунке 4.

Рисунок 4. Ломаная линия, похожая на ступеньки лестницы
A red line that looks like climbing stairs

Ломаная линия создается с помощью атрибута points и путем определения пар координат по осям X и Y, разделенных запятыми. В представленном примере первая точка определена как 0,40, где 0— координата по оси X, а 40— координата по оси Y. Тем не менее одного набора точек недостаточно для вывода изображения на экран, поскольку этот набор указывает рендереру SVG лишь начальную позицию. Вам требуется по меньшей мере два набора точек: начальная точка и конечная точка (например, points="0,40 40,40").

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

Листинг 5. Создание неровной линии
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
         style="fill:white;stroke:red;stroke-width:3"/>
</svg>

Код, приведенный в листинге 5, дает изображение, показанное на рисунке 5.

Рисунок 5. Неровная линия
A red line that runs from left to right, up to down, with several different turns

Элемент rect

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

Листинг 6. Создание прямоугольника
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
    <rect width="300" height="100"
          style="fill:red"/>
</svg>

Код, приведенный в листинге 6, дает изображение, показанное на рисунке 6.

Рисунок 6. Прямоугольник
A red rectangle

С помощью тега rectтакже можно создать квадрат; квадрат — это просто прямоугольник с одинаковыми высотой и шириной.

Элемент circle

Круг создается путем определения координат X и Y центра круга и радиуса, как показано в листинге 7.

Листинг 7. Создание круга
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" fill="red"/>
</svg>

Код, приведенный в листинге 7, дает изображение, показанное на рисунке 7.

Рисунок 7. Круг
A circle filled with black

Атрибуты cx и cy определяют положение центра круга относительно полотна. Поскольку радиус составляет половину ширины круга, при его определении помните о том, что общая ширина изображения будет в два раза больше заданного значения.

Элемент ellipse

По существу, эллипс — это круг, для которого в коде заданы два радиуса, как показано в листинге 8.

Листинг 8. Создание эллипса
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/>
                </svg>

Код, приведенный в листинге 8, дает изображение, показанное на рисунке 8.

Рисунок 8. Эллипс
An ellipse filled with red.

В этом случае атрибуты cx и cy также определяют координаты центра относительно полотна. Однако в случае с эллипсом вы определяете один радиус для оси X и второй радиус для оси Y, используя для этого атрибуты rx и ry.

Элемент polygon

Многоугольник — это геометрическая фигура, которая содержит не менее трех сторон. В листинге 9 создается простой треугольник.

Листинг 9. Создание треугольника
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="200,10 250,190 160,210"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

Код, приведенный в листинге 9, дает изображение, показанное на рисунке 9.

Рисунок 9. Треугольник
A polygon triangle filled with red

Подобно работе с элементом polyline, многоугольники создаются путем определения пар координат по осям X и Y с использованием атрибута points.

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

Листинг 10. Создание четырехстороннего многоугольника
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="220,10 300,210 170,250 123,234"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

Код, приведенный в листинге 10, дает изображение, показанное на рисунке 10.

Рисунок 10. Четырехсторонний многоугольник
A 4-sided polygon filled with red

С помощью тега polygon можно также создавать геометрические фигуры сложной формы. В листинге 11 создается рисунок звезды.

Листинг 11. Создание звезды
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="100,10 40,180 190,60 10,60 160,180 100,10"
            style="fill:red;stroke:black;stroke-width:1"/>
</svg>

Код, приведенный в листинге 11, дает изображение, показанное на рисунке 11.

Рисунок 11. Звездчатый многоугольник
A polygon star filled with red

Элементpath

Элемент path самый сложный из всех элементов рисования, позволяет создавать произвольные рисунки с использованием набора специальных команд. Элемент path поддерживает команды, указанные в Таблице 2.

Таблица 2. Команды, поддерживаемые элементом path
КомандаОписание
MПереместиться в точку
LЛиния до точки
HГоризонтальная линия до точки
VВертикальная линия до точки
CКривая до точки
SГладкая кривая до точки
QКвадратичная кривая Безье до точки
TГладкая квадратичная кривая Безье до точки
AЭллиптическая дуга до точки
ZЗамкнуть траекторию в точке

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

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

Листинг 12. Создание треугольника с помощью элемента path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>
</svg>

Код, приведенный в листинге 12, дает изображение, показанное на рисунке 12.

Рисунок 12. Треугольник, созданный с помощью элемента path
A triangle filled with red.

Список команд определяется с помощью атрибута d. В данном примере вычерчивание начинается в точке с координатами X 150 и Y 0, определенными командой перемещения в точку(M150 0). Затем с помощью команды вычерчивания линии до точки (L75 200). проводится линия до точки с координатами X = 75 и Y = 200. После этого проводится еще одна линия с помощью еще одной команды вычерчивания линии до точки(L225 200). Наконец, рисунок замыкается с помощью команды замыкания (Z). Никакие координаты команду Z не сопровождают, поскольку для замыкания траектории вы по определению проводите линию из текущего положения обратно в исходную точку рисунка (в данном случае точку с координатами X = 150, Y = 0).

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

Истинная «мощь» элемента path заключается в его способности создавать фигуры нестандартной формы, как показано в листинге 13. Этот пример взят из документа Консорциума World Wide Web (W3C) Scalable Vector Graphics (SVG) 1.1 («Масштабируемая векторная графика (SVG) 1.1») (второе издание) (см. раздел Ресурсы).

Листинг 13. Создание нестандартной фигуры с помощью элемента path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
                fill="red" stroke="blue" stroke-width="5"/>
       <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
                 fill="yellow" stroke="blue" stroke-width="5"/>
       <path d="M600,350 l 50,-25
                 a25,25 -30 0,1 50,-25 l 50,-25
                 a25,50 -30 0,1 50,-25 l 50,-25
                 a25,75 -30 0,1 50,-25 l 50,-25
                 a25,100 -30 0,1 50,-25 l 50,-25"
                 fill="none" stroke="red" stroke-width="5"/>
</svg>

Код, приведенный в листинге 13, дает изображение, показанное на рисунке 13.

Рисунок 13. Нестандартная фигура, созданная с помощью элемента path
A cirlce pie chart with 1/4 borken out as well as a line with bumps in it.

С помощью элемента path можно создавать сложные рисунки, например диаграммы и волнистые линии. Обратите внимание на то, что в представленном примере используются несколько элементов path. При создании рисунков вы не ограничены каким-либо одним элементом рисования в корневом теге SVG..


Фильтры и градиенты

В дополнение к базовым стилям CSS, которые использовались во многих приведенных выше примерах, SVG-графика также поддерживает использование фильтров и градиентов. Из этого раздела вы узнаете, как применять фильтры и градиенты к рисункам в формате SVG.

Фильтры

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

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Ссылка на документ с подробным объяснением порядка использования данных фильтров приведена в разделе Ресурсы.

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

Листинг 14. Создание эффекта отбрасываемой тени для прямоугольника
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <defs>
                   <filter id="f1" x="0" y="0"
                             width="200%" height="200%">
                         <feOffset result="offOut" in="SourceAlpha"
                              dx="20" dy="20"/>
                         <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                         <feBlend in="SourceGraphic"
                                in2="blurOut" mode="normal"/>
                    </filter>
         </defs>
          <rect width="90" height="90" stroke="green"
                   stroke-width="3" fill="yellow" filter="url(#f1)"/>
</svg>

Код, приведенный в листинге 14, дает изображение, показанное на рисунке 14.

Рисунок 14. Эффект отбрасываемой тени для прямоугольника
A yellow square with a black drop shadow behind it.

Фильтры определяются внутри элемента def (сокращение от английского «definition», т. е. «определение»). Фильтру в данном примере присваивается идентификатор (id) "f1". Сам тег filter имеет атрибуты для определения координат по осям X и Y, а также ширины и высоты фильтра. Внутри тега filter вы используете требуемые элементы фильтра и устанавливаете нужные значения для их свойств.

После определения фильтра вы связываете его с конкретным рисунком путем использования атрибута filter, как показано в элементе rect. В качестве значения url установите присвоенное фильтру значение атрибута id.

Градиенты

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

В листинге 15 создается эллипс с линейным градиентом.

Листинг 15. Создание эллипса с линейным градиентом
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <defs>
            <linearGradient id="grad1" x1="0%" y1="0%"
                     x2="100%" y2="0%">
           <stop offset="0%"
                     style="stop-color:rgb(255,255,0);stop-opacity:1"/>
           <stop offset="100%"
                     style="stop-color:rgb(255,0,0);stop-opacity:1"/>
           </linearGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55"
                        fill="url(#grad1)"/>
</svg>

Код, приведенный в листинге 15, дает изображение, показанное на рисунке 15.

Рисунок 15. Эллипс с линейным градиентом
An ellipse with gradiating color from yellow to orange, left to right.

В листинге 16 создается эллипс с радиальным градиентом.

Листинг 16. Создание эллипса с радиальным градиентом
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
             <defs>
                     <radialGradient id="grad1" cx="50%" cy="50%"
                            r="50%" fx="50%" fy="50%">
                     <stop offset="0%"
                            style="stop-color:rgb(255,255,255);stop-opacity:0"/>
                     <stop offset="100%"
                            style="stop-color:rgb(255,0,0);stop-opacity:1"/>
                     </radialGradient>
             </defs>
             <ellipse cx="200" cy="70" rx="85" ry="55"
                     fill="url(#grad1)"/>
</svg>

Код, приведенный в листинге 16, дает изображение, показанное на рисунке 16.

Рисунок 16. Эллипс с радиальным градиентом
An ellipse with gradiant color from red to white, outer edges to center of ellipse.

Градиенты, подобно фильтрам, определяются внутри элемента def. Каждому градиенту присваивается идентификатор (id). Атрибуты градиента (например, цвета) задаются внутри тега градиента с помощью элементов stop. Чтобы применить к рисунку какой-либо градиент, установите в качестве значения url для атрибута fill идентификатор (id) требуемого градиента.


Текст и SVG

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

Листинг 17. Создание текста с использованием SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <text x="0" y="15" fill="red">I love SVG</text>
</svg>

Код, приведенный в листинге 17, дает изображение, показанное на рисунке 17.

Рисунок 17. Текст, созданный с помощью SVG
Text saying I love SVG

В этом примере с помощью элемента text создается предложение I love SVG. При использовании элемента text фактически отображаемый текст находится между открывающим и закрывающим элементами text.

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

Листинг 18. Создание текста по дугообразной траектории
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
                  <path id="path1" d="M75,20 a1,1 0 0,0 100,0"/>
        </defs>
        <text x="10" y="100" style="fill:red;">
                   <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
         </text>
</svg>

Код, приведенный в листинге 18, дает изображение, показанное на рисунке 18.

Рисунок 18. Текст, размещенный по дугообразной траектории
Words saying I love SVG curved along an arc.

В этом примере в корневой тег SVG добавляется дополнительное пространство имен XML xlink. Траектория, используемая для изгибания текста дугой, создается внутри элемента def, поэтому сама траектория на рисунке не визуализируется. Отображаемый текст вложен внутрь элемента textPath, который использует пространство имен xlink для обращения к id требуемой траектории.

Как и при работе с другими рисунками в формате SVG, вы также можете применять к тексту фильтры и градиенты. В листинге 19 к тексту применяются фильтр и градиент.

Листинг 19. Создание текста с фильтром и градиентом
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
                    <radialGradient id="grad1" cx="50%" cy="50%"
                           r="50%" fx="50%" fy="50%">
                           <stop offset="0%"
                                style="stop-color:red; stop-opacity:0"/>
                           <stop offset="100%"
                               style="stop-color:rgb(0,0,0);stop-opacity:1"/>
                    </radialGradient>
                    <filter id="f1" x="0" y="0"
                               width="200%" height="200%">
                           <feOffset result="offOut"
                               in="SourceAlpha" dx="20" dy="20"/>
                           <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                           <feBlend in="SourceGraphic"
                               in2="blurOut" mode="normal"/>
                    </filter>
          </defs>
          <text x="10" y="100" style="fill:url(#grad1); font-size: 30px;"
                        filter="url(#f1)">
                        I love SVG I love SVG
          </text>
</svg>

Код, приведенный в листинге 19, дает изображение, показанное на рисунке 19.

Рисунок 19. Текст с фильтром и градиентом
Words I love SVG in a horizontal line with gradiant colors from black to gray, from outer edges working to the center of the text.

Добавление XML-кода SVG на Web-страницы

После того как XML-код SVG создан, его можно включать в HTML-страницы несколькими способами. Первый метод заключается в прямой вставке XML-кода SVG в HTML-документ, как показано в листинге 20.

Листинг 20. Прямая вставка XML-кода SVG в HTML-документ
<html>
     <head>
             <title>Embedded SVG</title>
     </head>
     <body style="height: 600px;width: 100%; padding: 30px;">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="100" cy="50" r="40" fill="red"/>
              </svg>
     </body>
</html>

Вероятно, этот метод является самым простым, но он не способствует повторному использованию. Помните, что XML-код SVG можно сохранить в файле с расширением .svg. Когда вы сохраняете рисунок SVG в файле .svg, для его включения в Web-страницы можно использовать элементы embed, object и iframe. В листинге 21 показан код для включения XML-файла SVG с помощью элемента embed.

Листинг 21. Включение XML-файла SVG с помощью элемента embed
<embed src="circle.svg" type="image/svg+xml" />

В листинге 22 показан код для включения XML-файла SVG с помощью элемента object.

Листинг 22. Включение XML-файла SVG с помощью элемента object
<object data="circle.svg" type="image/svg+xml"></object>

В листинге 23 показан код для включения XML-файла SVG с помощью элемента iframe.

Листинг 23. Включение XML-файла SVG с помощью элемента iframe
<iframe src="circle1.svg"></iframe>

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


Заключение

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

Ресурсы

  • Оригинал статьи: Scalable Vector Graphics in HTML5.
  • Редакторы векторной графики: изучите этот список в Википедии и испытайте в работе программы редактирования SVG-графики.
  • Раздел о применении стилей в стандарте масштабируемой векторной графики W3W Scalable Vector Graphics (SVG) 1.1 (второе издание) содержит дополнительную информацию о применении стилей к SVG-графике.
  • Раздел о траекториях стандарте масштабируемой векторной графики W3W Scalable Vector Graphics (SVG) 1.1 (второе издание) содержит дополнительную информацию об использовании траекторий в SVG-графике.
  • Раздел об эффектах фильтров в стандарте масштабируемой векторной графики W3W Scalable Vector Graphics (SVG) 1.1 (второе издание) содержит подробное объяснение фильтров, упомянутых в этой статье.
  • Render dynamic graphs in SVG («Визуализация динамических графиков в формате SVG») (developerWorks, октябрь 2004 года): разъяснение порядка создания графиков в формате SVG, которые динамически масштабируются в зависимости от содержания.
  • В статье Википедии Scalable Vector Graphics («Масштабируемая векторная графика») приводятся сведения общего характера.
  • Документ SVG 1.1/1.2/2.0 Requirements («Требования SVG 1.1/1.2/2.0») Консорциума World Wide Web (W3C) содержит информацию о принципах разработки и требованиях к будущим версиям языка SVG.
  • Scalable Vector Graphics («Масштабируемая векторная графика»): посетите сайт W3C, посвященный SVG.
  • Учебное пособие по SVG: узнайте об SVG в этом интерактивном учебном пособии w3schools.
  • Книга HTML5: Designing Rich Internet Applications (Visualizing the Web) («HTML5: разработка Web-приложений с широкими возможностями (визуализация Интернета)») содержит примеры рисования в формате SVG.
  • Сертификация IBM в области XML: узнайте о том, как можно стать сертифицированным корпорацией IBM разработчиком в области XML и связанных с этим языком технологий.
  • Технические события и Web-трансляции developerWorks: не отставайте от развития технологий с этими мероприятиями.
  • developerWorks в Твиттере: присоединяйтесь прямо сейчас, чтобы читать твиты developerWorks.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, XML
ArticleID=856198
ArticleTitle=Масштабируемая векторная графика в HTML5
publish-date=01252013