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

Question

[Александр]

Вообще я ноль в 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>

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

Рисунок

Отвал башки.
Посмотрел несколько видео - ничего не понял, информации толком нет.

Answer 1

[lamer350]

Информации вагон и маленькая тележка.
Так как у вас знаний 0 - начните все изучать постепенно. Что такое SVG для начала.
Нельзя просто выстрелить статьей в вас чтобы вы все поняли.

Answer 2

[Илья]

С помощью SVG можно делать довольно крутые вещи, он мало "весит" и его можно "писать" в любом текстовом редакторе. На w3schools.com есть отличный гайд по SVG, бесплатный.
На русском есть здесь, тоже бесплатно.

Answer 3

[Варлам Ерофеич]

Учебник SVG
Позвольте представить: SVG
SVG – Scalable Vector Graphics
SVG в вебе, практическое руководство
SVG элементы:
Синтаксис SVG
- Ну вот; на "пока", полагаю, вполне достаточно... )))
Ещё есть js-библии к svg и canvas:
Fabric.js - мощная и простая Javascript HTML5 библиотека холста Fabric предоставляет интерактивную объектную модель поверх элемента canvas.
В Fabric также есть синтаксический анализатор SVG-to-canvas (и canvas-to-SVG)
Data-Driven Documents или D3.js
Галерея d3-элементов
Некоторые из них успел перевести на свой язык, как и онлайн-редактор кривых Безье...
А вот как смотрятся чудеса canvas и svg в "одном флаконе"

Answer 4

[lagudal]

Для новичка мне кажется это несколько сложный подход будет.
Если вы вообще знакомы с векторной графикой, то будет проще начать таким образом.
1.Откройте векторный редактор и нарисуйте нужную вам картинку - иконку, ну или любую пока простейшую картинку, какую хотите.
2.Сохраните файл как svg.
3. Откройте данный svg в любимом редакторе кода, например notepad++
4. Посмотрите что находится между тегами и .
5. Можете попробовать также следующее.
а) Залейте этот svg файл на сервер себе, пропишите как обычную картинку - <img src = "path_to_file/file.svg" >
б) Убедившись, что картинка отображается как обычная, удалите ее и ее вызов.
в) В коде, где вы эту картинку вызывали, пропишите вместо <img src = "path_to_file/file.svg" >
<svg> ---тут важ код svg--</svg>
Почувствуйте разницу )))
Думаю, вы сможете понемногу понять, что там все совсем не так сложно, во всяком случае башка на месте останется ))
Пс. Ресурсы вам посоветовали отличные, изучайте )