Símbolos SVG portables

Construya y comparta símbolos SVG estáticos con vínculos Ganter seguros y bornes de conexión con tipo.

Ver como Markdown

Los símbolos Ganter mantienen separados el dibujo y los datos en vivo. El dibujo es SVG ordinario y estático. Ganter Lab es dueño de todas las correspondencias de valor y de todas las animaciones, así que un archivo importado no puede correr scripts, ni controladores de evento, ni código de animación incrustado, ni peticiones de red. Esta página es la referencia completa del modelo de autoría: qué declara un símbolo, qué acepta y qué rechaza la importación, y cómo viajan los símbolos entre estaciones.

Un símbolo declara tres cosas encima de su dibujo:

  • Zonas activas: entradas con nombre (relleno, contorno, movimiento, texto, visibilidad) que una instancia colocada en un panel de control alimenta después desde una dirección de Logic o con un valor fijo.
  • Bornes: puntos de conexión con tipo en el perímetro, para que el panel de control pueda trazar tuberías, ductos, cables y ejes entre símbolos.
  • Sugerencias: composiciones opcionales con otros símbolos, posadas de forma explícita.

Los símbolos del sistema y Mis símbolos

El catálogo tiene dos orígenes, que se pueden filtrar dondequiera que se listen los símbolos:

Origen Referencia Qué es
Sistema system:<clave-estable> Las bibliotecas integradas que vienen con la aplicación. Se pueden inspeccionar y exportar, y nunca se editan en su lugar.
Míos user:<guid> Los símbolos que usted creó, importó o duplicó. Se pueden editar y eliminar.

Todos los símbolos del sistema ofrecen Duplicar en Mis símbolos: la copia es un recurso de usuario congelado y de propiedad independiente (con el dibujo, la caja de vista, el ajuste, la huella, las zonas activas, las configuraciones de tipo, los bornes y las sugerencias copiados juntos), así que se sigue comportando tal como se eligió incluso cuando una actualización posterior de la aplicación cambie el original. Eliminar un símbolo de usuario pide confirmación; los paneles de control que todavía lo referencian muestran un marcador de posición en lugar de romperse.

Maneras de crear un símbolo

  • Importar un archivo: Logic > Recursos > Símbolos > Importar símbolo acepta un .svg simple o un paquete .ganter-symbol.json completo. Cada importación crea un recurso nuevo con su propia identidad; nunca sobrescribe un símbolo existente, y un choque de nombre se resuelve con un sufijo (" 2", " 3", …) en lugar de fallar. El selector rechaza los archivos de más de 1 MB antes de leer un solo byte. Después de importar un SVG simple, la aplicación reporta cuántos elementos no seguros quitó, si es que quitó alguno.
  • Autorarlo en la aplicación: Nuevo símbolo de usuario abre un editor para el nombre, el marcado SVG, la disposición en el panel de control (el ajuste y la huella inicial) y las zonas activas; una vez que el símbolo existe, los cambios válidos se guardan solos. La geometría de los bornes no se puede editar en la aplicación a propósito: los bornes con tipo solo los puede aportar un paquete, y los bornes definidos por un paquete se conservan de solo lectura a lo largo de las ediciones posteriores.
  • Pedírselo a una IA: dos caminos comparten exactamente el mismo contrato. Sobre el punto de conexión MCP integrado, la herramienta symbol_validate hace un ensayo de la importación y symbol_import guarda un recurso nuevo; las dos llevan el contrato completo en sus descripciones. Desde un chat externo sin ningún acceso a la aplicación, Copiar la instrucción para el chat, en el panel de Símbolos, copia una indicación autosuficiente; guarde el SVG o el paquete devueltos como un archivo e impórtelo aquí.

Vea Logic para el espacio de recursos que lo rodea.

Preparar un SVG simple

Dele a cada parte que quiera vincular un id de SVG estable. Después de importar, esos ids aparecen en los selectores de destino de las zonas activas. Los ids y los nombres de zona activa comparten una sola gramática: empiezan por una letra o un _, siguen con letras, dígitos, _, ., : o -, y tienen 128 caracteres como máximo.

Los atributos data-ganter-* opcionales son el único marcado propio de Ganter que puede llevar un símbolo:

