Overview
SVG‑Image.com is a web tool that lets you upload an SVG, edit shapes and styling, define HMI parameters and actions, then export to a Siemens‑compatible .SVGHMI file.
Purpose: go from a designer’s SVG to a production‑ready graphic for WinCC Unified without hand‑editing XML.
File Requirements
Accepted file type: .svg ONLY. Raster images (PNG/JPG), PDFs, and other formats are not supported for upload.
- Prefer clean SVGs without external CSS, scripts, or animations.
- Use vector shapes (
rect,circle,polygon,path,text); avoidforeignObject. - Colors should be convertible to Siemens ARGB
0xAARRGGBB.
Quick Start
Upload your SVG using Upload SVG (top‑right). You can upload multiple SVGs; select one to edit.
Adjust the canvas from SVG Properties: set width/height, viewBox, and the preview background.
Select an element from the Element Selection dropdown or by clicking it in the preview.
Edit properties under Element Properties: position, size, fill, stroke, and rotation/pivot.
Add parameters/actions in Actions & Parameters. Bind actions to parameters.
Export via Download (.SVGHMI) or Download ZIP when handling multiple files.
The Interface
Header
- Upload SVG — choose one or more SVGs.
- Demo — launches a guided walk‑through.
- Clear All — removes current uploads and restores the demo SVG.
- Language — switch UI language if available.
Preview Area
- Live SVG canvas for selecting, dragging, and drawing.
- Shows a horizontal preview strip when multiple files are uploaded.
- Click‑Inspector readouts display SVG and element‑local coordinates.
SVG Properties
- Width/Height sliders with live values.
- viewBox control (minX minY width height).
- Background color for preview only.
Element Selection
- Choose SVG Container or a specific shape.
- Selection info mirrors the active element.
Clipboard
- Copy, Paste, Duplicate, Delete.
- Undo/Redo via keyboard: Ctrl/Cmd + Z / Ctrl/Cmd + Y.
Element Properties
- Position: X and Y sliders.
- Fill & Stroke color pickers + brightness/contrast.
- Stroke width control.
- Size controls with horizontal/vertical anchors.
- Contextual diameter/length for circles and lines.
Rotation & Pivot
- Angle slider (−180° … +180°).
- Pivot X/Y with quick‑set: Use click as Pivot or Use center as Pivot.
Actions & Parameters
- Create parameters (
HmiColor,boolean,string,number) with defaults. - Add element actions and bind them to parameters.
- Remove parameters and actions as needed.
Editing Basics
- Select an element via dropdown or by clicking it on the canvas.
- Drag shapes directly; use sliders for precise values.
- Anchored resize: pick left/right and/or top/bottom anchors to keep specific edges fixed while resizing.
- Colors: choose fill and stroke; adjust brightness/contrast to fine‑tune visual weight.
- Rotation: set angle and pivot. Use a canvas click to place the pivot precisely.
Some SVG features are intentionally restricted for SVGHMI compliance: scripts, animations, and
foreignObject are not exported.
Insert / Draw Tools
Switch the Insert dropdown from — Select / Move — to a shape to start drawing. Hold Shift to constrain.
| Tool | How it works |
|---|---|
| Rectangle / Ellipse | Click‑drag to size. Shift for a square/circle. |
| Circle | Click‑drag radius from the start point. |
| Line | Click‑drag; Shift locks horizontal/vertical. |
| Polyline / Polygon | Click to add points, Enter to finish; Esc cancels. |
| Path (Freehand) | Click‑drag to draw a freehand curve. |
| Text | Click once, type the label in the prompt, commit. |
Pre‑draw options: choose a draw color and whether to use it as Fill (else the shape is transparent fill with a colored stroke).
Actions & Parameters
Create a parameter
- Enter a Name (e.g.,
FillColor01). - Pick a Type:
HmiColor,boolean,string, ornumber. - Set a Default value (e.g.,
0xFFAABBCCfor colors). - Click Add parameter.
Add & bind an action
- Select an SVG element in the canvas or dropdown.
- Choose an action from Add Action and click Add action to element.
- Pick a parameter and an action in their lists.
- Click Bind selected action ⇄ parameter.
Tip: Use descriptive names like
ValveOpen, TankLevel, or BtnFillColor to keep bindings readable.
Multi‑File Mode
When you upload more than one SVG, the editor enters a streamlined preview mode:
- A horizontal strip shows each file’s thumbnail.
- Use Select All / Select None to manage bulk downloads.
- Select exactly one file to re‑enable editing controls.
Export & Downloads
- Download SVG — exports the current file as raw SVG.
- Download (.SVGHMI) — exports Siemens‑ready SVGHMI with required namespaces and DTD.
- Download ZIP (SVGHMI) — packs selected files into a ZIP (great for multi‑file workflows).
- Reset View — reverts edits for the current session.
Shortcuts
| Action | Shortcut |
|---|---|
| Undo / Redo | Ctrl/Cmd + Z / Ctrl/Cmd + Y |
| Copy / Paste / Duplicate | Ctrl/Cmd + C / Ctrl/Cmd + V / Ctrl/Cmd + D |
| Finish polyline/polygon | Enter |
| Cancel drawing | Esc |
| Constrain while drawing | Shift |
SVGHMI Compliance
- Exports with Siemens DTD and HMI namespaces;
preserveAspectRatio="none"where required. - No inline scripts, animations, or
foreignObjectin exports. - Colors map to Siemens ARGB via converter bindings.
Tips & Troubleshooting
- If the element list doesn’t refresh after edits, re‑select the element or use Reset View.
- Prefer simple paths and shapes; extremely complex paths can be harder to bind.
- When resizing, set anchors to keep critical edges fixed.
- Use the pivot tools to rotate around exact hinge points.
Reminder: upload SVG only. Convert other formats to SVG before using this tool.
FAQ
Can I upload PNG/JPG?
No. The site accepts SVG only. Convert raster images to vector SVG before uploading.
Why does my color look different in SVGHMI?
Ensure your colors are expressible as Siemens ARGB (0xAARRGGBB) and avoid unsupported filters or blend modes.
How do I duplicate elements quickly?
Select the element and press Ctrl/Cmd + D.
How do I keep the right edge fixed while resizing?
Enable the Right anchor before adjusting width.