Вопрос об SVG графике в вебе

Вообще я ноль в Svg, Верстал несколько сайтов, но там только png, jpeg. Работал только с Avocode. Когда увидел SVG-формат, попутал аж. Что это вообще?
Расскажите, или дайте ссылки на доступный и свежий материал по теме. В чем плюс такого формата, когда его применять лучше, как правильно вставлять на сайт. Где брать его? Из авокод же например не вырежешь код svg ? что за сайт www.w3.org который всегда автомаом прописывется в коде картинки? Можно ли svg картину вставить просто как png_картинку без кода ? Еще мы можем какие-то простые картинки писать прямо инлайновыми стилями в html Внутри редактора? Как например вот здесь -
<svg class="hamburger" width="25" height="12" viewBox="0 0 25 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <line y1="1" x2="25" y2="1" stroke="black" stroke-width="2"/> <line y1="11" x2="25" y2="11" stroke="black" stroke-width="2"/> <line y1="6" x2="25" y2="6" stroke="black" stroke-width="2"/></svg>

В итоге имеем вот такую кнопку-гамбургер-

Отвал башки.
Посмотрел несколько видео - ничего не понял, информации толком нет.
ps Если прорешаю интерактивы по svg то пойму что-то о Svg?

угу, в курсах научат даже рисовать картинки кодом. но только самые простенькие

а сам svg нужен по той причине, что позволяет создавать изображения без потери качества. т.к. они описаны кодом, а не растровой пикселизацией. многие логотипы, например, пишутся на svg