With an SVG resource member you can include an SVG image file to your project. It can thereupon be displayed by views like the SVG view, or rasterized in an SVG bitmap. In the last case, the rasterized bitmap can be used by other image views, widgets, etc. wherever a regular bitmap is expected. SVG resource members are represented in Composer by following bricks:

SVG files define image contents in vector graphics format stored as XML text. Being described by vectors SVG images can be scaled in size and rotated without loss of quality and without presenting any ugly scaling effects as it is the case when using pixel bitmap resources. Usually, SVG images also occupy less memory compared with pixel bitmap resources. The larger the bitmap, the bigger the expected benefit of the SVG file. On the other hand, processing SVG contents require much more CPU power and, depending on the SVG content, also RAM to store intermediate image contents. The SVG resources are therefore not seen as replacement for bitmap resources. More than that, they should be considered as a complement for bitmap resources and it's up to you to decide in which application case it is appropriate to use a bitmap or SVG resource.

During code compilation the SVG files are automatically converted in a format optimized for the particular target system. It includes compression of vector data and elimination of superfluous and not supported SVG elements. SVG resource members can also be localized with several image files, one for every supported language. This capacitates the SVG resource to automatically offer the image corresponding to the currently selected language.

Please note, an SVG resource member can exist only within a unit member. Moreover, SVG resources are stored statically and cannot be modified at the runtime. If your application case does require the SVG content to be determined dynamically or to be changed at the runtime, use the SVG Data object instead.

The authors of the SVG specification have foreseen different SVG profiles suitable for diverse application cases. In our case Embedded Wizards supports a subset of the SVG Tiny 1.2 specification, which is well adequate for less powerful embedded systems. The following table provides an overview of all SVG elements, features and attributes supported in the actual version of Embedded Wizard:

