Cómo crear un SVG dinámico (SVGHMI) para WinCC Unified y V8: guía paso a paso, manual o con IA

Piensa en el dibujo de un tanque en la pantalla de una máquina. Una imagen normal siempre muestra el mismo nivel. Un SVG dinámico permite que el líquido suba y baje según un número, con el mismo dibujo. También sirve para indicar si una válvula está abierta, cambiar el color de un motor o mostrar una pieza solo cuando hace falta.

SVG es un formato de imagen hecho de formas y líneas, por eso se puede ampliar sin pixelarse. Para que WinCC Unified pueda cambiar partes del dibujo, el archivo declara unas entradas llamadas parámetros y se guarda con la extensión .svghmi. En TIA Portal aparece en la paleta Widgets dinámicos (Dynamic widgets).

Un parámetro es un ajuste que el autor deja disponible. En este tanque se llama FillLevel y acepta un número de 0 a 100: con 50, el líquido llega a media altura. Más adelante lo conectarás a TankLevel, una variable HMI: el lugar donde el proyecto guardará el número que escribas. Son dos nombres distintos porque uno pertenece al dibujo y el otro al proyecto.

Cada recurso tiene sus propios parámetros. La descarga de esta guía incluye solo FillLevel. Los ejemplos de color y visibilidad del esquema muestran otras posibilidades de los SVG dinámicos; no son ajustes de este archivo.

Siemens · Creación de gráficos SVG dinámicos (109782045)Siemens · Gestión de gráficos SVG dinámicosSiemens · Gráficos SVGHMI en WinCC V8

Necesitas TIA Portal con WinCC Unified (los pasos se muestran en V21.1) y su simulación o Unified PC Runtime, el programa que ejecuta la pantalla. Usarás una variable interna, que vive dentro de la HMI, así que no hace falta un PLC.

Activa en Windows la opción de ver las extensiones de archivo (Explorador → Vista → Mostrar → Extensiones de nombre de archivo). Así verás si el archivo termina realmente en .svghmi y no en .svghmi.txt, el error más habitual al guardarlo.

1. 1

   Dónde · Explorador de archivos → carpeta de trabajo

   Descarga el tanque y guarda una copia de trabajo

   Descarga HmixHorizontalTank.svghmi con el botón de este apartado. Es un único archivo: no hay que descomprimir nada. Guarda el original y copia el archivo en una carpeta llamada MiTanque. Abre la copia con un editor de texto, como Visual Studio Code o Notepad++ (clic derecho → Abrir con). Verás texto porque el dibujo se describe con instrucciones que se pueden editar.

   ✓

   Comprueba: Tienes abierto MiTanque\HmixHorizontalTank.svghmi en el editor.

2. 2

   Dónde · TIA Portal → dispositivo Unified → Imágenes (Screens)

   Deja preparada la pantalla donde lo vas a colocar

   Abre o crea un proyecto de prueba con un dispositivo WinCC Unified. Crea una pantalla vacía llamada PruebaTanque y guarda el proyecto. Anota dónde está su carpeta: por defecto, Documentos\Automation\<NombreDelProyecto>.

   ✓

   Comprueba: Tienes el archivo del dibujo en el editor y la pantalla PruebaTanque en TIA Portal, y sabes dónde está la carpeta del proyecto.

Siemens · Formato SVG admitido y restricciones

El tanque tiene tres partes: un cuerpo fijo, un rectángulo azul que representa el líquido y un recorte con la forma interior del tanque. El recorte funciona como una plantilla: oculta lo que sobresale. Al cambiar el nivel, solo cambia la parte visible del líquido.

Si dibujas un recurso desde cero, crea primero las piezas en un editor vectorial y guárdalo como SVG; después añade la parte HMI (parámetros y enlaces) con un editor de texto, como en este ejemplo. Renombrar un .svg a .svghmi no lo hace dinámico. Aquí ya tienes las piezas dibujadas y vas a adaptar su comportamiento.

1. 1

   Dónde · Editor de texto → buscar (Ctrl+F) id="liquid"

   Localiza la parte que va a cambiar

   Busca id="liquid": es el rectángulo que representa el líquido. El cuerpo y los soportes están en otras líneas y no cambian. El grupo que lo contiene usa clip-path, el recorte que impide que el azul salga del contorno redondeado.

   Cómo se construye el tanque por capas

   1. 1

      Dibujo fijo

      El cuerpo, los soportes y las conexiones no cambian cuando sube el nivel.

   2. 2

      Rectángulo de líquido

      Cambian su altura y la posición de su borde superior. La base permanece abajo.

   3. 3

      Recorte interior

      Solo deja ver el líquido dentro del contorno redondeado del tanque.

   Las capas forman un solo gráfico

   FillLevel = 50

   El líquido llega a media altura y queda recortado en los extremos. El cuerpo y los soportes conservan su forma.

   ✓

   Comprueba: Sabes qué parte es el líquido y por qué puede crecer sin salirse del tanque.

