SVG → SVGHMI Converter

SVG Preview

SVG Properties

Height: 300px

ViewBox:

Background:

Width: 400px

Draw Color:

Fill shapes with this color (else transparent)

Insert:

Tip: Esc cancels, Enter finishes polyline/polygon, hold Shift to constrain while drawing.

Element Selection

Selected: SVG Container

Clipboard

Shortcuts: Ctrl/Cmd + Z (Undo)Ctrl/Cmd + Y (Redo)Ctrl/Cmd + C (Copy), Ctrl/Cmd + V (Paste), Ctrl/Cmd + D (Duplicate) + or (use mouse)

Element Properties

X Position: 0

Y Position: 0

Fill Color:

Fill Brightness: 0

Fill Contrast: 100

Stroke Color:

Stroke Brightness: 0

Stroke Contrast: 100

Stroke Width: 2

Width:0

Horizontal Anchor: Left Right If none: center

Height:0

Vertical Anchor: Top Bottom If none: center

Size: 50

Rotation & Pivot

Angle (°): 0°

pivotX: 0

pivotY: 0

Click Inspector

SVG X: —

SVG Y: —

Element-local X: —

Element-local Y: —

Actions & Parameters

Add Parameter:

Type:

Default:

Tip: HmiColor default like 0xFFAABBCC

Parameters

Actions (selected element)

Add Action:

📁 Upload SVG

Uploaded Files

Editing tools are hidden in multi-file mode. Select exactly one file to re-enable editing.

Previewing the first file. To edit, select a single file.

SVGHMI Compliance Highlights

Exports with Siemens DTD + required HMI namespaces; preserveAspectRatio="none".
No inline CSS/styles, scripts, animations, or foreignObject; allowed SVG only.
Colors as Siemens ARGB (0xAARRGGBB) via Converter.RGBA(...) binds.