Documentation

Quick start

1. Load an SVG — drag and drop onto the canvas, or use Load SVG in the toolbar. The file is cleaned up and optimised automatically on import, and any missing element IDs are generated for you.
2. Select an element — click it on the canvas or in the element tree. Ctrl-click or Shift-click to select several and edit them together.
3. Add a binding — in the Bindings panel, choose Add Binding and pick a type. Give it a parameter name; that name is what the faceplate exposes to WinCC.
4. Simulate — open Simulate to get a control per parameter and watch the drawing react. A free account is required. Closing the drawer returns the canvas to your design.
5. Export — Export .svghmi produces a production-ready file for TIA Portal, with your parameters declared and ready for the faceplate.

All five steps on one graphic:Show a motor as running, stopped or faulted.

Navigating the canvas

• Zoom — mouse wheel over the canvas, a trackpad pinch, the − / + buttons at the bottom left, or the + and − keys. On a touch screen, pinch with two fingers.
• Fit — press 0, or click the percentage readout or the fit button. “100%” means the drawing fits the panel, whatever size the file was drawn at, so even very small graphics fill the workspace.
• Pan — hold Space and drag, which works anywhere including on top of a shape. Middle-mouse drag and left-drag on empty background do the same. Left-dragging a shape without Space moves the shape.

Zoom and pan affect only the preview, never the exported file.

Binding types

A binding links one property of an element to a parameter that the faceplate offers in WinCC. The parameter type tells you what the faceplate will ask for.

Every type with an example has its own page — what it does, when to reach for it, and the tutorials that use it. Start from the tutorial index.

Conditional colours

Four binding types drive a colour from something other than a colour parameter. Pick the one that matches the shape of your PLC data:

• Cond. Fill / Stroke (Boolean) — one boolean, two colours. “Red when the alarm bit is set, grey otherwise.”
• Cond. Fill / Stroke (Multi-Bool) — a list of boolean parameters, each with its own colour, plus a fallback. The first parameter that is true wins, so put the highest-priority condition at the top.
• Cond. Fill / Stroke (Number) — one integer parameter and a table of value → colour rows, plus a fallback. This is the one to use when the PLC publishes a state number.

A colour slot can be Fixed — chosen here at design time — or Param, which creates an HmiColor parameter so WinCC supplies the colour at runtime.

Priority order in practice, on two limit switches:Show a valve as open, closed, travelling or faulted. Reference for the type: Cond. Fill (Multi-Bool).

Driving colour from a PLC state number

A common pattern: the PLC writes a single integer for the state of a device, and each state should show a different colour. Use Cond. Fill (Number):

1. Select the shape and add a Cond. Fill (Number) binding.
2. Set the parameter name to whatever the faceplate should expose — for example State.
3. Add one row per state. Each row is a value and a colour: 0 → red, 1 → amber, 2 → green.
4. Set the fallback colour for any value not listed.

Rows are evaluated top to bottom and the first match wins, so a duplicated value makes the later row unreachable. Switch the simulation on and step the parameter through your states to check the result before exporting.

The same pattern end to end, with a file to open:Show machine states from a PLC status word.

Colour palette

The Palette tab holds named colours — an alarm red, a house grey — so you do not have to retype a hex value every time.

Give each colour a name and a value in the Palette tab. Those swatches then appear underneath every colour picker in the Bindings panel: default fill and stroke colours, the active and default colours of a boolean conditional, and each row of a multi-bool or numeric colour map. Click a swatch to apply it.

The palette is a design-time convenience. It is stored in your browser only, is never uploaded, and does not appear in the exported .svghmi — applying a swatch simply writes that hex value into the binding. If you want a colour that WinCC controls at runtime, switch the colour slot to Param instead.

Simulation

Opening the simulation requires a free account, like exporting and viewing the XML. The simulation drawer lists every parameter your bindings created and gives each one a control matched to its type: a colour picker for HmiColor, a toggle for boolean, a slider and a number box for number, a text field for string.

Simulation affects the preview only — never the file you export. Closing the drawer restores the unsimulated drawing, and removing a binding immediately undoes whatever it was showing.

Editing

• Group and ungroup, reorder with bring-forward and send-backward, copy and paste.
• Drag a shape on the canvas to move it; drag a row in the element tree to reparent it.
• Undo and redo cover 50 steps. A colour drag or a typed parameter name costs one step, not one per keystroke.
• The Attributes panel edits the properties of the selected element directly.
• Select several elements to add or edit a binding on all of them at once. Where their values differ the field shows Mixed and stays empty until you deliberately set it.

Importing an existing widget

Loading a .svghmi file reconstructs its bindings, events, parameters and metadata, so you can pick up a widget you exported earlier and keep working. Changes made to a file by hand outside DynSVG may not survive re-import, so keep a copy of anything you edited elsewhere.

Free tier

The free tier allows three bindings per widget. Loading a file with more keeps the first three. See the Terms of Service for the licence conditions on exported files.

Something missing?

Use the feedback button in the editor header to send us your thoughts. New features are listed in the changelog.