Element / Feature / Attribute	Comment
<svg>	Nesting of <svg> elements is not possible. Furthermore, contents lying beyond the borders resulting from the value specified in attribute viewBox are not clipped, they remain visible.
<rect>	Supported
<circle>	Supported
<ellipse>	Supported
<line>	Supported
<polyline>	Supported
<polygon>	Supported
<path>	Supported
<use>	Supported
<style>	In Embedded Wizard the CSS selectors allow combination of element type, class and id (for example rect.background#rect1). More complex selectors referring e.g. superior elements are not supported.
<g>	Supported
<defs>	Supported
<lineGradient>	Supported
<radialGradient>	Supported
<stop>	Supported
SVG parsing at code generation	Supported. The SVG content is converted in format suitable for the target system.
SVG parsing at runtime	Supported by the SVG Data object. An SVG resource itself is converted already at code generation time and thus is immutable at the runtime.
Nesting of <svg> elements	Not supported
Transformations	All kinds of transformations (e.g. translate, rotate, skewX, ... etc.)
Supported <path> commands	All kinds of commands (e.g. M, m, L, l, A, a, ... etc.)
Clipping effect of viewBox	The clipping is not affected by viewBox attribute
Coordinate units	in, cm, mm, pt, pc, px and %
Color formats	#rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), predefined color tags
Color tags (e.g. red, gold, ...)	CSS level 1 and level 3
Support of currentColor	Yes
id	Attribute supported by all elements
class	Attribute supported by all elements
style	Attribute supported by all elements
x	Attribute supported by <rect> element
y	Attribute supported by <rect> element
width	Attribute supported by <rect> and <svg> elements
height	Attribute supported by <rect> and <svg> elements
x1	Attribute supported by <line> and <lineGradient> elements
y1	Attribute supported by <line> and <lineGradient> elements
x2	Attribute supported by <line> and <lineGradient> elements
y2	Attribute supported by <line> and <lineGradient> elements
cx	Attribute supported by <circle>, <ellipse> and <radialGradient> elements
cy	Attribute supported by <circle>, <ellipse> and <radialGradient> elements
r	Attribute supported by <circle> and <radialGradient> elements
rx	Attribute supported by <rect> and <ellipse> elements
ry	Attribute supported by <rect> and <ellipse> elements
points	Attribute supported by <polyline> and <polygon> elements
d	Attribute supported by <path> element
transform	Attribute supported by all elements
gradientTransform	Attribute supported by <linearGradient> and <radialGradient> elements
gradientUnits	Attribute supported by <linearGradient> and <radialGradient> elements
vectorEffect	Attribute supported by all elements
href	Attribute supported by <use> element
xlink:href	Attribute supported by <use> element
fill	Attribute supported by all elements
fill-opacity	Attribute supported by all elements
fill-rule	Attribute supported by all relevant elements
stroke	Attribute supported by all elements
stroke-opacity	Attribute supported by all elements
stroke-width	Attribute supported by all elements
stroke-linecap	Attribute supported by all elements
stroke-linejoin	Attribute supported by all elements
stroke-miterlimit	Attribute supported by all elements
opacity	Attribute supported by all elements
stop-color	Attribute supported by <stop> element
stop-opacity	Attribute supported by <stop> element
offset	Attribute supported by <stop> element
viewBox	Attribute supported by <svg> element

The following XML code snipped demonstrates the content of an SVG file. In this example, the code describes a rectangle filled with a radial gradient. At the runtime this SVG image produces a fancy glow effect as shown in the next following figure. Please note, SVG files are text files you can edit in an ordinary text editor:

Image resulting from the above SVG example.

Adding a new SVG resource member.

Alternatively you can add SVG resources by conveniently drag-and-drop the original *.SVG image files directly from the MS-Windows file explorer into a Composer with an opened unit. Accordingly, Embedded Wizard adds for every image file a new SVG resource member automatically. The SVG resource members are already configured to refer to the original image files, so you don't need to specify SVG image content manually. To add new SVG resources by drag-and-drop do following:

Adding new SVG resource members by drag-and-drop the original image files from MS-Windows file explorer.

SVG resource members have a global character - they can be accessed from everywhere within your project. To address an SVG resource member, you must always use its full name, which is composed of the unit name, the member is defined inside, and the name of the member itself, both separated by :: (double colon) signs. For example Widgets::IconOk.

The SVG image content to include by the SVG resource is specified in its attribute SVGContent. This attribute can contain either a path to the respective *.SVG file or it may contain the actual SVG content (the XML text) itself. The advantage of the last case is that no external SVG files have to maintained and the SVG contents are part of the project.

You can specify several, individual initialization expressions for the SVGContent attribute, one for each language available in your project. The appropriate version is selected dynamically at the runtime when the SVG resource is evaluated within a Chora expression. The selection is controlled by the global variable language. In this manner the displayed SVG images may change according to the actually selected language.

You can create any number of copies of an already existing SVG resource member.

You can also Drag & Drop an SVG resource member from the Browser into the Composer window and create so a duplicate of the affected member:

Duplicating an SVG resource by simply Drag & Drop it between the Browser and Composer windows

Every SVG resource is represented at the runtime by its own individual global instance of the Mosaic class Resources::SVG. As such SVG resources can be involved within Chora expressions wherever an operand of the mentioned Mosaic class is expected. It can, for example, be assigned to a SVG property of a view able to display SVG images. Moreover, the methods exposed by the Resources::SVG object can be invoked. The SVG resource itself is identified by its full name, composed of the unit name, the resource member is defined inside, and the name of the resource member itself, both separated by :: (double colon) signs. For example:

Please note, if the resource is localized for multiple languages, the right version is determined just at the evaluation time of the expression involving the SVG resource. Let's assume, your project contains an SVG resource Widgets::Flag localized for the both languages French and English, then the SVG resource will result in different Resources::SVG instances depending on the currently selected language:

For the complete overview see the reference documentation of the Mosaic class Resources::SVG.

To prevent the system from loading the same resource twice, Embedded Wizard maintains all currently existing resource objects in an internal cache. Multiple accesses to one and the same resource result thus in the same instance of the Resources::SVG class. In the case, the SVG resource is localized, Embedded Wizard will store for every variant an individual resource object in the cache. For example:

If an SVG resource object is not referenced anymore by any GUI component, the Garbage Collector deletes the object from the cache automatically.

Every SVG resource member can be overridden by one or more SVG resource variant members. Once overridden, the variant member can retrospectively modify the initialization expressions of the original SVG member. The derivation of variants provides the fundamental technique to manage several product and design variants within one and the same GUI application. The selection of the appropriate variant occurs automatically depending on the condition specified in the VariantCond attribute of the corresponding variant member.

With the attribute Generator you can selectively control, whether the SVG resource member should be taken in account during the code generation or not. Configuring this attribute with the value false will exclude the member from your project unless the member name is explicitly involved within a Chora expression.

With the attribute Storage you can selectively specify the location where data belonging to the resource should be stored. The data can be stored directly in the generated code or in a separate so-called Blob file. Unlike the first option, the Blob file can be replaced and so the contents of the resource can be exchanged retrospectively without needing to rebuild the binary.

The following table shows the complete list of attributes provided by the SVG resource member:

Attribute name	Short description
Brick	Determines the position and the size of an SVG member brick within the Composer window.
Description	Contains the description for the SVG member.
SVGContent	Determines the content of the SVG resource. It can be a path to an *.SVG file or the actual SVG content as XML text.
Generator	Controls the code generation for the affected SVG resource member.
ResourceClass	Determines the class of a resource member.
Storage	Controls the storage location for data belonging to the resource when generating code.

This section describes the Chora syntax of how SVG resources are stored inside Embedded Wizard project files. The knowledge about the syntax can be helpful when you plan to process the project contents by third party tools. In particular, the general purpose Export and Import functionality introduced in version 14 requires a good understanding of how project members are represented in Chora syntax to correctly interpret the exported members and synthesize the Chora code for members to import. Please note, Embedded Wizard project files (and thus Chora code) are encoded as text in UTF-8 format.

In Chora syntax, SVG resource definition is always introduced with the keyword resource, followed by the predetermined class name Resources::SVG, the name of the SVG resource and a list of attributes to configure the SVG resource. The attributes are enclosed between a pair of curly braces {..}, whereby each attribute starts with the keyword attr, followed by the type of the attribute, the attribute name and optionally the value (or values) for the attribute separated from the name by an assignment operator =. Each attribute terminates with ; semicolon sign. For the list of attributes supported by the SVG resource please see the section Attributes of an SVG resource. Wherever necessary, the tokens are separated by whitespace signs. Attribute types are fixed predefined. Please use the types as demonstrated in the example below.

An SVG resource may be localized for multiple languages. It this case the attributes contain multiple values, each composed of a language name and the corresponding value. Each language name and the corresponding value are separated by an assignment operator = and terminated with ; semicolon sign. All language specific values belonging to an attribute are enclosed between a pair of parenthesis (..). Please note that every language-dependent attribute must contain a value for the Default language.

The definition of a resource can be initiated by a comment block providing optional description for the resource. The content of this comment corresponds to the value of the resources's attribute Description. Furthermore the directives $rect, $output and $storage can be specified providing values for the corresponding attributes Brick, Generator and Storage. The following examples demonstrate the described syntax:

Each Chora file (or text exchanged with an external Export and/or Import tool) can be (or even should be) prefixed with $version directive. This directive determines the version number of the included Chora code. For details concerning the syntax of the version please see the chapter $version macro. Furthermore, the code can include a $scope directive followed by a path to a project member acting as the original owner of the corresponding code. That means the members described by the Chora code existed inside the member specified in $scope. In case of an SVG resource, $scope would specify the name of the unit the resource belongs to.