Formas SVG personalizadas no draw.io: imagens ou stencils?

Para criar uma forma SVG personalizada no draw.io, decida o que você precisa alterar depois da inserção. Uma imagem SVG incorporada é útil quando você quer manter a aparência da ilustração. Um stencil XML nativo é o caminho para definir a geometria do diagrama, os estilos e pontos de conexão específicos. Uma biblioteca personalizada pode armazenar qualquer um desses tipos de item para reutilização.

Essas opções resolvem problemas diferentes. Salvar um SVG em uma biblioteca, por si só, não transforma seus traçados em uma forma nativa do diagrama. A referência de formas personalizadas do draw.io distingue imagens incorporadas de formas definidas em seu formato XML.

Se seus diagramas são escritos em Mermaid, use o fluxo de trabalho com pacotes de ícones SVG personalizados para registrar a ilustração mantendo os rótulos e conectores no código-fonte do diagrama.

Escolha o comportamento antes de converter a ilustração

Imagine um pequeno símbolo de dispositivo: um corpo retangular com um indicador circular. Você quer reutilizá-lo em alguns diagramas de processo.

Em um diagrama com estilo de apresentação, talvez o dispositivo só precise ter uma aparência consistente. Em um diagrama de conexões, você pode querer que as linhas se prendam ao ponto médio das bordas esquerda e direita. Anote esse requisito antes de preparar outro arquivo.

Insira um SVG quando sua aparência for suficiente

O guia oficial de inserção de SVG documenta como arrastar um arquivo SVG do computador para a área de desenho. Você também pode usar Arrange → Insert → Image. Escolha Actual Size quando solicitado e depois redimensione a ilustração inserida conforme necessário.

No exemplo do dispositivo, use uma cópia de trabalho e confira o pequeno indicador circular depois de redimensionar. Uma forma clara em tamanho original pode perder detalhes úteis em um diagrama compacto.

Guarde separadamente o arquivo original editável da ilustração. Se precisar mover o círculo dentro do dispositivo, faça essa alteração no editor em que a arte foi criada e substitua a imagem de entrega. Não perca tempo procurando um comando de desagrupamento apenas porque o SVG contém várias partes visíveis. Nosso guia sobre objetos SVG e desagrupamento explica como a estrutura do arquivo afeta essa expectativa.

Um desenho SVG simples de um diagrama inteiro também exige cuidado. O guia de inserção do draw.io explica que um SVG comum não contém as informações de conectores necessárias para reconstruir um diagrama editável. Guarde o arquivo original do diagrama quando o tiver.

Recolorir um SVG incorporado tem seus próprios requisitos

O draw.io oferece uma integração limitada entre ilustrações SVG incorporadas e seus controles de cor. O guia de cores em SVG incorporado usa regras CSS dentro do SVG e uma configuração editableCssRules no estilo do objeto inserido. Esse recurso se aplica a imagens incorporadas, não a imagens incluídas por um link.

Para um SVG já estruturado com regras CSS, selecione a imagem inserida, escolha Edit Style e adicione:

editableCssRules=.*;

O padrão documentado seleciona todas as regras elegíveis. Ele pertence ao estilo do objeto do draw.io, não a uma linha colada na marcação de desenho do SVG.

Inspecione os controles resultantes antes de montar uma biblioteca baseada neles. Se nenhum controle de cor útil aparecer, compare o arquivo original com o exemplo de classes CSS do guia oficial. Não presuma que essa configuração reorganizará atributos de pintura arbitrários do SVG, separará o indicador do dispositivo ou criará pontos de conexão.

Para uma ilustração que só precisa de uma alteração permanente de cor, editar o SVG original pode ser mais simples. Salve uma cópia e verifique novamente a aparência importada.

Use um stencil nativo para uma forma definida intencionalmente

Um stencil nativo descreve a forma na sintaxe XML própria do draw.io. Não é um arquivo SVG renomeado para .xml. O tutorial de formas personalizadas usa Arrange → Insert → Shape para abrir o editor de formas e Preview para inspecionar a definição.

Aqui está um pequeno ponto de partida original para o símbolo do dispositivo:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

O retângulo externo e o círculo central são intencionalmente simples. Os valores de coordenadas definem o espaço de desenho dessa ilustração; não são medidas físicas do dispositivo.

A referência XML especifica coordenadas relativas de conexão. Com perimeter="0", essas duas restrições colocam os pontos no meio das bordas esquerda e direita. Ela também exige que a operação de pintura da geometria de fundo esteja no início do primeiro plano, motivo pelo qual fillstroke aparece ali.

Visualize a forma, adicione-a a um diagrama de teste e experimente o comportamento de que realmente precisa:

1. Altere a cor do preenchimento e da linha.
2. Prenda um conector em cada ponto médio pretendido.
3. Mova o dispositivo e inspecione as duas ligações.
4. Redimensione-o e confira o círculo, o contorno e as posições dos conectores.

