So, to move to ( 10, 10) the command to use would be M 10 10. When the parser runs into this letter, it knows it needs to move to a point. The 'Move to' command is called with the letter M. For instance, let's move to the x and y coordinates ( 10, 10). (See more in basic shapes.) The d attribute contains a series of commands and parameters used by those commands.Įach of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. The shape of a element is defined by one parameter: d. While creating complex paths using an XML editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in SVGs.

While s and s can create similar-looking shapes, s require a lot of small straight lines to simulate curves, and don't scale well to larger sizes.Ī good understanding of paths is important when drawing SVGs. Complex shapes composed only of straight lines can be created as s. Paths create complex shapes by combining multiple straight lines or curved lines. It can be used to create lines, curves, arcs, and more. The element is the most powerful element in the SVG library of basic shapes.

Inkscape tutorial text with black box