You can easily add svg elements programmatically to any SVG. It is expected that you should have a basic knowledge of the SVG specification to understand how to create SVGs. This section expands on the SVG specification to describe how the RSCL implements the specification and how to use it. The SVG specification defines 6 basic shapes:
•Rectangle (including optional rounded corners) (TSVGRectangle)
•Circle element (TSVGCircle)
•Ellipse element (TSVGEllipse)
•Line element (TSVGLine)
•Polyline element (TSVGPolyline)
•Polygon element (TSVGPolygon)
More complex shapes can be created with the svg path element. Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath (close the current shape by drawing a line to the last moveto) elements. Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.
•Path element (TSVGPath)
Finally, text is rendered with the text element. SVG's ‘text’ elements are rendered like other graphics elements. Thus, coordinate system transformations, painting, clipping and masking features apply to ‘text’ elements in the same way as they apply to shapes such as paths and rectangles. Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping.
•Text element (TSVGText)
Inside the text element, you can achieve more complex text statements using text content child elements:
•tspan element (TSVGTextSpan)
•textPath element (TSVGTextPath)
•tref element (TSVGTextRef)
Note that the base class for all elements in the RSCL is the TSVGElement class. Its direct descendant, the TSVGGraphicElement class, is the base class for all SVG elements that draw something to the canvas.
To add svg customized elements to your svg document, there are 3 steps: