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 desenho vetorial copiado de outro aplicativo, com os grupos
Nenhum grupo extra é criado em volta do desenho: as formas e os grupos do nível mais alto do SVG chegam como camadas de nível mais alto. Importado de um arquivo, o primeiro grupo do nível mais alto recebe o nome do arquivo. Colado da área de transferência, o desenho mantém os próprios grupos e nomes, e chega centralizado na tela e selecionado.
Os grupos que você copiou em outro aplicativo vetorial chegam como grupos, aninhados do mesmo jeito, então uma colagem não chega embrulhada em camadas extras. Alguns aplicativos deixam os grupos de fora da cópia vetorial que põem na área de transferência. No Windows, o Celas Studio então pega o agrupamento da outra cópia que esses aplicativos deixam ali, desde que ela bata com as formas uma a uma e não tenha recorte.
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.
Alguns programas vetoriais escrevem uma forma com formas dentro dela em três partes: o preenchimento, as formas de dentro e uma cópia do contorno por cima. O Celas Studio junta essas partes de novo. O preenchimento e o contorno viram uma única camada de Forma, as formas do meio viram filhas dela, e o contorno dela fica em Frente para continuar por cima, como no original.
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. Um grupo que só guarda uma transformação, sem nome, id nem outro ajuste, não é mantido: o conteúdo dele pousa direto onde o grupo o teria posto.
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.