Atributo En Qué declara
data-ganter-pivot="x y" cualquier elemento vinculable El punto de pivote exacto (en coordenadas de la caja de vista) para las zonas activas de rotar, escalar y girar. Obligatorio en el elemento de destino de esas tres clases.
data-ganter-spin-ratio un hijo de un elemento que gira La velocidad relativa de un rotor hijo visible. Finita, distinta de cero y de magnitud 100 como máximo; en negativo gira al revés. Se quita salvo que el elemento declare además su propio pivote.
data-ganter-role cualquier elemento Un rol semántico estable para las herramientas de autoría. Solo informativo.
data-ganter-fit-width <text> / <tspan> Un visor acotado opcional para una zona activa de Texto: cuando el texto vinculado mide más ancho que esas unidades de la caja de vista, la fuente se encoge para caber.
data-ganter-fit-min-font-size <text> / <tspan> El tamaño de fuente más pequeño al que se puede encoger el ajuste. Por debajo de él, el elemento muestra el texto de respaldo mientras el valor completo se queda en el nombre accesible y en la información emergente.
data-ganter-fit-fallback <text> / <tspan> El texto que se muestra cuando ni siquiera el tamaño de fuente mínimo alcanza para el valor.

Los bornes de conexión no viven en el SVG y no apuntan a ids de elemento SVG. Los atributos llamados data-ganter-port o data-ganter-port-* no forman parte del formato: una importación de SVG simple los quita, y un paquete estricto que los contenga se rechaza.

Una importación de SVG simple siempre da un símbolo solo visual válido: cero bornes y cero zonas activas. El inspector reporta que no existe ningún borne conectable porque no se declararon el rol, el tipo, la orientación externa ni el trayecto interno. Ganter no deduce esos campos del nombre del archivo, de la categoría ni del dibujo, y no abre ningún editor interno de bornes ni de trayectos.

Qué acepta el depurador

