В чем разница между HTML и SVG тегами

«В чем разница между HTML и SVG тегами» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

HTML (HyperText Markup Language) используется для структурирования контента веб-страниц (текст, изображения, формы и т.д.), а SVG (Scalable Vector Graphics) — это XML-формат для описания векторной графики.

Ключевые отличия:

  1. Тип графики: SVG — векторный (масштабируется без потери качества), HTML — растровый (пиксели).
  2. DOM: SVG имеет собственный DOM API (SVGElement), HTML — стандартный (HTMLElement).
  3. Атрибуты: В SVG используются атрибуты типа cx, r (для круга), в HTML — class, id и т.д.
  4. CSS: SVG поддерживает CSS, но некоторые свойства отличаются (например, fill вместо background-color).

Пример SVG в HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>