Import an SVG as an Industrial Graphic

The Industrial Graphic Editor supports the importing of Scalable Vector Graphics (SVG) as Industrial Graphics. You can perform the following:

• Import an SVG into the Industrial Graphic Editor. The graphic elements automatically get converted to an Industrial Graphic, which can include many primitives.

  Insert the SVG while using the Image icon from the Tools panel of the Industrial Graphic Editor.

• Use SVG for the UpImage and DownImage on a button. For more information,see Configuring Buttons with Images.

• Use SVG for the Quality & Status display icons under Styles configuration.

A list of supported SVG elements can be found at https://github.com/svg-net/SVG.

To import an SVG and insert as an Industrial Graphic:

1. In the Industrial Graphic Editor, on the Graphic menu, click Import SVG.

2. Browse for the required SVG and click Open.

   Note: You can import multiple SVG files at once.

3. To insert the SVG file as Industrial Graphics, click anywhere on the canvas.

OR

4. Open the SVG in a notepad and copy all the content.

   Note: Make sure the format of the SVG is proper.

5. Either right-click in the Industrial Graphic Editor canvas and select Paste SVG, or, on the Graphic menu, select Paste SVG.

6. Click on the canvas where you want to paste the SVG.

OR

• Drag and drop the SVG to the canvas.

  You can drag and drop multiple SVG files at once.

  Note: You can drag and drop SVG files only if User Account Control (UAC) is turned off. Before turning off UAC, be sure to check your organization's security policy, as turning it off could cause a security issue.  If you try to drag and drop an SVG file to the canvas with UAC turned on, a forbidden icon is displayed.

When importing an SVG, be aware of the following:

• If the imported SVG is bigger than the view area, then the SVG will be resized accordingly by maintaining the aspect ratio.

• If there are any unsupported characters in the name of the SVG or primitive, it will be converted to “_”.

• The SVG element name is used to name the corresponding primitive. If a SVG element does not have a name, then Industrial Graphic primitive type is used to name the primitive. For example, if the SVG group name is "Header", the primitive name in Graphic Editor after import will also be Header. If the SVG group has no name, the same will be named as <primitive type>_<number>, that is group_01.

• Only three colors are supported in gradients. If the SVG file has more than three colors for primitive, the first, last, and middle colors are considered.

  The middle color is calculated by the formula middle color = (int)((colors.Length) / 2). That is, if there are four colors, then it will consider the second color as middle color.

For a list of supported and unsupported elements, see SVG Limitations.