The <svg> tag is an inline element, such as an image (as opposed to a block element such as a <div>). Elements within the <svg> are positioned similar to Photoshop, with a set of coordinates that follow the form (x,y). An example of this could be (10,15), which translates to x=10 and y=15. This is different than HTML, where elements are laid out relative to one another. Here are some important things to keep in mind:
- The point (0,0) is the upper–left corner of the <svg> element.
- As y values increase, the point moves vertically down the <svg> element.
- Don't confuse this with a typical coordinate system that has (0,0) at the lower–left corner with a point moving up, as y increases in value. This diagram shows the difference between a traditional coordinate system and an SVG coordinate system:
We can use...
