Лабораторная работа №3.2 «Разработка файла SVG с изображением»

Отчет о выполненной работе оформляется на листах формата А4 и должен содержать:

l титульный лист;

l содержание отчета;

l текст задания;

l эскиз рисунка с определением графических объектов и их параметров;

l текст SVG файла с изображением;

l “printscreen” изображения, построенного браузером.

Задание:

Создайте файл SVG с цветным изображением (изображение – см. свой вариант л/р 1.2 или автопортрет) с помощью любого текстового редактора.

Справка по тегам SVG тут: http://www.w3.org/TR/SVG11/shapes.html

Примеры:

Пример 1

Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 100 пикселей по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version = "1.1"

baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"

xmlns:xlink = "http://www.w3.org/1999/xlink"

xmlns:ev = "http://www.w3.org/2001/xml-events"

height = "400px" width = "400px">

<rect x="0" y="0" width="400" height="400"

fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>

<g fill-opacity="0.7" stroke="black" stroke-width="0.5px">

<circle cx="200px" cy="200px" r="100px" fill="red" transform="translate( 0,-50)" />

<circle cx="200px" cy="200px" r="100px" fill="blue" transform="translate( 70, 50)" />

<circle cx="200px" cy="200px" r="100px" fill="green" transform="translate(-70, 50)" />

</g>

</svg>

Пример 2

Прямоугольник с закруглёнными углами, заполняющий всю область отображения:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version="1.1"

baseProfile="full"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:ev="http://www.w3.org/2001/xml-events"

width="100%" height="100%">

<rect fill="white" x="0" y="0" width="100%" height="100%" />

<rect fill="silver" x="0" y="0" width="100%" height="100%" rx="1em"/>

</svg>