SVG

векторная графика, которая формируется с помощью геометрических объектов: линий, кругов, прямоугольников, кривых и прочих элементов

SVG хорошо подходит для создания статических изображений, высококачественных сложных векторных документов (к примеру чертежей, схем) интерактивных графиков. Но стоит учитывать, что при возрастании количества объектов, скорость отрисовки будет сильно снижаться.

Достоинства: - масштабируемость. Если увеличение фотографий в JPG и PNG может привести к ухудшению качества, то с форматом SVG все будете оставаться на прежнем уровне. - кастомизация элементов на порядок легче кастомизации растровых изображений формата JPG или PNG, достаточно открыть Figma либо открывать в HTML и CSS, а это значит, что мы можем напрямую через код изменять как сам объект, так и его цвет - вес файла – он будет на порядок меньше любого растрового изображения при равных характеристиках изображения - векторное изображение можно легко анимировать при помощи JavaScript, что проблематично сделать с обычной картинкой.

Недостатки:

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

• Не поддерживается старыми браузерами.

SVG-формат – это наилучший вариант для использования иконок, анимированных элементов и иллюстраций на сайте.

Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.