How to draw with SVG path?

Question

JavaScript

How can I draw under the coordinates I need , the shapes that I would like?
I do not know if there are programs for this, for example, such as Adobe Illustrator? Well, to make things easier. If you know a normal, intelligible tutorial, then please leave a link in the comment.

Answer 1

The illustrator exists, stopudov. I saw it myself!
Do you need a tutorial on how to draw in illustrator or where does it have file → export in the menu?
Maybe try inkscape .
If it is by coordinates, then there is nothing complicated

<svg viewBox="5 5 50 50">
  <path d="M10 10 L10 20 L20 20 Z" fill="red"></path>
  <path d="M15 10 l10 0 l0 10 Z" fill="blue"></path>
  <path d="M10 25 h 7 v 7 Z" fill="#FACE8D"></path>
</svg>

this is how it works
viewBox - the coordinates of the top left and bottom right corner of the visible part of the canvas.
M - move the cursor and x and y coordinates
L - draw a line, and also coordinates.
Z - close the figure (connect the last point to the first)
l - draw a line, but not absolute coordinates, but a shift relative to the previous point
H - draw a line horizontally, and coordinate
h - draw a line horizontally, but shift instead of a coordinate.
V and v - the same garbage, but vertically
and so on