SVG

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

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg x="0" y="0" width="340" height="340" xmlns="http://www.w3.org/2000/svg">
  <rect width="340" height="340" fill="lightgray" />
  <path d="M 80,220 l -40,60 180,0 0,-140 80,0 0,-60 -140,0 0,140 -80,0 Z" fill="green" />
  <circle fill="green" cx="160" cy="120" r="40"/>
  <circle fill="green" cx="220" cy="240" r="40"/>

  <line x1= "20" y1="20" x2= "20" y2="320" stroke="#111111" />
  <line x1= "40" y1="20" x2= "40" y2="320" stroke="#111111" />
  <line x1= "60" y1="20" x2= "60" y2="320" stroke="#111111" />
  <line x1= "80" y1="20" x2= "80" y2="320" stroke="#111111" />
  <line x1="100" y1="20" x2="100" y2="320" stroke="#111111" />
  <line x1="120" y1="20" x2="120" y2="320" stroke="#111111" />
  <line x1="140" y1="20" x2="140" y2="320" stroke="#111111" />
  <line x1="160" y1="20" x2="160" y2="320" stroke="#111111" />

  <line x1="180" y1="20" x2="180" y2="320" stroke="#111111" style="stroke:rgb(255,0,0)" />
  <path d="M 319 180 l -10,-4 4,4 -4,4 10,-4 Z" fill="red" />
  <text x="307" y="174" font-size="20px" style="font-style: italic;">x</text>

  <line x1="200" y1="20" x2="200" y2="320" stroke="#111111" />
  <line x1="220" y1="20" x2="220" y2="320" stroke="#111111" />
  <line x1="240" y1="20" x2="240" y2="320" stroke="#111111" />
  <line x1="260" y1="20" x2="260" y2="320" stroke="#111111" />
  <line x1="280" y1="20" x2="280" y2="320" stroke="#111111" />
  <line x1="300" y1="20" x2="300" y2="320" stroke="#111111" />
  <line x1="320" y1="20" x2="320" y2="320" stroke="#111111" />
  <line y1= "20" x1="20" y2= "20" x2="320" stroke="#111111" />
  <line y1= "40" x1="20" y2= "40" x2="320" stroke="#111111" />
  <line y1= "60" x1="20" y2= "60" x2="320" stroke="#111111" />
  <line y1= "80" x1="20" y2= "80" x2="320" stroke="#111111" />
  <line y1="100" x1="20" y2="100" x2="320" stroke="#111111" />
  <line y1="120" x1="20" y2="120" x2="320" stroke="#111111" />
  <line y1="140" x1="20" y2="140" x2="320" stroke="#111111" />
  <line y1="160" x1="20" y2="160" x2="320" stroke="#111111" />

  <line y1="180" x1="20" y2="180" x2="320" stroke="#111111" style="stroke:rgb(200,0,0)" />
  <path d="M 180 21 l 4,10 -4,-4 -4,4 4,-10 Z" fill="red" />
  <text x="185" y="32" font-size="20px" style="font-style: italic;">y</text>

  <line y1="200" x1="20" y2="200" x2="320" stroke="#111111" />
  <line y1="220" x1="20" y2="220" x2="320" stroke="#111111" />
  <line y1="240" x1="20" y2="240" x2="320" stroke="#111111" />
  <line y1="260" x1="20" y2="260" x2="320" stroke="#111111" />
  <line y1="280" x1="20" y2="280" x2="320" stroke="#111111" />
  <line y1="300" x1="20" y2="300" x2="320" stroke="#111111" />
  <line y1="320" x1="20" y2="320" x2="320" stroke="#111111" />

  <text x="181" y="190" font-size="12px">0</text>
  <text x="201" y="190" font-size="12px">1</text>
</svg>

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

</svg>

При этом сам рисунок будет выглядеть как тетрадь в клеточку с нанесенными осями координат и выделенной зелёным цветом областью. Как видите код довольно объёмный, но сложным его не назовёшь — большая часть кода это команды 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 в виде сотен ломанных линий. Чему это вас научит?