La misma política de SVG aplica en todos los caminos (importar un archivo, el editor de la aplicación, MCP, un paquete). Es deliberadamente más pequeña que SVG:

  • Se conserva: la geometría y la estructura inertes: svg, g, defs, symbol, use, path, rect, circle, ellipse, line, polyline, polygon, text, tspan, title, desc, clipPath, mask, linearGradient, radialGradient, stop, pattern, marker, con los atributos de presentación (relleno, contorno, opacidad, transformación, estilo) y las etiquetas ARIA.
  • Se quita o se rechaza: <script>, <style>, <foreignObject>, los controladores de evento, la animación incrustada, y cualquier URL externa o data:/file:/http(s). Solo sobreviven las referencias internas url(#id) y href="#id".
  • Los límites: el marcado puede tener 512 KB y 4096 elementos como máximo.

Las pinturas seguras son los colores hexadecimales, los colores con nombre de CSS, rgb()/rgba()/hsl()/hsla(), y los tokens de tema de la aplicación var(--color-<nombre>) (por ejemplo var(--color-success), var(--color-symbol-off)). Los tokens de tema son la manera en que un mismo dibujo se adapta al claro y al oscuro: entregue un solo dibujo que referencie tokens, nunca dos variantes por tema.

Cómo se tratan las infracciones depende del camino: un SVG simple se repara (los elementos no seguros se quitan y cada retiro se reporta como una advertencia); un paquete es estricto y se rechaza nombrando las primeras infracciones, en lugar de repararse en silencio.

El paquete portable v2

Exportar un símbolo crea un archivo .ganter-symbol.json. Todos los campos del sobre son obligatorios; los tres arreglos del contrato pueden estar vacíos, pero tienen que estar presentes:

Campo Requisito
$schema Exactamente https://ganterlab.com/schemas/ganter-symbol-v2.schema.json.
format Exactamente ganter-symbol.
version Exactamente 2. Los paquetes de la versión 1 se rechazan en lugar de pasarse por un intérprete heredado.
name El nombre visible. Una importación lo puede invalidar, y un choque recibe un sufijo automático.
svg SVG estático depurado cuyo elemento raíz lleve un viewBox igual al del campo viewBox.
viewBox minX minY ancho alto: cuatro números finitos con ancho y alto positivos.
fit contain, stretch, stretch-x o stretch-y.
footprint { "width": 1..24, "height": 1..12 }, las celdas sugeridas del panel de control.
slots Un arreglo de declaraciones de zona activa (más abajo).
typeConfigurations Un arreglo de elecciones de tipo compartidas para los bornes (más abajo).
terminals Un arreglo de hasta 16 bornes completos (más abajo).
suggestions Un arreglo de composiciones autoradas y ordenadas (más abajo).

El esquema JSON público de Ganter symbol v2 valida el sobre del transporte. El importador hace después las verificaciones semánticas que un esquema JSON no puede expresar: que el destino exista en el SVG, la geometría del trayecto interno y la compatibilidad de las sugerencias. Un paquete es estricto en todas las dimensiones: el marcado no seguro, los campos desconocidos, las entradas nulas de un arreglo y los contratos antiguos ports[], anchors[], profile y connectionStyle se rechazan en lugar de repararse.

El paquete nunca contiene una dirección de la estación, ni un vínculo de panel de control, ni una elección de tipo por instancia, ni un GUID de base de datos, ni una identidad de usuario. Una zona activa que lleva una dirección de Logic ni siquiera se puede exportar: la dirección pertenece a la instancia colocada, no al símbolo reutilizable.

El tamaño, la caja de vista y el ajuste

La caja de vista es el espacio de coordenadas natural del símbolo. Los bornes y los trayectos internos se declaran en ella, y tiene que coincidir exactamente con el viewBox propio de la raíz del SVG; un paquete cuyas dos cajas de vista no concuerdan se rechaza. Las cajas de vista no cuadradas se admiten por completo, así que una banda transportadora larga no tiene que vivir dentro de un cuadrado.

El modo de ajuste dice cómo usa el dibujo el rectángulo de panel de control que dibuja el operador:

Ajuste Comportamiento
contain Conserva la proporción; el dibujo queda con bandas dentro del rectángulo de celdas. El valor inicial.
stretch Llena el rectángulo en los dos ejes, y distorsiona si hace falta.
stretch-x Se estira en horizontal y conserva la proporción vertical natural.
stretch-y Se estira en vertical y conserva la proporción horizontal natural.

La huella es el tamaño inicial en celdas de la cuadrícula del panel de control cuando el símbolo se coloca por primera vez: de ancho 1 a 24 y de alto 1 a 12 (el editor arranca en 4 × 4). Es una sugerencia, no una restricción; el operador cambia el tamaño libremente después.

Dos compuertas separadas acotan el tamaño de una importación: el selector de archivos rechaza cualquier cosa de más de 1 MB antes de leerla, y el depurador rechaza el marcado de más de 512 KB o de más de 4096 elementos.

Las zonas activas, la superficie de vínculo

Una zona activa declara una entrada: qué elemento mueve, qué le hace, y cómo se corresponden los valores de entrada con los de salida. La instancia colocada en un panel de control elige después la fuente de cada zona activa (una dirección de Logic o un valor fijo); el símbolo mismo nunca guarda ninguna fuente.

Cada zona activa lleva:

Campo Significado
name El nombre de parámetro que se le muestra al autor del panel de control. La gramática de identificador de arriba; único entre las zonas activas del símbolo.
elementId El id de un elemento SVG existente. Un elemento acepta como máximo una zona activa por canal, así que dos zonas activas no se pueden pelear por el relleno del mismo elemento.
kind Una de las trece clases de abajo.
inMin, inMax El rango de entrada: los dos valores que corresponden a outMin/outMax. Números finitos; los usan las clases continuas, y fill/stroke los usan como punto medio del umbral.
outMin, outMax El rango de salida en la unidad de la clase (grados, unidades de la caja de vista, 0..1, grados por segundo). Números finitos.
outMinSecondary, outMaxSecondary Un segundo eje de salida opcional, solo para translate y scale: la salida primaria es X y la secundaria es Y. Los dos o ninguno.
onColor, offColor Pinturas seguras para fill/stroke (los dos estados del umbral). Para fillColor/strokeColor, onColor es el color de la vista previa del inspector.

Las trece clases de zona activa:

Clase Qué mueve Notas
rotate Rota el elemento; la entrada corresponde linealmente a grados. El destino tiene que declarar data-ganter-pivot.
opacity La opacidad del elemento; la entrada corresponde a 0..1.
fill Pinta el relleno con offColor por debajo del punto medio del rango de entrada y con onColor en ese punto o por encima. Una entrada booleana conmuta directamente. Apunta a figuras que se pueden rellenar (no a <line>).
visible Muestra u oculta el elemento según la veracidad del valor.
text Reemplaza el contenido de texto del elemento con el valor con formato. Apunta solo a <text>/<tspan>; combínelo con los atributos data-ganter-fit-* para un visor acotado.
translate Mueve el elemento en unidades de la caja de vista; la salida primaria es X y la secundaria opcional es Y.
scale Escala el elemento; la salida primaria es X y la secundaria es Y (omitida = uniforme). El destino tiene que declarar data-ganter-pivot.
stroke Pinta el contorno con la misma regla de umbral que fill.
spin Rotación continua en el tiempo; la entrada corresponde a la velocidad angular en grados por segundo. Los hijos con data-ganter-spin-ratio giran con ellos en la proporción que declaran. El destino tiene que declarar data-ganter-pivot. El movimiento lo planifica el anfitrión y es independiente de las preferencias de animación del sistema operativo.
spinEnabled Pausa o reanuda la zona activa spin de ese mismo elemento sin ocultarlo. Necesita una zona activa spin que apunte al mismo elemento.
fillColor Pone el relleno directamente desde el valor de color vinculado (un recurso de color, una variable de color o un color CSS seguro).
strokeColor Pone el contorno directamente desde el valor de color vinculado.
strokeWidth Pone el ancho del contorno directamente, en unidades de usuario SVG de 0.5 a 32; no se acepta ningún sufijo de unidad ni CSS. Una entrada no válida, sin resolver o de mala calidad restaura el stroke-width autorado; también lo hacen Restablecer, volver a montar y desechar.

Estas zonas activas dan estilo al dibujo; nunca dan estilo a los trazos de conexión de un panel de control, cuyo color y ancho son globales por tipo de trazo.

La propiedad del vínculo

El símbolo declara parámetros y elecciones de tipo permitidas, no fuentes en vivo ni la selección de una instancia. Después de colocar un componente Símbolo, el operador asigna cada zona activa a una dirección de Logic o a un valor fijo, y elige el tipo de trazo de cada borne configurable en esa instancia. Esas elecciones se quedan dentro de la estación y nunca se exportan con el símbolo reutilizable. Las zonas activas sin asignar se quedan neutras: el elemento conserva el aspecto con el que se autoró.

Las posiciones globales y los tipos de trazo

Cada borne referencia una posición del catálogo fijo de dieciséis anclajes del perímetro. Un paquete guarda únicamente anchorId; nunca repite ni invalida coordenadas. Las posiciones, como fracciones normalizadas de la caja de vista:

  • arriba: top-left (0, 0), top-25 (0.25, 0), top-50 (0.5, 0), top-75 (0.75, 0), top-right (1, 0);
  • derecha: right-25 (1, 0.25), right-50 (1, 0.5), right-75 (1, 0.75);
  • abajo, en el sentido de las manecillas: bottom-right (1, 1), bottom-75 (0.75, 1), bottom-50 (0.5, 1), bottom-25 (0.25, 1), bottom-left (0, 1);
  • izquierda, siguiendo en el mismo sentido: left-75 (0, 0.75), left-50 (0, 0.5), left-25 (0, 0.25).

Son posiciones del perímetro, no una cuadrícula de 5×5. Un símbolo no puede agregar otra posición ni guardar sus propias coordenadas de anclaje.

Los ocho tipos de trazo globales son liquid, gas, air-duct, electrical, signal, network, material y mechanical-shaft. Use Logic > Recursos > Tipos de trazo para configurar el color y el ancho visual del trazo asociados a cada tipo. Los símbolos y las conexiones conservan el id estable del tipo, así que un cambio global vuelve a dar estilo a todos los trazos que lo usan. Un paquete nunca copia el color ni el ancho, y no tiene variantes de trazo pequeño, estándar ni grande.

Dos extremos forman una conexión definida cuando resuelven al mismo tipo. El rol del borne ayuda en la autoría y en la revisión, pero por sí solo no prohíbe ninguna disposición de red.

Las elecciones de tipo compartidas

Un símbolo que puede trabajar con más de un medio declara una configuración de tipo compartida en lugar de duplicar su dibujo:

{
  "id": "process-type",
  "name": "Process type",
  "allowedTypes": ["liquid", "gas"],
  "defaultType": "liquid"
}

El id es una clave estable: letras minúsculas y dígitos con guiones simples, que empieza y termina en un carácter alfanumérico (las mayúsculas se rechazan). allowedTypes no está vacío y contiene ids de tipo globales únicos; defaultType tiene que pertenecer a él; name es obligatorio. Todos los bornes que referencian process-type siguen una sola elección hecha en la instancia colocada en el panel de control. Una definición puede llevar varias configuraciones independientes, como el medio de proceso y el de venteo, mientras otros bornes se quedan fijos.

Los bornes completos

Cada borne conectable declara una posición global, un rol, exactamente un tipo fijo o una configuración compartida, una orientación hacia afuera en la orientación original, y un trayecto interno de llegada:

{
  "anchorId": "left-50",
  "role": "input",
  "typeConfiguration": "process-type",
  "direction": "west",
  "internalPath": [
    { "x": 18, "y": 50 },
    { "x": 36, "y": 50 },
    { "x": 48, "y": 62 }
  ]
}

Las reglas, todas exigidas al importar:

  • 16 bornes como máximo, y cada id de anclaje usado una sola vez.
  • role es input, output o bidirectional; direction es north, east, south o west.
  • Exactamente uno de type (un tipo de trazo global) o typeConfiguration (el id de una configuración declarada), nunca los dos y nunca ninguno.
  • El anclaje global convertido a la caja de vista natural del SVG es el inicio implícito de internalPath; no lo repita como primer punto. Las coordenadas son valores absolutos de la caja de vista, no fracciones normalizadas, y el trayecto tiene al menos un punto.
  • Cada segmento se queda dentro de la caja de vista, tiene longitud distinta de cero, y es horizontal, vertical o de exactamente 45°; los segmentos consecutivos giran 90° como máximo.
  • Los bornes exigen que el SVG lleve una caja de vista.

El panel de control dibuja el trayecto interno por debajo del dibujo del equipo, lo transforma con el cambio de tamaño, con los cuartos de vuelta y con los volteos, y conserva el ancho visual del tipo de trazo global en lugar de escalarlo con el símbolo, para que un solo trazo continuo corra desde dentro de un cuerpo hasta dentro del otro.

Un borne es todo o nada. Un paquete estricto con un borne parcial no es válido; un paquete solo visual usa en su lugar un arreglo terminals vacío. Nunca se deduce nada para llenar un hueco.

Las sugerencias ordenadas

Una sugerencia registra una composición intencional, incluida la pose exacta del destino:

{
  "sourceAnchorId": "right-75",
  "targetSymbol": "system:capping-station",
  "targetAnchorId": "left-75",
  "targetRotationDegrees": 0,
  "targetFlipHorizontal": false,
  "targetFlipVertical": false,
  "connectionType": "material"
}

La validación: sourceAnchorId tiene que ser uno de los bornes propios de este símbolo; targetSymbol tiene que ser una referencia calificada por su origen y, dentro de un paquete portable, solo puede ser system:<clave-estable> (un GUID de usuario tiene sentido únicamente dentro de la estación que lo posee) nombrando un símbolo que existe en el catálogo del sistema con un borne en targetAnchorId; la rotación es 0, 90, 180 o 270 y las dos banderas de volteo son obligatorias; cada sugerencia tiene que ser única. connectionType se puede omitir solo cuando los tipos fijos iguales de los dos extremos resuelven el escenario sin ambigüedad; es obligatorio cuando cualquiera de los dos extremos es configurable, y entonces tiene que estar permitido en los dos.

Las sugerencias son direccionales y el orden del arreglo fija la prioridad, pero nunca son una lista blanca para las conexiones ordinarias de un panel de control. Con un arreglo suggestions vacío, el inspector reporta que no existe ninguna composición sugerida, en lugar de inventar un compañero de catálogo.

Lo que la importación rechaza

Una lista rápida de los rechazos, para que una importación fallida se pueda leer en lugar de adivinarse. Para un SVG simple solo aplica el primer grupo, y dentro de él solo los topes de tamaño, el XML mal formado y una raíz <svg> ausente rechazan la importación: el marcado no permitido se repara con una advertencia. Para un paquete, todo lo de abajo es un rechazo duro.

El dibujo

  • Un archivo de más de 1 MB, marcado de más de 512 KB, o más de 4096 elementos.
  • XML mal formado, o una raíz que no es un <svg> depurado.
  • En un paquete: cualquier marcado que la lista de permitidos habría tenido que quitar (scripts, controladores de evento, referencias externas, elementos o atributos no permitidos).
  • Un viewBox que no son cuatro números finitos con ancho y alto positivos, o que difiere del de la raíz del SVG; un paquete sin ninguna caja de vista en la raíz.

El sobre

  • Un esquema, un formato o una versión distintos del contrato v2; campos desconocidos en cualquier parte; un name, un fit, un footprint o cualquiera de los tres arreglos que falten; una entrada nula dentro de un arreglo.
  • Un fit fuera de los cuatro modos; una huella fuera de 1–24 × 1–12.

Las zonas activas

  • Un nombre o un id de elemento fuera de la gramática de identificador; un nombre de zona activa duplicado; un id de destino que el SVG no contiene; una clase que el elemento de destino no puede tomar (texto en un elemento que no es de texto, relleno en un <line>).
  • Una zona activa rotate, spin o scale cuyo destino no tiene un data-ganter-pivot finito; una zona activa spinEnabled sin una zona activa spin en ese mismo elemento.
  • Dos zonas activas en el mismo canal de un elemento. Cada clase es su propio canal, salvo que fill y fillColor comparten el canal del relleno y stroke y strokeColor comparten el del contorno, así que un elemento no puede tomar dos rotaciones, igual que no puede tomar dos rellenos.
  • Números de rango no finitos; una salida secundaria con un solo extremo, o en una clase que no es translate/scale; una pintura no segura; una zona activa que lleva una dirección de Logic.

Las conexiones

  • Más de 16 bornes; un id de anclaje repetido o desconocido; un borne con los dos o con ninguno de type/typeConfiguration; un tipo o un id de configuración desconocidos; un trayecto interno no válido (fuera de la caja de vista, con segmentos de longitud cero o de ángulo equivocado, o con un giro de más de 90°).
  • Una configuración de tipo con un id no válido, sin nombre, con tipos permitidos duplicados o desconocidos, o con un valor predeterminado fuera de su propia lista.
  • Una sugerencia cuyo borne de origen no existe, cuyo destino no es un símbolo del sistema con el borne nombrado, cuya pose no es un cuarto de vuelta, o cuyo tipo de trazo no se acepta en los dos extremos.

symbol_validate, en el punto de conexión MCP, corre exactamente esta importación como un ensayo y reporta todos los errores, todas las advertencias y todas las notas sin guardar nada.

Empacar y compartir

Exportar el paquete (disponible igual para los símbolos del sistema y para los del usuario) descarga <nombre>.ganter-symbol.json con el dibujo depurado y el contrato completo: $schema, format, version, name, svg, viewBox, fit, footprint, slots[], typeConfigurations[], terminals[] y suggestions[], con los tres arreglos de conexión presentes aunque estén vacíos. Lo que nunca viaja: las direcciones de la estación, las elecciones de tipo por instancia, la identidad de la base de datos, la identidad del usuario, y los colores y los anchos de los tipos de trazo de la estación.

En la estación que recibe, ese mismo archivo pasa por Importar símbolo (o por symbol_import sobre MCP) y aterriza como un símbolo de usuario nuevo, con bornes y todo. Como la identidad del tipo es un id estable y el aspecto es global, los trazos de un símbolo importado siguen de inmediato el estilo de los tipos de trazo de la estación que lo recibe.