Лабораторная работа 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 технологии