2. 2

   Dónde · Editor de texto → buscar hmi:paramDef

   Encuentra el parámetro y cambia su valor inicial

   Cerca del principio, dentro de <hmi:self>, está la línea que declara FillLevel. type="number" indica que recibe un número y default="50" fija su valor inicial. Cambia solo default="50" por default="25". No cambies el nombre FillLevel: es el que verás en TIA Portal.

   ✓

   Comprueba: Tu variante hará que cada tanque nuevo empiece al 25 % de altura, en lugar del 50 % original.

3. 3

   Dónde · Editor de texto → volver a id="liquid"

   Sigue la conexión entre el número y el líquido

   En el rectángulo hay dos enlaces: hmi-bind:height cambia la altura del líquido y hmi-bind:y mueve su borde superior; juntos mantienen el fondo fijo. Ambos usan SafeLevel, un valor calculado en hmi:localDef con Converter.Bounds, que limita FillLevel entre 0 y 100. Así, aunque llegue 140 o −20, el líquido nunca se sale del tanque. No toques estas líneas.

   ✓

   Comprueba: Entiendes el recorrido completo: el parámetro recibe un número y los enlaces lo convierten en una altura visible.

4. 4

   Dónde · Editor de texto → Guardar

   Guarda el archivo con su extensión completa

   Guarda los cambios (Ctrl+S) con codificación UTF-8, conservando el nombre HmixHorizontalTank.svghmi. Comprueba en el Explorador que no termina en .svghmi.txt. No abras ni guardes este archivo con un programa de dibujo genérico: podría eliminar los atributos hmi: y hmi-bind: que lo hacen dinámico.

   ✓

   Comprueba: Tienes un .svghmi con el dibujo, su parámetro y los enlaces entre ambos, listo para TIA Portal.

En este ejemplo el porcentaje expresa la altura del líquido. En un tanque horizontal, un 25 % de altura no equivale a un 25 % de volumen: para mostrar litros haría falta una conversión según la geometría del depósito.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.8/dtd/svg18-hmi.dtd">
<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/"
     width="400" height="250" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid meet">
  <hmi:self type="widget" displayName="HMIx Horizontal Tank"
            name="extended.HmixHorizontalTank" version="1.0.0">
    <hmi:paramDef name="FillLevel" type="number" default="50" />
  </hmi:self>
  <defs>
    <hmi:localDef name="SafeLevel" type="number"
      hmi-bind:value="{{ Converter.Bounds(ParamProps.FillLevel, 0, 100) }}" />
    <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7f949f" />
      <stop offset="0.28" stop-color="#edf3f5" />
      <stop offset="0.52" stop-color="#bdcbd1" />
      <stop offset="1" stop-color="#667d88" />
    </linearGradient>
    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4cc4df" />
      <stop offset="1" stop-color="#176184" />
    </linearGradient>
    <clipPath id="inside"><rect x="40" y="60" width="320" height="120" rx="60" /></clipPath>
  </defs>
  <!-- One parameter changes liquid height, not volume percentage. -->
  <path d="M100 170L90 220H130L120 170M280 170L270 220H310L300 170" fill="#405866" stroke="#273d49" stroke-width="2" />
  <path d="M86 224H134M266 224H314" stroke="#607987" stroke-width="8" />
  <rect x="180" y="43" width="40" height="17" rx="3" fill="url(#steel)" stroke="#546e7a" />
  <rect x="175" y="54" width="50" height="8" rx="2" fill="#adbec7" stroke="#546e7a" />
  <rect x="40" y="60" width="320" height="120" rx="60" fill="url(#steel)" />
  <g clip-path="url(#inside)">
    <rect id="liquid" x="40" y="120" width="320" height="60" fill="url(#water)"
      hmi-bind:height="{{ LocalProps.SafeLevel * 1.2 }}"
      hmi-bind:y="{{ 180 - LocalProps.SafeLevel * 1.2 }}" />
    <path d="M120 60V180M280 60V180" stroke="#254b60" stroke-opacity="0.22" stroke-width="2" />
    <path d="M55 78H345" stroke="#ffffff" stroke-opacity="0.28" stroke-width="8" />
  </g>
  <rect x="40" y="60" width="320" height="120" rx="60" fill="none" stroke="#546e7a" stroke-width="2" />
  <rect x="354" y="109" width="14" height="28" rx="2" fill="url(#steel)" stroke="#546e7a" />
  <path d="M369 115V131" stroke="#8ea5b1" stroke-width="6" />
</svg>

Siemens · Creación de gráficos SVG dinámicos (109782045)

