Now that you've learned about path
, let's take a look at some more straightforward parts of the SVG universe and let's examine some more basic shapes. You've already learned about circle
and rect
. Let's take a look at a few more basic shapes.
The path
element allows you to draw anything you can imagine using a long series of instructions. Thankfully, there are many convenient elements that define common shapes that are a lot easier to work with than the path
element. The first of these that you'll learn about is the line
element.
The following example draws a grid on a 500
by 500
square. The line
elements in use here take five arguments: x1
, y1
, x2
, y2
, and a stroke
. The x and y coordinates indicate the beginning (x1
, y1
) and ending points (x2
, y2
) of the line. This SVG document draws a grid 100
pixels on each side in a 500
pixel square:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="500 500 0 0">...