WinCC hat ein eigenes Format für dynamische SVG-Dateien. Das Format heißt SVGHMI. Leider gibt es bisher keinen Editor für dieses Format.
Die Dateien können aber aus SVG-Dateien händisch per Texteditor erstellt werden.
Für das Erstellen der Grafiken kann Inkscape verwendet werden. Die Grafik muss als „Optimiertes SVG“ gespeichert werden. Danach muss die SVG-Datei mit einem Texteditor geöffnet werden.
Der Kopf (Tag <svg...) wird mit dem Kopf von Siemens ersetzt (viewBox darf nicht überschrieben werden).
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
xmlns:hmi="http://svg.siemens.com/hmi/"
xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
xmlns:hmi-element="http://svg.siemens.com/hmi/element/"
xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"
xmlns:hmi-event="http://svg.siemens.com/hmi/event/"
viewBox="0 0 49.136913 49.136902"
preserveAspectRatio="none"
height="185.71428"
width="185.71432">
Vor <defs... werden die Dynamikparameter definiert. Für zwei Farben sieht es folgendermaßen aus:
<hmi:self type="widget" displayName="Testing" name="extended.Testing" version="1.0.1" performanceClass="L">
<hmi:paramDef name="FarbeKreis" type="HmiColor" default="0xFF000000" />
<hmi:paramDef name="FarbeRechteck" type="HmiColor" default="0xFF000000" />
</hmi:self>
Soll Text in einer Grafik dynamisiert werden, lautet die Definition des Parameters <hmi:paramDef name="BasicText" type="string" default="123" />.
Die definierten Parameter können dann an die entsprechenden Stellen mit hmi-bind:fill="{{Converter.RGBA(ParamProps.BasicColor)}}" (für die Füllung) eingefügt werden. Text kann mit <hmi:text hmi-bind:value="{{ParamProps.BasicText}}" /> dynamisiert werden.
Beispiel:
<g
transform="translate(-27.970234,-33.92857)"
id="layer1">
<circle
r="21.544643"
cy="55.473213"
cx="49.514877"
id="path815"
style="opacity:1;stroke-width:0.26458332;fill:#ff0000"
hmi-bind:fill="{{Converter.RGBA(ParamProps.FarbeKreis)}}" />
<rect
y="52.827377"
x="46.869053"
height="30.238094"
width="30.238094"
id="rect817"
style="opacity:1;fill:#00ff00;stroke-width:0.26458332"
hmi-bind:fill="{{Converter.RGBA(ParamProps.FarbeRechteck)}}" />
</g>
Soll z.B. die Farbe des Rands verändert werden, heißt die Eigenschaft hmi-bind:stroke.
Die Datei muss dann mit der Endung SVGHMI gespeichert werden und in den GraCS-Ordner platziert werden. Im Graphics Designer kann die Grafik dann als SVG-Objekt eingebunden werden (nicht als Grafik-Objekt).
Die Dynamisierungen können über die Symboleigenschaften verändert werden.
| Grafik in Inkscape | Einstellungen im Graphics Designer | Grafik in Runtime |
 |  |  |
Es wird somit aus der SVG-Datei
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="185.71432"
height="185.71428"
viewBox="0 0 49.136913 49.136902"
version="1.1"
id="svg8">
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-27.970234,-33.92857)"
id="layer1">
<circle
r="21.544643"
cy="55.473213"
cx="49.514877"
id="path815"
style="opacity:1;stroke-width:0.26458332;fill:#ff0000"
/>
<rect
y="52.827377"
x="46.869053"
height="30.238094"
width="30.238094"
id="rect817"
style="opacity:1;fill:#00ff00;stroke-width:0.26458332"
/>
</g>
</svg>
die SVGHMI-Datei
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
xmlns:hmi="http://svg.siemens.com/hmi/"
xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
xmlns:hmi-element="http://svg.siemens.com/hmi/element/"
xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"
xmlns:hmi-event="http://svg.siemens.com/hmi/event/"
viewBox="0 0 49.136913 49.136902"
preserveAspectRatio="none"
height="185.71428"
width="185.71432">
<hmi:self type="widget" displayName="Testing" name="extended.Testing" version="1.0" performanceClass="L">
<hmi:paramDef name="FarbeKreis" type="HmiColor" default="0xFF000000" />
<hmi:paramDef name="FarbeRechteck" type="HmiColor" default="0xFF000000" />
</hmi:self>
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-27.970234,-33.92857)"
id="layer1">
<circle
r="21.544643"
cy="55.473213"
cx="49.514877"
id="path815"
style="opacity:1;stroke-width:0.26458332;fill:#ff0000"
hmi-bind:fill="{{Converter.RGBA(ParamProps.FarbeKreis)}}" />
<rect
y="52.827377"
x="46.869053"
height="30.238094"
width="30.238094"
id="rect817"
style="opacity:1;fill:#00ff00;stroke-width:0.26458332"
hmi-bind:fill="{{Converter.RGBA(ParamProps.FarbeRechteck)}}" />
</g>
</svg>