TIA Portal busca los SVG dinámicos de cada proyecto en una carpeta concreta y los muestra en la paleta Widgets dinámicos, desde donde se arrastran a la pantalla.

1. 1

   Dónde · Explorador de archivos → carpeta de tu proyecto TIA

   Copia el archivo en la carpeta del proyecto

   En la carpeta del proyecto, entra en UserFiles (créala si no existe). Dentro, crea SVGControls si todavía no existe y copia allí tu archivo modificado. El destino es la carpeta del proyecto, no la de instalación de Siemens.

   Dónde guardar el archivo del tanque

   Dentro de la carpeta de tu proyecto

   • Tu proyecto/
     • UserFiles/
       • SVGControls/
         • HmixHorizontalTank.svghmi

   Crea SVGControls si todavía no existe y copia aquí el archivo.

   Después, en el editor de pantallas

   Actualiza la paleta Widgets dinámicos de la task card Herramientas y arrastra el tanque a una pantalla del dispositivo Unified.

   ✓

   Comprueba: La ruta termina en UserFiles\SVGControls\HmixHorizontalTank.svghmi.

2. 2

   Dónde · TIA Portal → PruebaTanque → Herramientas (Tools) → Widgets dinámicos (Dynamic widgets)

   Actualiza la paleta y arrastra el tanque

   Con la pantalla abierta, despliega Widgets dinámicos en la task card Herramientas y pulsa su botón de actualizar. Busca el tanque —se identifica como HMIx Horizontal Tank o por el nombre del archivo, HmixHorizontalTank— y arrástralo a la pantalla. Si no aparece, revisa la ruta del paso anterior antes de continuar.

   ✓

   Comprueba: Tienes una instancia del tanque en PruebaTanque.

3. 3

   Dónde · Tanque seleccionado → ventana de inspección → Propiedades

   Comprueba el parámetro antes de conectarlo

   Con el tanque seleccionado, busca FillLevel en sus propiedades (puedes escribirlo en el buscador de la ventana de inspección). Su valor inicial debe ser 25 si hiciste el cambio, o 50 si importaste el original. Escribe un valor fijo de 50 y confirma: el líquido debe quedar a media altura en el editor de pantallas.

   ✓

   Comprueba: El dibujo responde a un valor fijo: el archivo funciona antes de añadir ninguna variable.

Siemens · Gestión de gráficos SVG dinámicosSiemens · Actualización de SVG dinámicos

Hasta ahora el nivel era un valor fijo. Ahora lo conectarás a una variable que podrás cambiar con la pantalla en marcha: un campo E/S (entrada/salida) escribirá en TankLevel y el tanque leerá esa misma variable a través de FillLevel. No necesitas JavaScript.

1. 1

   Dónde · TIA Portal → dispositivo Unified → Variables HMI (HMI tags)

   Crea la variable que guardará el nivel

   Abre la tabla de variables estándar y añade TankLevel. En la columna Conexión (Connection) elige «Variable interna» (Internal tag) y como tipo de datos uno numérico, por ejemplo Real.

   ✓

   Comprueba: Tu proyecto tiene la variable TankLevel; el archivo SVG sigue teniendo el parámetro FillLevel.

2. 2

   Dónde · PruebaTanque → tanque seleccionado → propiedad FillLevel

   Enlaza el parámetro del tanque a esa variable

   En la columna Dinamización (Dynamization) de FillLevel, elige Variable (Tag) y selecciona TankLevel. Con esto sustituyes el valor fijo de 50 por el valor actual de la variable.

   Del número que escribes al nivel que ves

   1. 1

      Escribes 50 en el campo E/S

      Valor

      50

      El campo de entrada/salida sirve para introducir un número durante la prueba.

   2. 2

      La variable HMI guarda 50

      TankLevel

      50

      TankLevel es una variable interna. Puedes probarla sin conectar un PLC.

   3. 3

      El parámetro FillLevel recibe 50

      FillLevel

      50

      En las propiedades del tanque, enlaza FillLevel a TankLevel.

   4. 4

      El líquido llega a media altura

      50%

      Prueba después con 0 y con 100 para comprobar los dos extremos.

   ✓

   Comprueba: FillLevel obtiene su valor de TankLevel.

3. 3

   Dónde · Herramientas → Elementos (Elements) → Campo E/S (I/O field)

   Añade un campo donde escribir el nivel

   Arrastra un campo E/S junto al tanque. Elige el modo Entrada/salida (Input/output) y enlaza su Valor de proceso (Process value) a TankLevel, la misma variable. Si quieres, añade al lado el texto «Nivel, 0–100 %».

   ✓

   Comprueba: El tanque y el campo numérico usan TankLevel, así que el número que escribas se reflejará en el dibujo.

