Вы находитесь на странице: 1из 15

Графика в формате SVG

Как создавать картинки для компьютера


малого размера и высокого качества
Векторные и растровые изображения
Растровое изображение - из множества Векторное изображение -
точек разного цвета получается цельное набор команд, выполняя
изображение. Файлы форматов: BMP (без которые компьютер создает
сжатия), JPEG/JPG, PNG (со сжатием). При рисунок. Принцип похож на
увеличении теряется качество блоки Scratch: опустить
перо, нарисовать линию,
установить цвет, нарисовать
окружность. Векторные
всегда хорошо выглядят, т.к.
используют экран
компьютера или гаджета
"по-максимуму"
Формат файлов SVG
Файл на диске с расширением *.svg, например house.svg. Файл также может быть получен из
Интернета.

Можно создавать в текстовом (!) редакторе, типа блокнота или редактора в FarManager, но есть
и специализированные графические редакторы для векторной графики.

Структура файла строго определенная. Есть заголовок и закрывающий тэг </svg> :

<?xml version="1.0"?>

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

... здесь тэги, описывающие элементы изображения ...

</svg>

Можно взять эту структуру и добавлять в нее элементы при выполнении заданий
Как просматривать SVG?
Проще всего в браузере. По умолчанию, при двойном клике на файле
откроется какой-нибудь браузер и покажет файл. Далее можно внести
изменения с помощью редактора в файл на диске, сохранить изменения
и в браузере нажать F5 для обновления.
Задание.
Посмотреть, какое изображение содержит файл D:\Nataly\picture-01.svg.
Посмотреть на "внутренности" файла, можно в FarManager, кнопка F3.
* Заменить красный цвет на желтый. Редактор в Far - кнопка F4, находясь
в редакторе F2 для сохранения, выйти - Esc.
Система координат
(0, 0) Система координат отличается от Scratch.
Ось X Размерности по обеим осям не
ограничены, но лучше ориентировать на
1000. Т.е. значения по каждой оси могут
принимать значения от 0 до 1000.
Объекты, которые расположены ниже по
тексту svg-файла, будут отрисованы над
объектами, которые были в файле выше
них. Т.е. отрисовка идет по мере
Ось Y обработки команд svg-файла.
Тэг "прямоугольник" - <rect .../>
Атрибуты:
(0, 0)
x и y - верхняя левая точка
(10, 10)

Высота = 100
width - ширина

height - высота
Ширина = 200 rx и ry - радиус скругления углов

а также цвет контура и цвет


<rect x="10" y="10" width="200"
height="100"/> заполнения
Немного о тэгах
● имя - только по английски
● начинается с угловой скобки <, далее имя: <rect
● должен иметь парный закрывающий тэг </имя>:
<g>...здесь вложенные тэги ...</g>,
но есть и сокращенная запись имя/>, если нет вложенных тэгов:
<rect ...здесь атрибуты... /> то же самое что и <rect ...здесь
атрибуты...></rect>
● малейшая ошибка в синтаксисе приводит к тому, что картинка не
нарисуется. С компьютерами, вообще не так, как в школе - здесь оценка
всегда или "5" или "2"
● всё это справедливо и для HTML - языка разметки сайтов
Немного о тэгах
● тэг может иметь атрибуты, например x и y. Значения атрибутов в
кавычках:

<rect x="10" y="10" />

● У каждого тэга свои атрибуты. Какие именно - в документации


(например https://developer.mozilla.org/ru/docs/Web/SVG/Element/rect)
или в гугле по запросу "svg имя_тэга атрибуты"
● если значение какого-то атрибута не указано, то все равно неявно
атрибут присутствует со значением по-умолчанию, и это не всегда
хорошо. Например, цвет по умолчанию - черный.
Задание
Какие варианты описания тэгов являются неверными и почему

1. </rect x="10" y="10" />


2. <rect x="10" y="10">
3. <rect x:10 y:10 />
4. <rect x="10", y="10" />
5. <rect x="10" y="10" /></rect>
6. rect: <x="10" y="10" />
7. <rect "x"=10 "y"=10 />
Цвета в SVG
Цвет можно указывать как названием цвета на английском, так и в HTML-
формате.

Названия: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime,
olive, yellow, navy, blue, teal, aqua. Что такое navy или maroon тут

HTML-формат: #FF0000 или rgb(255,0,0) или rgb(100%,0,0). Все это один и


тот же цвет - красный, потому что FF - это 255 в шестнадцатиричном
представлении, а 100% считается от 255. Причем тут 255? Это
максимальное значение, помещающееся в 1 байт.
Цвета в HTML
Определяются как смешение 3х составляющих: красной (r - red), зеленой
(g - green), синей (b - blue). Каждая составляющая принимает значения от
0 до 255 в десятичной системе, или же от 0 до FF в шестнадцатиричной.
Для перевода можно воспользоваться калькулятором windows (меню Вид
- программист. Dec - это десятичная система, Hex - шестнадцатиричная).

Задание.
С помощью калькулятора windows выяснить, сколько в десятичной
системе будет число A5?
Цвета в HTML
В записи #FF0000 компоненты зашифрованы так:

#RRGGBB

Подбирать цвета можно, например, тут или тут.

Задание

Каким "чистым" цветам соответствуют #FF0000, #00FF00, #0000FF, #FFFFFF


и #000000
SVG: контур и цвет заполнения
● атрибут fill - цвет заполнения
● атрибут stroke - цвет контура
● атрибут stroke-width - толщина линии контура, в пикселах. Начинать
эксперименты с толщиной лучше с небольших значений от 1 до 5,
чтоб не удивляться результату
Не все тэги имеют эти атрибуты. Например, линия не имеет заливки.
Пример:
<ellipse cx="160" cy="70" rx="40" ry="30"
fill="yellow" stroke="navy" stroke-width="3"/>
Еще тэги
Многоугольник (полигон).
Линия.
Описывает замкнутую фигуру,
Из точки (x1, y1) в точку (x2, y2). состоящую из набора
последовательно соединённых
<line x1="160" y1="70" между собой прямых линий. Линии
x2="40" y2="30" stroke="red" проходят через несколько точек,
заданных в атрибуте points через
stroke-width="3"/>
пробел
Кстати, здесь в примере x1 > x2, <polygon points="0,100 50,25
такое допустимо. 50,75 100,0" />
Выглядит так:
Задания
Модифицировав пример, <?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
сделать 2 svg-файла:
<ellipse cx="160" cy="70" rx="40" ry="30"

1. Домик. Можно с окном


fill="yellow" stroke="navy" stroke-width="3"/>

или без, можно с трубой <line x1="160" y1="70" x2="40" y2="30"


stroke="red" stroke-width="3"/>
или без. <polygon points="0,100 50,25 50,75 100,0" />
2. Шахматную доску.
Темные клетки должны
</svg>

быть бирюзовыми, а
светлые - бледно-
розовыми.

Вам также может понравиться