Essa é uma pequena definição para adaptar, não um conversor genérico de SVG para stencil. Se o dispositivo ilustrado inclui muitos detalhes decorativos, decida quais pertencem ao símbolo do diagrama. Redesenhar algumas primitivas essenciais pode ser mais fácil de manter do que levar todos os contornos para um stencil.

Salve uma biblioteca depois que o item passar pelas verificações

A biblioteca é a etapa de reutilização. O guia de bibliotecas personalizadas documenta File → New Library, a escolha de um local de armazenamento e a adição de imagens ou de formas arrastadas da área de desenho. Bibliotecas personalizadas usam a extensão .xml.

Salve o dispositivo com um nome que indique seu conteúdo, como “Ilustração de dispositivo” ou “Dispositivo com duas portas”. Mantenha-os como entradas separadas se ambos forem úteis.

Depois, abra um diagrama novo e insira o item salvo. Repita uma edição relevante: altere a cor da ilustração se isso foi configurado ou prenda um conector ao stencil nativo. Isso ajuda a identificar uma biblioteca que contém uma versão anterior do símbolo.

Um nome de arquivo .xml, por si só, não indica se o item contém geometria nativa. Tanto uma biblioteca quanto uma definição de stencil envolvem XML, mas uma biblioteca pode conter imagens, grupos, formas personalizadas ou diagramas inteiros. Inspecione o comportamento do item inserido.

Recupere uma ilustração raster apenas quando precisar de um mestre vetorial

Se a ilustração original do dispositivo só existe como PNG ou digitalização, o fluxo de trabalho de clipart para SVG do PerfectVector pode ajudar a preparar uma versão candidata da ilustração. Recorte uma cópia ao redor do motivo, visualize o resultado vetorial e inspecione o contorno externo, o detalhe circular, os espaços vazios e o fundo indesejado. Baixe o SVG e teste-o pelo fluxo de inserção de imagem.

Isso oferece um arquivo original voltado à aparência para você avaliar. Não define as portas esquerda e direita do dispositivo, o significado dos conectores nem o XML de um stencil nativo. Crie esses elementos intencionalmente se o diagrama precisar deles.

Um símbolo muito simples, formado por retângulo e círculo, pode ser mais rápido de desenhar diretamente. A vetorização é mais útil quando a ilustração restante contém curvas características que você quer preservar. Para motivos desenhados à mão, o guia de preparação de ilustrações de mapas aborda a limpeza de desenhos antes da vetorização.

Se o SVG ainda fica pixelado ao ampliar, confira se ele contém um bitmap incorporado usando o diagnóstico de imagens raster em SVG. A visão geral da vetorização de imagens explica a diferença mais ampla entre preservar pixels e recuperar formas.

Perguntas frequentes

Importar um SVG o transforma em um stencil nativo do draw.io? Não. O fluxo de inserção de imagem incorpora a ilustração. Um stencil personalizado nativo usa a definição XML de formas do draw.io para geometria, estilos e pontos de conexão.

Posso alterar as cores de um SVG incorporado? O draw.io documenta a edição de cores por meio de regras CSS adequadas no SVG e da configuração editableCssRules no estilo do objeto inserido. Confira a estrutura do arquivo original e os controles disponíveis depois da inserção.

Uma biblioteca personalizada converte traçados SVG em formas nativas? Uma biblioteca armazena itens reutilizáveis, incluindo imagens e formas personalizadas nativas. Salvar uma imagem em uma biblioteca não adiciona, por si só, geometria nativa nem semântica de conectores.

Vetorizar um PNG criará pontos de conexão para meu diagrama? Não. A vetorização pode recuperar os contornos da ilustração. Defina separadamente os pontos de conexão e o comportamento nativo do diagrama quando forem necessários.

Fontes

1. draw.io — Inserir imagens SVG em um diagrama — Inserção de imagens, dimensionamento e a limitação de reconstruir conectores de diagramas a partir de SVG.
2. draw.io — Criar e editar formas personalizadas complexas — Geometria XML nativa, restrições de conexão e operações de desenho.
3. draw.io — Editar cores em imagens SVG incorporadas — Edição de regras CSS e requisitos de imagens incorporadas em comparação com imagens vinculadas.
4. draw.io — Criar formas personalizadas — O editor de stencils, o fluxo de visualização e os estilos padrão.
5. draw.io — Trabalhar com bibliotecas de formas personalizadas — Criação, salvamento e reutilização de itens variados de biblioteca.

Escolha o comportamento de que precisa, prepare um símbolo de dispositivo e teste-o em um diagrama novo. Se só restou uma ilustração raster, prepare uma versão SVG candidata, inspecione seus contornos e confira a imagem inserida antes de salvá-la na biblioteca.