4. 4

   Dónde · TIA Portal → árbol del proyecto → dispositivo HMI

   Compila, abre Runtime y prueba 0, 50 y 100

   Haz clic derecho en PruebaTanque y elige Definir como imagen inicial. Compila el dispositivo HMI (clic derecho → Compilar → Software), corrige los errores y pulsa Iniciar simulación o carga tu Unified PC Runtime. Inicia sesión en el cliente web con un usuario del proyecto (si no tienes ninguno, créalo en Ajustes de seguridad → Usuarios y roles con un rol HMI y vuelve a compilar). Escribe 0 en el campo E/S y pulsa Intro; repite con 50 y con 100.

   ✓

   Comprueba: Con 0 no se ve líquido, con 50 llega a media altura y con 100 llena el interior. El contorno y los soportes no se mueven.

El deslizador de esta página solo ilustra el comportamiento esperado. No controla tu proyecto de TIA Portal ni sustituye la prueba en Runtime.

• No aparece en Widgets dinámicos: comprueba que el archivo está en UserFiles\SVGControls del proyecto abierto y que termina en .svghmi (no en .svghmi.txt). Pulsa actualizar en la paleta; si sigue sin aparecer, compara el principio del archivo con la descarga original.
• El tanque aparece, pero no encuentras FillLevel: comprueba que lo insertaste desde Widgets dinámicos. Un SVG importado como gráfico normal no tiene parámetros.
• El valor fijo funciona, pero el campo E/S no mueve el líquido: revisa que el campo y FillLevel usan la misma variable TankLevel y que el campo está en modo Entrada/salida. Confirma cada número con Intro.
• No puedes entrar en Runtime: el cliente pide un usuario del proyecto. Créalo en Ajustes de seguridad → Usuarios y roles con un rol HMI, compila y vuelve a cargar.
• No ves tu cambio de 50 a 25: revisa qué copia guardaste en SVGControls. Actualiza la paleta y prueba con una instancia nueva: una instancia existente conserva el valor que ya tenía configurado.
• Se ve distinto que en el navegador: WinCC Unified admite un subconjunto de SVG. Usa formas y efectos admitidos y revisa el resultado en el dispositivo de destino.

Cuando esta prueba funcione, puedes ampliar tu SVG con parámetros de color (HmiColor) o de visibilidad (boolean). Para reutilizarlo en faceplates, consulta el procedimiento de Siemens para crear un tipo de SVG dinámico en una biblioteca.

Siemens · Actualización de SVG dinámicosSiemens · Formato SVG admitido y restriccionesSiemens · SVG dinámicos como tipos de biblioteca

Dibujar un equipo industrial y escribir a mano sus enlaces hmi-bind lleva tiempo. El generador de IA de HMIx (ai.hmix.tech) crea SVG dinámicos para WinCC Unified y V8 a partir de una descripción o de una imagen de referencia: dibuja el símbolo o el equipo, propone los parámetros (nivel, colores, visibilidad, giro) y genera el archivo .svghmi. Puedes empezar gratis con el plan Community.

Lo aprendido aquí sigue siendo útil: la importación desde UserFiles\SVGControls, el enlace de parámetros a variables y la prueba en Runtime son idénticos.

1. 1

   Dónde · ai.hmix.tech → SVG dinámico

   Describe el gráfico que necesitas

   Indica el equipo, la vista y los estados, por ejemplo: «Tanque horizontal de acero inoxidable, vista frontal, nivel de líquido 0–100 % y color del líquido configurable». Elige si quieres un símbolo esquemático (P&ID) o un equipo detallado.

   ✓

   Comprueba: La IA dibuja una primera versión que puedes retocar por chat o en el editor vectorial.

2. 2

   Dónde · Generador → pasos de definición y simulación

   Revisa los parámetros y la simulación

   Comprueba los parámetros propuestos (por ejemplo, un nivel como FillLevel) y muévelos en la simulación para confirmar que el líquido sube desde el fondo y no se sale del contorno.

   ✓

   Comprueba: El dibujo responde en la simulación como esperas.

3. 3

   Dónde · Generador → paso de generación e instalación

   Descarga el archivo .svghmi

   Descarga el .svghmi generado. Es un único archivo, igual que el de esta guía.

   ✓

   Comprueba: Tienes un .svghmi listo para copiar en UserFiles\SVGControls.

4. 4

   Dónde · TIA Portal → Widgets dinámicos

   Impórtalo y pruébalo como aquí

   Sigue los apartados «Importa el SVG dinámico en TIA Portal» y «Conecta una variable» con los nombres de tus parámetros.

   ✓

   Comprueba: Tu SVG generado con IA cambia en Runtime con tus variables.

En el plan gratuito los recursos generados se publican en el catálogo de HMIx para que otros usuarios también puedan usarlos; los planes de pago permiten mantenerlos privados.