The TRSSVGImage component displays a graphical image of an SVG. The control ensures that the image is always of the highest resolution by redrawing the SVG when the control is resized. To display SVG files or text in your form as resolution-independent images, perform the following steps:
The first step is loading the SVG into your program. The TRSSVGDocument (VCL) or TRSFMXSVGDocument (FXM) provide design-time (and run-time) access to an SVG document. Drag and drop a TRSSVGDocument or TRSFMXSVGDocument to your form. The TRSSVGDocument component provides properties for loading the SVG as well as defining important properties about how to interpret the SVG. For example, the DPI property specifies the dots per inch used to calculating the unit factors for conversion of string lengths into actual values. For the VCL, the TRSSVGDocument also includes properties for specifying the quality of the drawing to use if it is not specified in the SVG, such as DefaultColorRendering and DefaultShapeRendering.
 Drag and Drop a TRSSVGDocument or TRSFMXSVGDocument to your form
|
Set the RSSVGDocument1.Filename property to the SVG you want to load. Alternatively, if you want to "bundle" the SVG into your application (so it does not need to be loaded later), set the RSSVGDocument1.Lines property to the text of the SVG. Using the Lines property is very useful for mobile applications as there are no extra files to deploy.
Warning: Delphi's TStrings editor will truncate long lines causing problems with some SVG text. Use NotePad++ or another editor to shorten long lines
|
To display your SVG, you need to use the TRSSVGImage component or the TRSSVGPanel component. Drag and drop the TRSSVGImage component onto your form.
|
At this point, you need to let the TRSSVGImage component know about the SVG. Connect the TRSSVGImage.SVGDocument property to the RSSVGDocument1 (VCL) or RSFMXSVGDocument1 (FMX) component.
 Set the TRSSVGImage.SVGDocument property to your SVG document
|
If you only want to display one branch of the SVG document, you can set the TRSSVGImage.SVGRoot property to the SVG element you want to display. If the SVGRoot is not empty and it does not equal any SVG element in the document, nothing is displayed.
 One TRSSVGDocument can serve as a provider for multiple TRSSVGImage components
Note: One SVG document component can serve as the data provider for multiple TRSSVGImage controls. For example, if the SVG document contained an entire deck of cards, you could set up multiple TRSSVGImage controls for each card using the SVGRoot property.
|
