<svg>
Векторная графика прямо в HTML: фигуры, иконки, схемы.
Синтаксис
<svg width="100" height="100" viewBox="0 0 100 100">…</svg>Атрибуты
| Параметр | Тип | Описание |
|---|---|---|
| viewBox | x y width height | Система координат рисунка. |
| width, height | number | Размер на странице. |
Примеры
Круг, квадрат и линия:
<svg width="200" height="100" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="40" fill="tomato" />
<rect x="110" y="10" width="80" height="80" fill="teal" />
<line x1="0" y1="95" x2="200" y2="95" stroke="black" stroke-width="2" />
</svg>Иконка меняет цвет вместе с текстом:
<style>
.like { color: crimson; font-size: 20px; }
</style>
<p class="like">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 21 3 12a5 5 0 0 1 9-6 5 5 0 0 1 9 6z" />
</svg>
Like
</p>Примечания
SVG не теряет чёткости при любом масштабе и весит мало. fill="currentColor" берёт цвет текста, поэтому иконку перекрашивают обычным color. Декоративные иконки скрывают от программ чтения с экрана через aria-hidden="true".
См. также
Вопросы и ответы по теме
В учебнике
- SVG-графика — Векторная графика SVG прямо в HTML — фигуры, viewBox и масштабирование, линии и контуры, path, заливка и currentColor.