HTML SVG
Ранее мини-проект просил небольшой личный сайт. Этот урок открывает опциональный графический трек. SVG позволяет HTML рисовать чёткие иконки и формы математикой, а не пикселями. Практика: как положить SVG на страницу — не полный курс дизайна.
Зачем SVG в курсе HTML
Растровые изображения мылятся при увеличении. SVG описывает пути и формы — логотип остаётся чётким. Новички встречают SVG как иконку шапки или значок. Знание inline vs файл держит страницы лёгкими и доступными.
Прямой ответ
1) Inline: дерево svg в HTML. 2) Файл: сохраните .svg и загрузите через img с alt. 3) Inline для CSS/JS или точного имени. 4) img для статичных логотипов. 5) Именуйте значимую графику. 6) Этот курс только про встраивание.
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
Крошечный inline SVG
Inline SVG — просто разметка. Круг с viewBox и доступным именем показывает работу HTML: браузер рисует; вы контролируете размер и смысл.
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
Читаем inline-демо
- svg — корень
- width/height — бокс вёрстки; viewBox — координаты
- circle — дочерняя фигура
- role=img плюс aria-label именуют графику
- при смене размера остаётся чётким
- мини-проект использовал img для фото; здесь «картинка» может быть разметкой
SVG как файл изображения
Если есть logo.svg, относитесь как к медиа: src и полезный alt. Пути должны совпадать с папкой.
<img src="images/logo.svg" alt="Site logo" width="120">
Читаем файловый паттерн
- src указывает на .svg
- alt несёт доступное имя
- width управляет размером; векторы масштабируются чисто
- CSS стилизует бокс img легче, чем каждый путь inline
- Один файл на многих страницах
- Дальше canvas рисует пикселями JS — другой инструмент
Выбор inline vs файл
- Иконка под цвет CSS: часто inline
- Статичный бренд-логотип: img
- Фото: растр
- Огромная inline-иллюстрация: лучше файл
- Значимая графика: всегда имя
- Глубокий SVG-authoring: позже
Практика — SVG на странице
- Вставьте круг; проверьте отрисовку.
- Меняйте width/height — остаётся чётким.
- Загрузите .svg через img+alt.
- Временно уберите aria-label/alt.
- Inline-иконка у заголовка на копии мини-проекта.
- Предложение: SVG — масштабируемая разметка или векторный файл — не замена фото.
- Впереди: canvas рисует скриптом.
Лёгкие ошибки
- Забыть доступные имена
- Вставлять огромные inline-деревья SVG
- Использовать SVG для фото
- Пропустить viewBox
- Путать SVG с canvas
- Считать интро полным курсом иллюстрации
- Бросить a11y-привычки мини-проекта
Итог
- SVG рисует формы и иконки независимо от разрешения
- Inline через svg или файл через img
- Именуйте значимую графику
- Векторы масштабируются; фото остаются растром
- Мини-проект был сборкой сайта; здесь начинается опциональная графика
- Далее: HTML canvas
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху