SVG

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

Для подготовки рисунка можно воспользоваться обычным текстовым редактором (например, Блокнотом-Notepad Windows). Начать проще всего со следующей заготовки:

При этом сам рисунок будет выглядеть как тетрадь в клеточку с нанесенными осями координат и выделенной зелёным цветом областью. Как видите код довольно объёмный, но сложным его не назовёшь — большая часть кода это команды line для рисования вертикальных и горизонтальных линий.

Заготовка-образец SVG  иллюстрации к задачам Mif17

Пример SVG иллюстрации

Всё, что Вам нужно — это заменить строку 4. В этой строке и рисуется та зелёная фигура, которая отличает один вариант от другого. Фигура рисуется при помощи тега path. Его параметр d задаёт последовательность рисования ломанной линии. Сначала карандаш перемещается в точку с координатами (80,220) при помощи команды M (move). Затем командой l (line to) задаются перемещения карандаша, рисующие отрезки ломанной. Мне было удобнее использовать относительные координаты (относительно предыдущего положения), поэтому я использовал команду l. Если бы я захотел использовать абсолютные координаты, то потребовалась бы команда L.
Несколько сложнее будет тем, у кого на рисунке есть дуги окружностей. Однако задание кривых в path не является проблемой. Разобраться с этим Вам поможет эта глава довольно простого руководства.

Никакие строки (кроме четвёртой) менять нет необходимости. Для любопытных (а вы обязаны быть любопытными) могу сообщить:

  • В строке 3 тег rect рисует сероватый прямоугольник общего фона.
  • В строке 19 и 39 тег text используется для вывода надписей у осей координат.
  • Строки 18 и 38 содержат код закрашенных многоугольников стрелочек у тех же осей.
  • Строки 5 и 6 кодируют окружности. Здесь я демонстрирую, как можно наложением рисунка получить более сложную форму. Такой подход может спасти положение в случае если Вы не смогли разобраться, как кодировать кривые участки в теге path.

Уверен у Вас всё получится. Если нет, не стесняйтесь спросить у меня или (ещё лучше!) у тех, кто уже справился с заданием.

Замечание. Пожалуйста, не пытайтесь отлынивать от работы с кодом чертежа. Это превращает работу в пустую формальность. Не нужно работать в векторных редакторах. Верх абсурда будет нарисовать всё в растровом редакторе типа Photoshop и экспортировать в SVG в виде сотен ломанных линий. Чему это вас научит?

Мазурок Игорь Евгеньевич

Мазурок Игорь Евгеньевич

Разработчик программного и информационного обеспечения.
Доцент Одесского национального университета имени И.И.Мечникова
Учёный в области защиты и противодейтствия в интеллектуальных информационных системах
Мазурок Игорь Евгеньевич

Latest posts by Мазурок Игорь Евгеньевич (see all)