Встраивание SVG в HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 13
Автор
Рек. время прохождения 3 минуты
Упражнений 12
Комментарии 0
Тренажер HTML
В этом модуле мы погрузимся в мир векторной и растровой графики прямо в HTML. Ты научишься встраивать SVG-изображения на страницу несколькими способами: как напрямую в код, так и в виде внешних файлов. Это позволит создавать четкие и масштабируемые иконки, логотипы и иллюстрации. Мы также затронем основы работы с элементом Canvas, который открывает возможности для создания динамической растровой графики, анимаций и даже игр. Задания построены так, чтобы ты на практике закрепил синтаксис и понял разницу между этими мощными инструментами для веб-графики.
Список тем

Создание SVG-контейнера

id: 37912_svg-container-creation

Давайте начнем с основ. Чтобы встроить SVG-графику прямо в HTML, сначала нужно создать для неё специальный контейнер. Ваша задача — добавить в код соответствующий тег, чтобы появился пунктирный квадрат.

CSS
.svg-box {
  border: 1px dashed #ccc;
  width: 100px;
  height: 100px;
}
HTML
<input1 class="svg-box"></input1>
Для определения блока со встраиваемой SVG-графикой используется тег `<svg>`. Добавьте открывающий и закрывающий тег в указанное место, чтобы обернуть содержимое.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Задание размеров для SVG

id: 37912_svg-dimensions

Любой графический элемент должен иметь размеры. Задайте ширину и высоту для нашего SVG-контейнера с помощью соответствующих HTML-атрибутов, чтобы он стал видимым на странице.

CSS
svg {
  border: 1px solid blue;
}
HTML
<svg input1="150" input2="100"></svg>
Для указания размеров SVG-элемента используются атрибуты `width` и `height`. Задайте им значения, указанные в коде.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Рисуем круг в SVG

id: 37912_svg-draw-circle

Теперь, когда у нас есть холст, давайте нарисуем на нем простую фигуру. Добавьте тег для создания круга внутри SVG-контейнера, чтобы увидеть оранжевый круг.

CSS
svg {
  border: 1px solid #aaa;
}
HTML
<svg width="100" height="100">
  <input1 cx="50" cy="50" r="40" fill="orange" />
</svg>
В SVG для рисования кругов используется самозакрывающийся тег `<circle>`. Его нужно поместить внутрь тега `<svg>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Настройка параметров круга

id: 37912_svg-circle-attributes

Наш круг пока не видим. Чтобы он появился, нужно задать его ключевые параметры: координаты центра, радиус и цвет заливки. Заполните пропущенные названия атрибутов.

CSS
svg {
  border: 1px solid #aaa;
}
HTML
<svg width="120" height="120">
  <circle input1="60" cy="60" input2="50" input3="red" />
</svg>
Для круга используются атрибуты: `cx` и `cy` для координат центра по осям X и Y, `r` для радиуса и `fill` для цвета заливки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание прямоугольника

id: 37912_svg-create-rectangle

Кроме кругов, в SVG можно рисовать и другие фигуры. Давайте добавим прямоугольник. Используйте соответствующий тег и задайте ему атрибут ширины, чтобы он отобразился корректно.

CSS
svg {
  border: 1px solid #aaa;
}
HTML
<svg width="200" height="120">
  <input1 x="10" y="10" input2="180" height="100" fill="skyblue" />
</svg>
Для создания прямоугольника используется тег `<rect>`. Его размеры задаются атрибутами `width` и `height`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление обводки

id: 37912_svg-stroke

Фигуры в SVG могут иметь не только заливку, но и обводку. Добавьте прямоугольнику черную обводку толщиной 4 пикселя, используя специальные атрибуты.

CSS
svg {
  border: 1px solid #aaa;
}
HTML
<svg width="150" height="100">
  <rect x="5" y="5" width="140" height="90" fill="none" input1="black" input2="4" />
</svg>
Цвет обводки задается атрибутом `stroke`, а её толщина — `stroke-width`. Эти атрибуты добавляются прямо к тегу фигуры.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сложные фигуры с помощью Path

id: 37912_svg-path-element

Для создания сложных и произвольных фигур в SVG используется элемент `<path>`. Вставьте правильный тег и атрибут, который определяет форму пути. Сами данные пути уже предоставлены.

CSS
svg {
  border: 1px solid #aaa;
}
HTML
<svg width="100" height="100">
  <input1 input2="M10 80 Q 50 10, 90 80" stroke="blue" fill="transparent" stroke-width="3"/>
</svg>
Используйте тег `<path>`. Форма кривой задается в атрибуте `d` (от слова data).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вставка SVG через тег `<img>`

id: 37912_svg-via-img-tag

SVG можно вставлять на страницу как обычное изображение. Используйте для этого подходящий тег и атрибут для указания пути к файлу, чтобы на экране появилась иконка.

CSS
img {
  width: 100px;
  height: 100px;
}
HTML
<input1 input2="https://naytikurs.ru/img/11s.svg" alt="Логотип SVG">
Для вставки изображений используется тег `<img>`. Путь к файлу указывается в атрибуте `src`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вставка SVG через тег `<object>`

id: 37912_svg-via-object-tag

Еще один способ встроить SVG — использовать тег `<object>`. Этот метод более гибкий. Укажите тег, атрибут для пути к файлу и атрибут для типа контента.

CSS
object {
  width: 120px;
  height: 120px;
  border: 1px dotted gray;
}
HTML
<input1 input2="https://naytikurs.ru/img/12s.svg" input3="image/svg+xml">
</input1>
Используйте тег `<object>`. Путь к файлу задается в атрибуте `data`, а тип контента — в атрибуте `type` со значением 'image/svg+xml'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Резервный контент для `<object>`

id: 37912_object-fallback-content

Преимущество тега `<object>` в том, что можно указать резервный контент для старых браузеров. Добавьте текстовое сообщение внутрь тега `<object>`, которое будет видно, если SVG не загрузится.

CSS
object {
  width: 150px;
  height: 150px;
  border: 1px solid red;
  color: red;
}
HTML
<object data="path/to/non-existent.svg" type="image/svg+xml">
  input1
</object>
Любой контент, размещенный между открывающим `<object>` и закрывающим `</object>`, будет показан, если браузер не сможет загрузить основной ресурс. Просто напишите текст 'Ваш браузер не поддерживает SVG' в нужном месте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Основы Canvas: создание холста

id: 37912_canvas-basics

Перейдем к `Canvas`. Это элемент HTML, который используется для рисования графики с помощью скриптов. Для начала просто создайте сам элемент-холст с указанными размерами.

CSS
canvas {
  border: 2px solid #333;
  background-color: #f0f0f0;
}
HTML
<input1 id="myCanvas" input2="300" input3="150"></input1>
Для создания холста используется тег `<canvas>`. Как и для SVG, его размеры задаются атрибутами `width` и `height`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Резервный контент для Canvas

id: 37912_canvas-fallback-content

Не все браузеры поддерживают `<canvas>`. Как и в случае с `<object>`, можно предоставить резервный контент. Добавьте требуемое сообщение для пользователей старых браузеров.

CSS
canvas {
  border: 1px solid black;
}
.fallback-text {
  color: red;
  font-size: 14px;
  padding: 10px;
  border: 1px dashed red;
}
HTML
<canvas id="myCanvas" width="250" height="100">
  <p class="fallback-text">input1</p>
</canvas>
Текст или HTML-код, помещенный между тегами `<canvas>` и `</canvas>`, будет отображаться только в браузерах, которые не поддерживают этот элемент. Добавьте туда необходимый текст.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру