Símbolos SVG portáteis
Monte e compartilhe símbolos SVG estáticos com vínculos Ganter seguros e terminais de ligação tipados.
Os símbolos Ganter mantêm a arte e os dados ao vivo separados. A arte é SVG comum e estático. O Ganter Lab é dono de todo mapeamento de valor e de toda animação, então um arquivo importado não consegue rodar scripts, tratadores de evento, código de animação embutido nem requisições de rede. Esta página é a referência completa do modelo de autoria: o que um símbolo declara, o que a importação aceita e recusa, e como símbolos viajam entre estações.
Um símbolo declara três coisas por cima da arte dele:
- Slots: entradas nomeadas (preenchimento, traço, movimento, texto, visibilidade) que uma instância de dashboard colocada depois alimenta a partir de um endereço da Logic ou de um valor fixo.
- Terminais: pontos de ligação tipados no perímetro, para que o Dashboard consiga rotear tubulações, dutos, fios e eixos entre símbolos.
- Sugestões: composições opcionais com outros símbolos, explicitamente posicionadas.
Símbolos do sistema e Meus símbolos
O catálogo tem duas origens, filtráveis em todo lugar em que símbolos são listados:
| Origem | Referência | O que é |
|---|---|---|
| Sistema | system:<stable-key> |
As bibliotecas embutidas que vêm com a aplicação. Inspecionáveis e exportáveis, nunca editáveis no lugar. |
| Meus | user:<guid> |
Símbolos que você criou, importou ou duplicou. Editáveis e excluíveis. |
Todo símbolo do sistema oferece Duplicar para Meus símbolos: a cópia é um ativo de usuário congelado e de propriedade independente (arte, caixa de visão, ajuste, área ocupada, slots, configurações de tipo, terminais e sugestões copiados juntos), então ela continua se comportando como foi escolhida mesmo quando uma atualização posterior da aplicação muda o original. Excluir um símbolo de usuário pede confirmação; os dashboards que ainda o referenciam mostram um marcador de lugar em vez de quebrar.
Maneiras de criar um símbolo
- Importar um arquivo: o Logic > Ativos > Símbolos > Importar símbolo aceita um
.svgsimples ou um pacote.ganter-symbol.jsoncompleto. Toda importação cria um ativo novo, com identidade própria; ela nunca sobrescreve um símbolo existente, e uma colisão de nome é resolvida com sufixo (" 2", " 3", …) em vez de falhar. O seletor recusa arquivos com mais de 1 MB antes de qualquer byte ser lido. Depois de uma importação de SVG simples, a aplicação relata quantos itens inseguros ela removeu, se houve algum. - Autorar na aplicação: o Novo símbolo de usuário abre um editor para o nome, a marcação SVG, o layout de dashboard (ajuste e área ocupada inicial) e os slots; assim que o símbolo existe, alterações válidas salvam sozinhas. A geometria de terminal não é editável na aplicação, de propósito: terminais tipados só podem vir de um pacote, e terminais autorados num pacote são preservados como somente leitura ao longo de edições posteriores.
- Pedir a uma IA: dois caminhos compartilham exatamente o mesmo contrato. Pelo
endpoint MCP embutido, a ferramenta
symbol_validatefaz a importação em seco e asymbol_importpersiste um ativo novo; as duas carregam o contrato completo nas descrições delas. De um chat externo sem acesso à aplicação, o Copiar instrução de chat do painel de Símbolos copia um comando autossuficiente; salve o SVG ou o pacote devolvido como arquivo e importe-o aqui.
Veja a Logic para o espaço de trabalho de ativos ao redor.
Preparar um SVG simples
Dê um id SVG estável a toda parte que você quiser vincular. Depois da importação, esses ids aparecem nos
seletores de alvo dos slots. Ids e nomes de slot compartilham uma gramática: eles começam com uma letra ou _, continuam
com letras, dígitos, _, ., : ou -, e têm no máximo 128 caracteres.
Atributos data-ganter-* opcionais são a única marcação específica do Ganter que um símbolo pode carregar:
| Atributo | Em | O que declara |
|---|---|---|
data-ganter-pivot="x y" |
qualquer elemento vinculável | O ponto de pivô exato (coordenadas da caixa de visão) para slots de rotação, escala e giro. Obrigatório no elemento alvo desses três tipos. |
data-ganter-spin-ratio |
um filho de um elemento que gira | A velocidade relativa de um rotor filho visível. Finita, diferente de zero, com magnitude de no máximo 100; negativa gira ao contrário. Removido a menos que o elemento também declare o pivô próprio dele. |
data-ganter-role |
qualquer elemento | Um papel semântico estável para ferramentas de autoria. Apenas informativo. |
data-ganter-fit-width |
<text> / <tspan> |
Leitura limitada, por adesão, para um slot de Texto: quando o texto vinculado mede mais que este número de unidades da caixa de visão, a fonte encolhe para caber. |
data-ganter-fit-min-font-size |
<text> / <tspan> |
O menor tamanho de fonte até o qual o ajuste pode encolher. Abaixo dele, o elemento mostra o texto reserva enquanto o valor completo continua no nome acessível e na dica. |
data-ganter-fit-fallback |
<text> / <tspan> |
O texto mostrado quando nem o tamanho de fonte mínimo consegue caber o valor. |
Terminais de ligação não vivem no SVG e não miram ids de elemento SVG. Atributos chamados
data-ganter-port ou data-ganter-port-* não fazem parte do formato: uma importação de SVG simples os remove;
um pacote estrito que os contenha é rejeitado.
Uma importação de SVG simples sempre produz um símbolo apenas visual válido: zero terminais, zero slots. O inspetor relata que não existe terminal conectável, porque papel, tipo, direção externa e caminho interno não foram declarados. O Ganter não deduz esses campos do nome do arquivo, da categoria nem da arte, e não abre um editor interno de terminais ou de caminhos.
O que o higienizador aceita
A mesma política de SVG vale para todo caminho (importação de arquivo, editor na aplicação, MCP, pacote). Ela é deliberadamente menor que o SVG:
- Mantidos: geometria e estrutura inertes:
svg,g,defs,symbol,use,path,rect,circle,ellipse,line,polyline,polygon,text,tspan,title,desc,clipPath,mask,linearGradient,radialGradient,stop,pattern,marker, com atributos de apresentação (preenchimento, traço, opacidade, transformação, estilo) e rótulos ARIA. - Removidos ou recusados:
<script>,<style>,<foreignObject>, tratadores de evento, animação embutida, e toda URL externa oudata:/file:/http(s). Só referências internasurl(#id)ehref="#id"sobrevivem. - Limites: a marcação pode ter no máximo 512 KB e 4096 elementos.
Pinturas seguras são cores hexadecimais, as cores nomeadas do CSS, rgb()/rgba()/hsl()/hsla(), e os
símbolos de tema da aplicação var(--color-<name>) (por exemplo var(--color-success),
var(--color-symbol-off)). Os símbolos de tema são como uma arte só se adapta ao claro e ao escuro: entregue um
desenho que referencie símbolos, nunca duas variantes de tema.
Como as violações são tratadas depende do caminho: um SVG simples é reparado (os itens inseguros são removidos e cada remoção é relatada como aviso); um pacote é estrito e é rejeitado, com as primeiras violações nomeadas, em vez de reparado em silêncio.
Pacote portátil v2
Exportar um símbolo cria um arquivo .ganter-symbol.json. Todo campo do envelope é obrigatório;
os três vetores do contrato podem ficar vazios, mas precisam estar presentes:
| Campo | Exigência |
|---|---|
$schema |
Exatamente https://ganterlab.com/schemas/ganter-symbol-v2.schema.json. |
format |
Exatamente ganter-symbol. |
version |
Exatamente 2. Pacotes da versão 1 são rejeitados, em vez de passarem por um interpretador legado. |
name |
O nome de exibição. Uma importação pode sobrepô-lo, e uma colisão recebe sufixo automático. |
svg |
SVG estático higienizado, cujo elemento raiz carrega um viewBox igual ao campo viewBox. |
viewBox |
minX minY width height: quatro números finitos, com largura e altura positivas. |
fit |
contain, stretch, stretch-x ou stretch-y. |
footprint |
{ "width": 1..24, "height": 1..12 }, as células de dashboard sugeridas. |
slots |
Vetor de declarações de slot (abaixo). |
typeConfigurations |
Vetor de escolhas compartilhadas de tipo de terminal (abaixo). |
terminals |
Vetor de até 16 terminais completos (abaixo). |
suggestions |
Vetor de composições autoradas e ordenadas (abaixo). |
O JSON Schema público do Ganter symbol v2 valida o
envelope de transporte. O importador então faz as conferências semânticas que o JSON Schema não consegue expressar:
a existência do alvo no SVG, a geometria do caminho interno, a compatibilidade das sugestões. Um pacote é estrito em
todas as dimensões: marcação insegura, campos desconhecidos, entradas nulas em vetores e os antigos contratos
ports[], anchors[], profile e connectionStyle são rejeitados, e não reparados.
O pacote nunca contém um endereço de estação, um vínculo de Dashboard, uma escolha de tipo por instância, um GUID de banco de dados ou uma identidade de usuário. Um slot que carrega um endereço da Logic nem consegue ser exportado: o endereço pertence à instância colocada, não ao símbolo reutilizável.
Tamanho, caixa de visão e ajuste
A caixa de visão é o espaço de coordenadas natural do símbolo. Terminais e caminhos internos são
declarados nela, e ela precisa bater exatamente com o viewBox da raiz do SVG; um pacote cujas duas caixas de visão
discordam é rejeitado. Caixas de visão não quadradas são totalmente suportadas, então uma esteira comprida não
precisa morar num quadrado.
O modo de ajuste diz como a arte usa o retângulo de dashboard que o operador desenha:
| Ajuste | Comportamento |
|---|---|
contain |
Mantém a proporção; a arte fica com faixas dentro do retângulo da célula. O padrão. |
stretch |
Preenche o retângulo nos dois eixos, distorcendo se preciso. |
stretch-x |
Estica na horizontal, mantém a proporção vertical natural. |
stretch-y |
Estica na vertical, mantém a proporção horizontal natural. |
A área ocupada é o tamanho inicial em células da grade do dashboard quando o símbolo é colocado pela primeira vez: largura de 1 a 24, altura de 1 a 12 (o editor usa 4 × 4 por padrão). Ela é uma sugestão, não uma restrição; o operador redimensiona livremente depois.
Duas portas separadas limitam o tamanho de uma importação: o seletor de arquivo recusa qualquer coisa acima de 1 MB antes de lê-la, e o higienizador recusa marcação acima de 512 KB ou de 4096 elementos.
Slots: a superfície de vínculo
Um slot declara uma entrada: qual elemento ele conduz, o que ele faz com ele, e como os valores de entrada mapeiam para a saída. A instância de dashboard colocada depois escolhe a origem de cada slot (um endereço da Logic ou um valor fixo); o símbolo em si nunca guarda uma origem.
Cada slot carrega:
| Campo | Significado |
|---|---|
name |
O nome de parâmetro mostrado a quem autora o dashboard. A gramática de identificador está acima; único entre os slots do símbolo. |
elementId |
O id de um elemento SVG existente. Um elemento aceita no máximo um slot por canal, então dois slots não podem brigar pelo preenchimento do mesmo elemento. |
kind |
Um dos treze tipos abaixo. |
inMin, inMax |
A faixa de entrada: os dois valores mapeados para outMin/outMax. Números finitos; usados pelos tipos contínuos e como ponto médio de limiar por fill/stroke. |
outMin, outMax |
A faixa de saída na unidade do tipo (graus, unidades da caixa de visão, 0..1, graus por segundo). Números finitos. |
outMinSecondary, outMaxSecondary |
Segundo eixo de saída opcional, só em translate e scale: a saída primária é X e a secundária é Y. Forneça os dois ou nenhum. |
onColor, offColor |
Pinturas seguras para fill/stroke (os dois estados do limiar). Em fillColor/strokeColor, o onColor é a cor de prévia do inspetor. |
Os treze tipos de slot:
| Tipo | O que ele conduz | Notas |
|---|---|---|
rotate |
Rotaciona o elemento; a entrada mapeia linearmente para graus. | O alvo precisa declarar data-ganter-pivot. |
opacity |
A opacidade do elemento; a entrada mapeia para 0..1. | |
fill |
Pinta o preenchimento com offColor abaixo do ponto médio da faixa de entrada e com onColor nele ou acima dele. Uma entrada booleana troca diretamente. |
Mira formas preenchíveis (não <line>). |
visible |
Mostra ou esconde o elemento pela veracidade do valor. | |
text |
Substitui o conteúdo de texto do elemento pelo valor formatado. | Mira apenas <text>/<tspan>; combine com os atributos data-ganter-fit-* para uma leitura limitada. |
translate |
Move o elemento em unidades da caixa de visão; a saída primária é X, a secundária opcional é Y. | |
scale |
Escala o elemento; a saída primária é X, a secundária é Y (omitida = uniforme). | O alvo precisa declarar data-ganter-pivot. |
stroke |
Pinta o traço pela mesma regra de limiar do fill. |
|
spin |
Rotação contínua ao longo do tempo; a entrada mapeia para velocidade angular em graus por segundo. Filhos com data-ganter-spin-ratio giram junto, na razão declarada deles. |
O alvo precisa declarar data-ganter-pivot. O movimento é agendado pelo hospedeiro e independe das preferências de animação do sistema operacional. |
spinEnabled |
Pausa ou retoma o slot spin do mesmo elemento sem escondê-lo. |
Exige um slot spin mirando o mesmo elemento. |
fillColor |
Define o preenchimento diretamente pelo valor de cor vinculado (um ativo de Cor, uma variável de Cor ou uma cor CSS segura). | |
strokeColor |
Define o traço diretamente pelo valor de cor vinculado. | |
strokeWidth |
Define a largura do traço diretamente, em unidades de usuário SVG de 0,5 a 32; nenhum sufixo de unidade nem CSS é aceito. | Entrada inválida, sem resolução ou de qualidade ruim restaura o stroke-width autorado; o Redefinir, a remontagem e o descarte fazem o mesmo. |
Estes slots estilizam a arte; eles nunca estilizam as rotas de ligação do Dashboard, cuja cor e largura são globais por tipo de ligação.
Propriedade do vínculo
O símbolo declara parâmetros e escolhas de tipo permitidas, não origens ao vivo nem a seleção de uma instância. Depois de colocar um componente Símbolo, o operador mapeia cada slot para um endereço da Logic ou para um valor fixo e escolhe cada tipo de ligação configurável naquela instância. Essas escolhas ficam dentro da estação e nunca são exportadas com o símbolo reutilizável. Slots não mapeados ficam neutros: o elemento mantém a aparência autorada dele.
Posições globais e tipos de ligação
Todo terminal referencia uma posição do catálogo fixo de dezesseis ancoradouros do perímetro. Um pacote
guarda apenas o anchorId; ele nunca repete nem sobrepõe coordenadas. As posições, como frações
normalizadas da caixa de visão:
- topo:
top-left(0, 0),top-25(0.25, 0),top-50(0.5, 0),top-75(0.75, 0),top-right(1, 0); - direita:
right-25(1, 0.25),right-50(1, 0.5),right-75(1, 0.75); - base, em sentido horário:
bottom-right(1, 1),bottom-75(0.75, 1),bottom-50(0.5, 1),bottom-25(0.25, 1),bottom-left(0, 1); - esquerda, seguindo em sentido horário:
left-75(0, 0.75),left-50(0, 0.5),left-25(0, 0.25).
Estas são posições de perímetro, não uma grade 5×5. Um símbolo não consegue acrescentar outra posição nem guardar coordenadas de ancoradouro próprias.
Os oito tipos globais de ligação são liquid, gas, air-duct, electrical, signal,
network, material e mechanical-shaft. Use o Logic > Ativos > Tipos de ligação para
configurar a cor e a largura visual de traço associadas a cada tipo. Símbolos e ligações
guardam o id estável do tipo, então uma mudança global reestiliza toda rota que o usa. Um pacote nunca
copia a cor ou a largura e não tem variantes de rota pequena, padrão ou grande.
Duas pontas formam uma ligação definida quando elas resolvem para o mesmo tipo. O papel do terminal ajuda na autoria e na revisão, mas não proíbe sozinho um arranjo de rede.
Escolhas compartilhadas de tipo
Um símbolo que consegue trabalhar com mais de um meio declara uma configuração de tipo compartilhada, em vez de duplicar a arte dele:
{
"id": "process-type",
"name": "Process type",
"allowedTypes": ["liquid", "gas"],
"defaultType": "liquid"
}
O id é uma chave estável: letras minúsculas e dígitos com traços simples, começando e terminando em
alfanumérico (maiúsculas são recusadas). O allowedTypes é não vazio e contém ids de tipo global únicos;
o defaultType precisa pertencer a ele; o name é obrigatório. Todo terminal que referencia
process-type segue uma escolha feita na instância de dashboard colocada. Uma definição pode carregar
várias configurações independentes, como meio de processo e meio de respiro, enquanto outros terminais ficam
fixos.
Terminais completos
Cada terminal conectável declara uma posição global, um papel, exatamente um tipo fixo ou uma configuração compartilhada, uma direção para fora na orientação original, e um caminho interno de chegada:
{
"anchorId": "left-50",
"role": "input",
"typeConfiguration": "process-type",
"direction": "west",
"internalPath": [
{ "x": 18, "y": 50 },
{ "x": 36, "y": 50 },
{ "x": 48, "y": 62 }
]
}
As regras, todas impostas na importação:
- No máximo 16 terminais, e cada id de ancoradouro usado no máximo uma vez.
- O
roleéinput,outputoubidirectional; adirectionénorth,east,southouwest. - Exatamente um entre
type(um tipo de ligação global) etypeConfiguration(um id de configuração declarada), nunca os dois, nunca nenhum. - O ancoradouro global convertido para a caixa de visão natural do SVG é o início implícito do
internalPath; não o repita como primeiro ponto. As coordenadas são valores absolutos da caixa de visão, não frações normalizadas, e o caminho tem pelo menos um ponto. - Todo segmento fica dentro da caixa de visão, tem comprimento diferente de zero, e é horizontal, vertical ou exatamente de 45°; segmentos consecutivos viram no máximo 90°.
- Terminais exigem que o SVG carregue uma caixa de visão.
O Dashboard desenha o caminho interno abaixo da arte do equipamento, o transforma com redimensionamento, rotação de quarto de volta e espelhamentos, e mantém a largura visual do tipo de ligação global em vez de escalá-la com o símbolo, para que um traço contínuo corra de dentro de um corpo até dentro do outro.
Um terminal é tudo ou nada. Um pacote estrito com um terminal parcial é inválido; um pacote apenas visual
usa um vetor terminals vazio no lugar. Nada é jamais deduzido para preencher uma lacuna.
Sugestões ordenadas
Uma sugestão registra uma composição intencional, incluindo a pose exata do alvo:
{
"sourceAnchorId": "right-75",
"targetSymbol": "system:capping-station",
"targetAnchorId": "left-75",
"targetRotationDegrees": 0,
"targetFlipHorizontal": false,
"targetFlipVertical": false,
"connectionType": "material"
}
Validação: o sourceAnchorId precisa ser um dos terminais do próprio símbolo; o targetSymbol precisa ser uma
referência qualificada pela origem e, num pacote portátil, ele só pode ser system:<stable-key> (um GUID de
usuário só faz sentido dentro da estação dona dele), nomeando um símbolo que existe no catálogo do sistema
com um terminal em targetAnchorId; a rotação é 0, 90, 180 ou 270 e os dois sinalizadores de
espelhamento são obrigatórios; cada sugestão precisa ser única. O connectionType só pode ser omitido quando
os tipos fixos iguais nas duas pontas resolvem o cenário sem ambiguidade; ele é obrigatório quando qualquer uma das
pontas é configurável, e precisa então ser permitido nas duas pontas.
As sugestões são direcionais e a ordem do vetor define a prioridade, mas elas nunca são uma lista de permissão para
ligações comuns de Dashboard. Com um vetor suggestions vazio, o inspetor relata que não existe composição
sugerida, em vez de inventar um parceiro de catálogo.
O que a importação recusa
Uma lista rápida das recusas, para que uma importação que falhou possa ser lida em vez de adivinhada. Num
SVG simples, só o primeiro grupo se aplica e, dentro dele, apenas os tetos de tamanho, o XML malformado e uma
raiz <svg> ausente recusam a importação: a marcação não permitida é reparada com um aviso. Num
pacote, tudo abaixo é rejeição dura.
Arte
- Um arquivo acima de 1 MB, marcação acima de 512 KB, ou mais de 4096 elementos.
- XML malformado, ou uma raiz que não é um
<svg>higienizado. - Num pacote: qualquer marcação que a lista de permissão teria de remover (scripts, tratadores de evento, referências externas, elementos ou atributos não permitidos).
- Um
viewBoxque não são quatro números finitos com largura e altura positivas, ou que difere doviewBoxda raiz do SVG; um pacote sem caixa de visão na raiz.
Envelope
- Um esquema, um formato ou uma versão diferente do contrato v2; campos desconhecidos em qualquer lugar; um
name, umfit, umfootprintou qualquer um dos três vetores ausente; uma entrada nula dentro de um vetor. - Um
fitfora dos quatro modos; uma área ocupada fora de 1–24 × 1–12.
Slots
- Um nome ou um id de elemento fora da gramática de identificador; um nome de slot duplicado; um id de alvo que o SVG
não contém; um tipo que o elemento alvo não aceita (texto num elemento que não é de texto, preenchimento numa
<line>). - Um slot
rotate,spinouscalecujo alvo não tem umdata-ganter-pivotfinito; um slotspinEnabledsem um slotspinno mesmo elemento. - Dois slots no mesmo canal de um elemento. Cada tipo é um canal próprio, exceto que
fillefillColorcompartilham o canal de preenchimento estrokeestrokeColorcompartilham o canal de traço, então um elemento não aceita duas rotações, assim como não aceita dois preenchimentos. - Números de faixa não finitos; uma saída secundária com apenas uma ponta, ou num tipo que não seja
translate/scale; uma pintura insegura; um slot que carrega um endereço da Logic.
Ligações
- Mais de 16 terminais; um id de ancoradouro repetido ou desconhecido; um terminal com os dois ou com nenhum de
type/typeConfiguration; um id de tipo ou de configuração desconhecido; um caminho interno inválido (fora da caixa de visão, segmentos de comprimento zero ou fora de ângulo, uma virada acima de 90°). - Uma configuração de tipo com id inválido, sem nome, com tipos permitidos duplicados ou desconhecidos, ou com um padrão fora da lista dela.
- Uma sugestão cujo terminal de origem não existe, cujo alvo não é um símbolo do sistema com o terminal nomeado, cuja pose não é um quarto de volta, ou cujo tipo de ligação não é aceito nas duas pontas.
O symbol_validate no endpoint MCP roda exatamente esta importação em seco e relata
todo erro, aviso e nota sem persistir nada.
Empacotar e compartilhar
O Exportar pacote (disponível igualmente para símbolos do sistema e de usuário) baixa
<name>.ganter-symbol.json com a arte higienizada e o contrato completo: $schema,
format, version, name, svg, viewBox, fit, footprint, slots[],
typeConfigurations[], terminals[] e suggestions[], com os três vetores de ligação
presentes mesmo quando vazios. O que nunca
viaja: endereços de estação, escolhas de tipo por instância, identidade de banco de dados, identidade de usuário, e as
cores e larguras de tipo de ligação da estação.
Na estação que recebe, o mesmo arquivo passa pelo Importar símbolo (ou pelo symbol_import por
MCP) e cai como um símbolo de usuário novo, com terminais e tudo. Como a identidade de tipo é um id estável e
a aparência é global, as rotas de um símbolo importado seguem imediatamente o estilo de tipo de ligação da própria
estação que recebeu.