SVG Editor Tools

This topic describes SVG editor tools.

You can modify SVG files using the SVG editor's user-friendly interface.

Side Toolbar Options

Tool Description
Select Tool Allows you to select and move objects within the editing area.
Zoom Tool Zoom in/out to view objects at different levels of detail. It helps to perform precise edits and adjustments.
Panning Helps to pan around when used along with the zoom tool.
Pencil Tool Use this tool to create any shape or design. You can draw and create custom shapes by dragging the mouse.
Line Tool To create a perfectly vertical or horizontal straight line, hold down the Shift key while drawing the line.
Path Tool Use the tool to draw a path creating additional points along the way. A path has a start point, end point, and curve parameters of the path. To create the shape you want, mouse-click and drag. To end the path, double-click.
Square/Rectangle Tool Create squares or rectangles of different sizes. Useful for creating basic geometric shapes. Hold down the Shift key while drawing to create a perfect shape.
Ellipse/Circle Tool Create ellipses or circles of different sizes.
Text Tool Allows you to add and edit text within the editing area. Useful for adding labels, annotations, etc.
Shape library Contains ready-to-use shapes such as geometric shapes, mathematical shapes, flowchart shapes, etc.
Polygon/Star Tool The polygon tool allows you to create polygon shapes.

The star tool allows you to create star shapes. You can resize these shapes without losing their sharpness and quality.
Eye Dropper Tool Use the tool to pick a color from an existing object. You can now use the picked color for other elements as well.

Top Toolbar Options

The options in the top toolbar may vary based on the selected objects.
Tool Description
Document Properties In the document properties dialog, you can modify the SVG document settings.
Import SVG Allows to select and import an SVG file containing shapes, text, and/or images to Operations Hub and add interactive animation using our SVG editor.

This option allows you to use SVG files created using third party tools, such as Microsoft Powerpoint, Adobe Illustrator, Inkscape, Figma, etc. These are fixed SVG images and do not contain any animation. Such SVGs when imported may get slightly altered to match our SVG format. For example, tspan elements are converted to <text> elements.

You can also modify third party SVGs by editing its source code.
Export SVG Allows to export the SVG file and save as HMI graphic.
Import Image Allows to import an image file. For example, PNG, JPEG, etc.
Editor Preferences In the editor preferences dialog, you can modify the SVG background, units of measurement, and grid settings.
Edit Source Opens a code editor, wherein you can make changes to the source code and save it.
Wireframe Mode When you switch to the wireframe mode, visual distractions such as color, texture, and other design elements are removed. This helps to focus on the layout, positioning, and hierarchy of elements, and make adjustments as necessary. Once the basic structure is in place, you can switch back to the normal mode, and continue working on other design elements.
Show/Hide Grid Shows/hides the grid layout.
Undo and Redo These buttons allow you to undo or redo changes you've made to the canvas.
Duplicate Element Duplicates the selected element.
Delete Element Deletes the selected element.
Bring to Front When objects overlap on the page, brings the selected object to the front.
Send to Back When objects overlap on the page, sends the selected object to the back.
Convert to Path You can convert an object to a path. This option is used along with the path editing tools to turn a simple shape/text into a complex vector shape. Consider these points when using the tool:
  • Once you convert an object to a path, you cannot easily convert it back to its original form.
  • Converting an object to a path can make the file size larger.
Reorient Path Allows you to change the orientation or direction of a path for the selected object, either clockwise or counterclockwise. It is useful when you want to change the starting point or direction of a path without having to redraw it.
Identify the element When using multiple objects in SVG, this option identifies the selected object within the editing area.
Element class You can use defined classes to apply styles or behaviors to various elements in SVG file.
Change rotation angle Rotates the selected object to the selected degrees.
Change gaussian blur value Increases the blur effect on the object based on the increasing value.
Align Use the alignment options to position objects within the editing area. Select one or more objects you want to align, and then choose the appropriate alignment option.
Change X/Y coordinate Enter the X and Y coordinates of an object to move it to a new position within the editing area.
  • X coordinate represents the horizontal position of the object.
  • Y coordinate represents the vertical position of the object.
Link Control Points Applies to curved paths. You can link the control points to create complex curves and adjust the shape of a path.
Change node's X/Y coordinate Applies to nodes in a path. Nodes are the points that define the shape of a path. This option allows you to select a node and set its X and Y coordinates within the path.
Clone Node Clones the selected node.
Delete Node Deletes the selected node.
Text formatting tools Select the text element to access tools to perform the following functions:
  • Choose from a variety of fonts available in the editor.
  • Adjust the size of your text to make it larger or smaller.
  • Change the style of your text to bold, italic, underlined, etc.
  • Align your text.
  • Adjust the spacing between letters and lines.

Bottom Toolbar Options

Tool Description
Change zoom Level Allows you to zoom in and out of the editing area for more precise editing. Use the preset options to apply the zoom level.
Change fill Color To change the fill color, select the shape/object and from the color palette, choose a color to fill the shape/object.
Change stroke Color To change the stroke color, select the shape/object and from the color palette, choose a color to apply to the shape/object.
Change stroke width by 1, shift-click to change by 0.1 Allows to change the width of the stroke.
Change stroke dash style Select the line/shape to change its stroke dash style and apply a new style (dots, dashes, etc.) from the available preset options.
Linejoin You can set any of these linejoin options to set the corners of a shape/line:
  • Miter: At the meeting point of two lines, applies a pointed corner.
  • Round: At the meeting point of two lines, applies a rounded corner.
  • Bevel: At the meeting point of two lines, applies a flat and beveled corner.
Linecap You can set any of these linecap options to set the ends of a line:
  • Butt: Applies a flat end to the line that is perpendicular to the direction of the line.
  • Square: Applies a flat end to the line that is slightly wider than the line itself.
  • Round: Applies a rounded end to the line.
Change selected item opacity Select the item (shape, line, group of objects, or any other element in your SVG file) for which you want to modify the opacity. Set the opacity percentage for the item.
Click to change fill color, shift-click to change stroke color Allows to change the color.