Adding a Custom SVG Image

Custom images such as company logos and graphic icons can be used to enhance your HMI.

These are imported using the Image Upload tool within the canvas editor.

Images must be Vector (.svg) format and are limited to 2mb in size. Once uploaded, they can be added to the canvas and then resized and recolored if desired.

We'll start by importing a company logo .svg file

Select the "Image" icon from the left-hand toolbar in the Canvas Editor.

Click "Upload" and select the file you wish to import.

Once imported, select your new image from the image selection tool. It will now appear in the canvas editor. You can resize by using the click-and-drag corner nodes of the image or by selecting the image and entering the pixel size in the Properties Panel on the right-hand side. If you wish to change the aspect ratio of the image, click the green "Constraint Proportions" toggle to deselect it. This will now allow the width and height to be adjusted independently and can cause some image distortion.

For the next example, let's add a simple single color .svg icon.

With a single-color .svg image, the fill color can be changed with the color picker from the image's "Properties Panel". While more complex multi-color .svg's can also have the color changed, the results are less predictable. 

• Related Articles

• Getting Started - Understanding The SimpliScada HMI Design Editor

  The SimpliScada Design Studio is a fully web-based editor that requires no installation. Simply log into the web application to begin designing your HMI screens. The Design Studio editor is divided into three main areas: Main Canvas (Center): ...

• Importing Bulk Tags via Spreadsheets

  The SimpliScada Import Tag Tool allows users to import multiple tags at once using a spreadsheet. This method is significantly faster than creating tags individually. To create a correctly formatted spreadsheet, first create a few tags manually. Then ...

• Adding Tags to a Project

  Tag Addresses are the foundations of your project. They are the reference points that allow sensor information to interact with objects in the HMI. The actual address format will vary depending on the communication protocol used by your PLC. In this ...

• Alert Thresholds - Adding Time Delay or Comparison Conditions

  SimpliScada introduces Conditional Thresholds, enabling more intelligent and flexible alerting. With this feature, threshold conditions can be modified using either a time delay or a comparison to another tag value. Time Delay The Time Delay ...

• Scaling a Value

  What Is Scaling? Scaling is the process of converting a raw signal (the numeric value sent by a PLC or sensor) into a real-world engineering value that operators can understand and use. Scaling is used when a system receives a raw input from a ...