Importar SVG
Trazer desenho vetorial do Illustrator, do Affinity Designer, do Inkscape ou do Figma como camadas de forma editáveis, e os recursos de SVG que não sobrevivem.
Um SVG vira geometria de verdade aqui: os caminhos se tornam camadas de forma com âncoras e alças que você pode editar com a ferramenta Nó, e não uma figura de um desenho. Os grupos do arquivo viram grupos no painel Camadas.
Há quatro caminhos de entrada, e todos usam o mesmo leitor:
- Arquivo ▸ Importar ▸ SVG… importa para o projeto que você tem aberto
- Arquivo ▸ Abrir… com um SVG selecionado constrói um projeto novo sem título em volta dele
- Soltar o arquivo na tela o importa; soltá-lo em outro lugar o abre como projeto novo
- Ctrl+V cola marcação SVG copiada de outro aplicativo
Importado de um arquivo, o grupo envoltório recebe o nome do arquivo. Colado da área de transferência, ele se chama SVG.
O que vira o quê
| No SVG | No Celas Studio |
|---|---|
| g, a, e um svg aninhado | Uma camada Grupo |
| path, rect, circle, ellipse, polygon, polyline, line | Uma camada de forma cada |
| image | Uma camada Imagem |
| linearGradient, radialGradient | Um preenchimento ou contorno em gradiente na forma que o usa |
| text | Uma camada substituta vazia nomeada a partir dos primeiros caracteres |
Todo comando de caminho é entendido, inclusive arcos elípticos, e tudo é convertido em Béziers cúbicas. Um caminho composto (a letra O, uma rosquinha, qualquer coisa com furo) continua sendo uma camada de forma só, com seus contornos internos intactos, de modo que o furo continua funcionando e o conjunto todo permanece editável como um objeto.
Preenchimentos, regra de preenchimento, contornos, espessura de contorno, pontas e junções, opacidade e gradientes atravessam todos, e a espessura do contorno é dimensionada junto com o desenho, para que o peso da linha fique certo. Qualquer coisa marcada como oculta no arquivo chega oculta.
As cores são lidas em todas as formas CSS que o modelo de desenho usa: cores nomeadas, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() e rgba(), com porcentagens aceitas nas formas numéricas. As formas hexadecimais de quatro e de oito dígitos levam seu alfa adiante.
Um rect arredondado com rx diferente de ry importa com cantos genuinamente elípticos. Quando rx e ry coincidem, ele continua sendo um retângulo comum que carrega um raio de canto, de modo que a alça de raio de canto da ferramenta Nó continua funcionando nele.
Um <image> vinculado é resolvido em relação à pasta do próprio SVG, então um desenho que referencia um arquivo vizinho carrega. Um URI data: embutido é decodificado direto.
Os grupos não levam transformação
As transformações do arquivo são assadas no próprio desenho, então os grupos que você recebe são pura estrutura, sem rotação nem escala próprias. O desenho pousa exatamente onde o arquivo diz que ele deve ficar, e você fica livre para girar ou redimensionar o grupo depois sem que nada se desloque por baixo.
O que não é suportado
O leitor cobre o modelo de desenho, não a especificação SVG inteira. Tudo o que segue é pulado sem mensagem.
- Blocos de estilo CSS e atributos class: veja o aviso abaixo
- use e symbol: folhas de sprites e instâncias repetidas importam vazias
- clipPath e mask: o recorte não é aplicado, então um desenho que fora recortado pode aparecer
- Preenchimentos com pattern, que recaem num cinza chapado
- Efeitos de filter: desfoques, sombras e o resto
- marker: pontas de seta e terminações de linha
- stroke-dasharray e stroke-dashoffset, então contornos tracejados importam sólidos
- switch, foreignObject e animação SMIL
- Texto: fonte, tamanho e posição se perdem e resta apenas uma camada substituta nomeada
- Unidades percentuais e relativas, e transformações escritas dentro de um atributo style
Preparando um arquivo que importe limpo
- Converta o texto em contornos antes de exportar; o texto chega apenas como substituto.
- Expanda contornos, tracejados, padrões e qualquer efeito de filtro que você queira manter.
- Libere as máscaras de recorte, ou corte o desenho para o que deve ficar visível.
- Expanda símbolos e instâncias repetidas para que nada dependa de use.
- Exporte com atributos de apresentação em vez de CSS, e dê ao documento um viewBox.
Tamanho e posicionamento
A largura e a altura do documento são lidas em pixels, pontos, paicas, polegadas, milímetros ou centímetros, e combinadas com o viewBox para dimensionar o desenho de forma sensata. Um arquivo dimensionado em porcentagens (o típico logotipo web com width=100%) é importado no tamanho do seu viewBox em vez de ser esticado. O desenho é então centrado na sua tela.