Scalable vector graphics (SVG) offers a way to use XML to create geometrical shapes. XML is by design a simplistic language, but SVG starts to make the process a bit more complex. Part of the reason for this is the SVG fixed tags. Basic XML allows you to make you own tags, so there is little to commit to memory. SVG requires you utilize single element tags to define your shapes. A good place to start with SVG is by learning to draw shapes.
How to Create a Rectangle
This article offers step-by-step instructions to draw a rectangle in SVG with source code. A rectangle would be any four-sided figure, such as a square. Of all the shapes, creating rectangles is probably the most simplistic structure to build with SVG.
How to Create a Circle
How to Create a Circle is the tutorial for a perfect round shape. The circle element tag works similar to the rectangle, but you add one additional coordinate, radius. This article will provide everything you need to draw a circle in SVG and fill it with color.
How to Create an Ellipse
An ellipse is essentially a circle, but not perfectly round. This means it requires a slightly different approach than the perfect circle. With a circle, you provide on radius coordinate. An ellipse bumps it up to two radius, or ‘r’ coordinates. This article will guide you through a basic ellipse and explain how to fill it with color.
How to Create a Polygon
A polygon is a closed shape with at least three sides. This allows for a lot of variation in the shape. For example, a triangle would be a polygon and so would a five sided figure. A polygon can have an infinite number of points. This makes it one of the more complicated shapes to build in SVG. This article will take you though the process and provides sample code of a basic polygon.