Manually adding elements and shapes

An SVG image is a collection of elements rendered as shapes and comes with a set of seven basic elements; almost all of these are just an easier way to define a path:

  • Straight lines (a path with two points)
  • Rectangles (a path with four points and right angles)
  • Circles (a round path)
  • Ellipses (an oblong path)
  • Polylines (a path comprising straight lines)
  • Polygons (a path comprising straight lines that closes in on itself)
  • Text (the only one that isn't a path)

You build SVG images by adding these elements to the document and defining some attributes. All of them can have a stroke style defining how the edge is rendered, a fill style defining how the shape is filled, and all of them can be rotated, skewed, or moved using the transform attribute.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset