Базовые формы SVG

Лабораторная работа 10. SVG. Примитивы.
Векторная графика широко используется в печатном деле. Но и для веб
сайтов можно использовать её с помощью SVG (Scalable Vector Graphic масштабируемая векторная графика). В соответствии со спецификацией
W3.org SVG определяется как:
Язык для описания двумерной графики в XML. SVG допускает
использование
трех
типов
объектов:
векторные графические
формы
(наппример, пути, состоящие из прямых линий и кривых), изображения и
текст.
Несмотря на то, с августа 2011 года SVG включено в рекомендации W3C,
данная технология практически не используется в веб проектах, хотя и имеет
перед растровыми изображениями ряд преимуществ.
Преимущества SVG:
1. Независимость разрешения
Растровые изображения зависят от разрешения. Графика приобретает
непрезентабельный вид при изменении размеров до определенных масштабов.
С векторной графикой такая ситуация невозможна в принципе, так как все
представляется
математическими
выражениями,
которые
автоматически
пересчитываются при измении масштаба, и качество сохраняется в любых
условиях.
2. Уменьшение количества запросов HTTP
SVG может быть встроено непосредственно в документ HTML с
помощью тега svg, поэтому браузер не нуждается в запросах для обслуживания
графики. Такой подход хорошо влияет на характеристики загрузки веб сайта.
3. Стили и скрипты
Встраивание с помощью тега svg также позволяет легко определять стили
для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет
фона, прозрачность, рамки и так далее. Подобным же образом можно
манипулировать графикой с помощью JavaScript.
4. Легко редактировать и анимировать
Объекты SVG можно анимировать с помощью CSS или JavaScript. Также
объекты SVG можно модифицировать с помощью текстового редактора.
5. Меньший размер файла
SVG имеет меньший размер файла по сравнению с растровой графикой.
Базовые формы SVG
Линия
Для вывода линии в SVG используется элемент <line>. Он рисует
отрезок, для которого нужно определить две точки: начало и конец.
<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>
Полилиния
Элемент <polyline> содержит атрибут points, который используется для
указания координаты точек.
<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1"
stroke="rgb(0,0,0)"/>
</svg>
Прямоугольник
Прямоугольник
выводится
с
помощью
элемента
<rect>.
Нужно
определить ширину и высоту.
<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>
Круг
Для вывода круга используем элемент <circle>. В следующем примере мы
создаем круг с радиусом 100, который определяется в атрибуте r. Первый два
атрибута cx и cy определяют координаты центра. По умолчанию используется
значение 0.
<svg>
<circle
cx="102"
stroke="rgb(0,0,0)"/>
</svg>
Эллипс
cy="102"
r="100"
fill="rgb(234,234,234)"
stroke-width="1"
Для вывода эллипса используем элемент <ellipse>. Он работает так же,
как и круг, но мы можем специально задавать радиусы по оси x и y с помощью
атрибутов rx и ry:
<svg>
<ellipse cx="100" cy="50"
stroke="rgb(0,0,0)"/>
</svg>
rx="100"
ry="50"
fill="rgb(234,234,234)"
stroke-width="1"
Полигон
Элемент <polygon> выводит
треугольник, шестиугольник и прочее.
многогранные
фигуры,
такие
как
<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89
180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>
Определение стилей для SVG элементов происходит так же, как и для
обычных элементов HTML. Некоторые свойства являются общими, но есть и
специфические свойства для объектов SVG.
Например, для обычного элемента HTML можно задавать цвет фона
свойствами CSS background-color или background. В SVG ситуация несколько
отличается: фоновый цвет определяется свойством fill (заполнение). Также
обводка элемента определяется свойством stroke, а не border, как в обычном
HTML.
Задание
Создайте фигуры, используя SVG код. Пример изображения приведен на
рисунке 1.
Рисунок 1 – Изображение, полученное с помощью SVG технологии