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:
To create an svg element, choose one of the classes listed above and construct it. All SVG elements belong to a TSVGDocument so you need to specify the owner of the element The TSVGDocument element ensures that the ID for every element is unique as well as providing run-time options and unit factors (conversion factors between pixels and other measurements, e.g., 1 inch equals 96 pixels)
procedure TForm20.FormCreate(Sender: TObject); var MyRect: TSVGRectangle; Doc.LoadFromFile('c:\MySVG.svg');
// create the rectangle and add it as a child of the svg document MyRect := TSVGRectangle.Create(Doc); MyRect.ID := 'MyRect'; // must be unique
|
Every SVG element (except the SVG document) needs to be a child of a container element, at the very least the SVG document. The container element is responsible for freeing its child elements. In addition, every SVG element inherits lots of style property values from its parents, such as fill and stroke properties. The RSCL provides 7 container elements:
•defs (TSVGDef) •group 'g' element (TSVGGroup) •marker element (TSVGMarker) •pattern element (TSVGPattern) •document 'svg' element (TSVGDocument) •switch element (TSVGSwitch) •symbol element (TSVGSymbol)
The defs, marker, pattern, and symbol containter elements are not drawn by themselves. Rather, they are only drawn when referenced by other elements. If you add an SVG element to these container elements, they will not show up unless the container element is referenced by another SVG element.
To add an SVG element as a child of a container, you add the element to the container's Items property. The RSCL will automatically set the Parent property of the SVG element to the container element when it is added to the Items property:
procedure TForm20.FormCreate(Sender: TObject); var MyRect: TSVGRectangle; Doc.LoadFromFile('c:\MySVG.svg');
// create the rectangle and add it as a child of the svg document MyRect := TSVGRectangle.Create(Doc); MyRect.ID := 'MyRect'; // must be unique Doc.Items.Add(MyRect);
|
The final step for adding an SVG element to your document is to customize its appearance. The SVG elements inherit the vast majority of their appearance from their parents (or their parents or their parents, etc), including transformations, like scaling and rotation, and fill and stroke properties. The basic shape elements allow you to specify the X, Y, Width, and Height of your element (or equivalent, for example, the circle and ellipse define Radius (or RadiusX, RadiusY) instead of Width and Height. The path element's width and height are determined by its shape. Text elements' width and height are determined by their text and font. To customize your SVG element, define its shape/size.
To define style properties like Fill, Stroke, and Font, you need to set their properties on your element. However, if you just do this, their appearance may not change! Because most style properties are inherited, you also have to change the Inherits property of your element to force the SVG element to use local property values:
procedure TForm20.FormCreate(Sender: TObject); var MyRect: TSVGRectangle; Doc.LoadFromFile('c:\MySVG.svg');
// create the rectangle and add it as a child of the svg document MyRect := TSVGRectangle.Create(Doc); MyRect.ID := 'MyRect'; // must be unique Doc.Items.Add(MyRect);
// set the size of the rectangle in the current coordinate system aRect.BoundsRect := RectF(20, 20, 40, 30); // set its color to red. Note that we must ensure the rectangle does not // inherits its fill from its parent (the svg in this case) aRect.Inherits.Fill := False; aRect.Brush.Color := TSVGColorRec.Red;
An important point to remember is the the X, Y, Width, and Height are based on the nearest viewport's coordinate system. The TSVGDocument, TSVGMarker, TSVGPattern, TSVGSymbol, and TSVGImage can create a new viewport. At any point in an SVG drawing, you can establish a new viewport into which all contained graphics is drawn by including an ‘svg’ element inside SVG content. By establishing a new viewport, you also implicitly establish a new viewport coordinate system, a new user coordinate system, and, potentially, a new clipping path. Additionally, there is a new meaning for percentage units defined to be relative to the current viewport since a new viewport has been established.
The bounds of the new viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new viewport, such as an ‘svg’ element. Both the new viewport coordinate system and the new user coordinate system have their origins at (‘x’, ‘y’), where ‘x’ and ‘y’ represent the value of the corresponding attributes on the element establishing the viewport. The orientation of the new viewport coordinate system and the new user coordinate system correspond to the orientation of the current user coordinate system for the element establishing the viewport. A single unit in the new viewport coordinate system and the new user coordinate system are the same size as a single unit in the current user coordinate system for the element establishing the viewport.
For example, if an SVG document creates a viewbox of 0,0 to 100, 100. The coordinate system for the rectangle is in these units. If the rectangle is created at 50, 50, it will always start exactly in the middle of the SVG, whether the SVG is drawn into a canvas that is 10x10 or 1000x500.
|