SVG library

A pre-existing SVG library is at your disposal. You can add your own SVG to this library.

WHAT IS AN SVG ?

A Scalable Vector Graphic (SVG) is a unique type of image format.
Unlike other varieties, SVGs don’t rely on unique pixels to make up the images you see. Instead, they use ‘vector’ data.
By using SVGs, you get images that can scale up to any resolution.

Tools for SVG

Inkscape is a graphic drawing program.
You can use it to create SVG, it uses SVG as native file format.
Download it here

Find all the information you need about SVG here

Basic Transformations

The transform attribute defines a list of transform definitions that are applied to an element and the element's children.

Translation

The translate(<x> [<y>]) transform function moves the object by x and y. If y is not provided, it is assumed to be 0.

<svg viewBox="0 0 100 100" width="200px" height="200px">
  <rect x="0" y="0" width="50" height="50" fill="red" />
  <rect x="0" y="0" width="50" height="50" fill="pink" transform="translate(35,70)" />
</svg>

Rotation

The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y).

<svg viewBox="0 0 100 100" width="200px" height="200px">
  <rect x="0" y="0" width="30" height="30" fill="red" />
  <rect x="50" y="0" width="30" height="30" fill="pink" transform="rotate(20)" />
</svg>

Scaling

The scale(<x> [<y>]) transform function specifies a scale operation by x and y. If y is not provided, it is assumed to be equal to x.

<svg viewBox="0 0 100 100" width="200px" height="200px">
  <rect x="0" y="0" width="30" height="30" fill="red" />
  <rect x="25" y="0" width="30" height="30" fill="pink" transform="scale(1.5)" />
</svg>

CREATE SVG

By clicking on "Create SVG", you have access to the bellow window:

Here, you can:

• name your SVG
• create its SVG definition
• see a preview of the SVG
• save the SVG
• cancel the SVG creation

EDIT SVG

By clicking on "Edit SVG", you have access to the SVG list window. Only the SVG of your project can be edited.

Double click on the SVG you want to edit.

The "Create/Edit SVG" window opens.

REUSE A SVG

All these SVG can be reuse with some element like Driver elements on Scene2D and Timeline, or the HMI element SVGImage.

In these elements' Properties, you have a field called "SVG Def".

• You can have access to the library, by clicking on the "choose svg definition" button:

Double click on the wanted SVG on the list.

The SVG definition is copied inside the "SVG Def".

Save with Side View, and now your element is represented by the selected SVG.

备注

You can edit a reuse SVG, by clicking on . A new popup appears with preview and differences of the new edited SVG:

Furthermore, you can display the center of the SVG and the icon default dimension (50px*50px) by respectively clicking on and .

The changes you made will not be applied to its definition in the library.

ARROW EDITION MODE

You can easily create and edit arrows by choosing "Arrow svg edition mode".

A list of arrow preset is shown in the middle of the popup.

If you want to manually create your arrow, create a custom arrow path, use the "Dx" and "Dy" fields. Once you have a path, you can customize your arrow with the following parameters :

• Color
• Direction : Direction of the arrow (working only if animation is "None" or "Glow")
  • None
  • Forward
  • Backward
  • Double
• Overflow factor : width of the arrow tip
• Period : Animation completion time in seconds if an animation type is selected
• Thickness : Thickness of the arrow
• Length factor : length of the arrow tip
• Type of animation
  • None
  • Glow
  • Flow
• Intensity : Quantity of elements used for the flow animation (only when animation type is "Flow")