Question about SVG graphics on the web?

Question

Graphic arts

In general, I am zero in Svg, I made several sites, but there are only png, jpeg. Worked only with Avocode. When I saw the SVG format, I got confused already. What is it anyway?
Tell, or give links to accessible and fresh material on the topic. What is the advantage of this format, when it is better to use it, how to insert it on the site correctly. Where to take it? For example, can't you cut out the svg code from the avocode? what kind of site is www.w3.org that is always written automatically in the image code? Is it possible to insert a svg picture just like a png_picture without a code? Can we also write some simple pictures directly with inline styles in html Inside the editor? Like here for example -

<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>

As a result, we have such a button-hamburger-

Picture

Head dump.
I watched several videos - I did not understand anything, there was really no information.

Answer 1

Information wagon and small cart.
Since you have 0 knowledge - start learning everything gradually. What is SVG to start with.
You can’t just shoot an article at you so that you understand everything.

Answer 2

You can do pretty cool things with SVG, it's lightweight and can be "written" in any text editor. w3schools.com has a great SVG guide, free of charge.
In Russian is here , also free.

Answer 3

SVG Tutorial
There are also js-bibles for svg and canvas:
Fabric.js - a powerful and simple Javascript HTML5 canvas library Fabric provides an interactive object model on top of the canvas element.
Fabric also has an SVG-to-canvas (and canvas-to-SVG) parser
Data-Driven Documents or D3.js
Gallery of d3 elements
Some of them have been translated into their language, as well as an online Bezier curve editor ...
And this is what miracles look likecanvas and svg in one bottle

Answer 4

For a beginner, it seems to me that this approach will be somewhat complicated.
If you are at all familiar with vector graphics, it will be easier to start this way.
1. Open the vector editor and draw the picture you need - an icon, or any simple picture you want.
2.Save the file as svg.
3. Open this svg in your favorite code editor like notepad++
4. See what's between the and tags.
5. You can also try the following.
a) Upload this svg file to your server, write it as a regular picture - b) After making sure that the picture is displayed as a regular one, delete it and its call. c) In the code where you called this picture, write instead Feel the difference)))<img src = "path_to_file/file.svg" >
I think you will be able to understand little by little that everything is not so difficult there, in any case, the head will remain in place))
Ps. Resources advised you excellent, study)