Что такое SVG?
SVG — это формат изображения для векторной графики. Буквально это означает «масштабируемая векторная графика».
Почему SVG не теряет четкости? (Он масштабируется до любого размера, сохраняя при этом качество)
Данные изображения SVG хранятся в виде XML вместо пикселей и состоят из компонентов, которые могут быть масштабированы до любого уровня без потери качества.
Различия между SVG и Canvas
SVG — это язык для описания двумерной графики в XML.
Canvas рисует 2D графику «на лету» (с помощью JavaScript).
SVG основан на XML, что означает, что каждый элемент доступен в SVG DOM. Вы можете подключить обработчики событий JavaScript для элемента.
В SVG каждая нарисованная фигура запоминается как объект. Если атрибуты объекта SVG изменяются, браузер может автоматически перерисовать фигуру.
Canvas отображается пиксель за пикселем. В canvas, как только графика нарисована, она забывается браузером. Если его положение должно быть изменено, необходимо перерисовать всю сцену, включая любые объекты, которые могли быть закрыты графикой.
Пример кода треугольника:
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Пояснение:
M = moveto
L = обход
Z = closeepath
Заглавные буквы означают абсолютное позиционирование, строчные — относительное.
Источник: школа W3