---

Количество <rect> в исходном документе
В исходном SVG 10 элементов <rect>:
Фон комнаты — 500×400, fill="#eaf2f8".
Столешница — 380×25, x=60, y=250, fill="#a9744f".
Левая ножка стола — 20×100, x=80, y=275, fill="#8b5a2b".
Правая ножка стола — 20×100, x=400, y=275, fill="#8b5a2b".
Корпус монитора — 200×130, rx=10, x=150, y=90, fill="#2c3e50".
Экран монитора — 170×100, x=165, y=105, fill="#7fd8ff".
Подставка монитора — 30×25, x=235, y=220, fill="#34495e".
Основание подставки — 90×8, rx=3, x=205, y=245, fill="#34495e".
Клавиатура — 140×25, rx=5, x=180, y=265, fill="#bdc3c7".
Кружка — 25×30, rx=4, x=430, y=225, fill="#ffffff".
Назначение width, height, viewBox
· width="500" и height="400" задают размеры области отображения SVG на странице. · viewBox="0 0 500 400" задаёт систему координат: начало — (0,0), ширина — 500, высота — 400. · Благодаря viewBox изображение можно масштабировать без потери качества: координаты элементов остаются в своей системе, а браузер пересчитывает их под размер окна.
Изменённый SVG-код
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="500" height="400"
     viewBox="0 0 500 400">

  <!-- Фон комнаты -->
  <rect x="0" y="0" width="500" height="400" fill="#eaf2f8"/>

  <!-- Столешница: толщина увеличена, чтобы клавиатура и мышь не свисали -->
  <rect x="60" y="250" width="380" height="40"
        fill="#a9744f" stroke="#6b4628" stroke-width="3"/>

  <!-- Левая ножка стола: высота изменена соответственно -->
  <rect x="80" y="290" width="20" height="85"
        fill="#8b5a2b" stroke="#6b4628" stroke-width="2"/>

  <!-- Правая ножка стола -->
  <rect x="400" y="290" width="20" height="85"
        fill="#8b5a2b" stroke="#6b4628" stroke-width="2"/>

  <!-- Монитор: все элементы сгруппированы -->
  <g id="monitor">
    <!-- Корпус монитора -->
    <rect x="150" y="90" width="200" height="130" rx="10" ry="10"
          fill="#2c3e50" stroke="#1a252f" stroke-width="3"/>

    <!-- Экран монитора: заменён на зелёный -->
    <rect x="165" y="105" width="170" height="100"
          fill="#2ecc71" stroke="#1a252f" stroke-width="2"/>

    <!-- Подставка монитора -->
    <rect x="235" y="220" width="30" height="25"
          fill="#34495e" stroke="#1a252f" stroke-width="2"/>

    <!-- Основание подставки -->
    <rect x="205" y="245" width="90" height="8" rx="3"
          fill="#34495e" stroke="#1a252f" stroke-width="2"/>
  </g>

  <!-- Клавиатура: сдвинута вправо на 20 px -->
  <rect x="200" y="265" width="140" height="25" rx="5"
        fill="#bdc3c7" stroke="#7f8c8d" stroke-width="2"/>

  <!-- Клавиши -->
  <line x1="210" y1="272" x2="330" y2="272"
        stroke="#7f8c8d" stroke-width="1"/>
  <line x1="210" y1="280" x2="330" y2="280"
        stroke="#7f8c8d" stroke-width="1"/>

  <!-- Мышь -->
  <ellipse cx="350" cy="278" rx="14" ry="10"
           fill="#95a5a6" stroke="#7f8c8d" stroke-width="2"/>
  <line x1="350" y1="270" x2="350" y2="278"
        stroke="#7f8c8d" stroke-width="1"/>

  <!-- Кружка: увеличена в 1,5 раза, левый верхний угол сохранён -->
  <rect x="430" y="225" width="37.5" height="45" rx="6"
        fill="#ffffff" stroke="#34495e" stroke-width="2"/>
  <path d="M 467.5 235.5 q 18 12 0 24"
        fill="none" stroke="#34495e" stroke-width="2"/>

  <!-- Провод от монитора к мыши -->
  <path d="M 250 250 C 300 300, 340 260, 350 278"
        fill="none" stroke="#2c3e50" stroke-width="2"/>

  <!-- Кабель питания, уходящий от стола вниз -->
  <path d="M 250 290 C 240 330, 270 370, 250 400"
        fill="none" stroke="#2c3e50" stroke-width="2"/>

</svg>
 изменено
· Экран монитора: fill="#7fd8ff" заменён на fill="#2ecc71". · Столешница: высота увеличена с 25 до 40, нижняя граница стала y=290. · Ножки стола: начинаются с y=290, высота уменьшена до 85, чтобы нижняя граница осталась на y=375. · Клавиатура: x изменён с 180 на 200, линии клавиш также сдвинуты на 20 px. · Кружка: размеры увеличены в 1,5 раза: 37.5×45, rx=6; ручка также отмасштабирована. · Монитор: корпус, экран, подставка и основание обёрнуты в <g id="monitor">. · Добавлен провод от монитора к мыши. · Добавлен кабель питания, уходящий от стола вниз.
Конвертация в .jpg
В чате нельзя прикрепить готовый файл, но его можно получить локально:
Сохранить код как computer.svg.
Открыть в Inkscape: Файл → Экспорт → JPG.
Или использовать ImageMagick:
magick computer.svg computer.jpg
Или онлайн-конвертер SVG → JPG.
Сравнение SVG и JPG
Параметр SVG JPG Чёткость при увеличении Векторный формат, остаётся чётким при любом масштабе Растровый формат, при увеличении появляются пиксели и размытие Размер файла Обычно небольшой для простых фигур, содержит XML-код Зависит от разрешения и сжатия; при высоком качестве может быть больше Редактируемость Можно редактировать в текстовом редакторе: менять координаты, цвета, фигуры Редактируется только как растровое изображение, сложно менять отдельные элементы
Краткий отчёт
Тема: Структура SVG-файлов. Цель: сформировать навыки создания, редактирования и анализа SVG-изображений средствами текстового редактора и браузера.
Ход работы:
Изучен XML-код computer.svg.
Определено, что в документе 10 элементов <rect>.
Разобрано назначение width, height, viewBox.
Внесены изменения: · экран монитора стал зелёным; · увеличена толщина столешницы; · изменена высота ножек; · клавиатура сдвинута вправо на 20 px; · кружка увеличена в 1,5 раза; · элементы монитора сгруппированы; · добавлены провод к мыши и кабель питания.
Выполнена конвертация в .jpg.
Проведено сравнение SVG и JPG по чёткости, размеру и редактируемости.