Importar SVG
Traer dibujo vectorial desde Illustrator, Affinity Designer, Inkscape o Figma como capas de forma editables, y las funciones de SVG que no sobreviven.
Un SVG se convierte aquí en geometría de verdad: los trazados pasan a ser capas de forma con puntos de anclaje y manejadores que puedes editar con la herramienta Nodo, no una imagen de un dibujo. Los grupos del archivo pasan a ser grupos en el panel Capas.
Hay cuatro maneras de entrar, y todas ejecutan el mismo lector:
- Archivo ▸ Importar ▸ SVG… importa en el proyecto que tengas abierto
- Archivo ▸ Abrir… con un SVG seleccionado construye a su alrededor un proyecto nuevo sin título
- Soltar el archivo en el lienzo lo importa; soltarlo en otro sitio lo abre como proyecto nuevo
- Ctrl+V pega el dibujo vectorial copiado desde otra aplicación, grupos incluidos
No se añade ningún grupo extra alrededor del dibujo: las formas y los grupos de primer nivel del SVG llegan como capas de primer nivel. Importado desde un archivo, el primer grupo de primer nivel toma el nombre del archivo. Pegado desde el portapapeles, el dibujo conserva sus propios grupos y nombres, y llega centrado en el lienzo y seleccionado.
Los grupos que copiaste en otra aplicación vectorial llegan como grupos, anidados de la misma forma, así que un pegado no llega envuelto en capas de más. Algunas aplicaciones dejan fuera los grupos en la copia vectorial que ponen en el portapapeles. En Windows, Celas Studio toma entonces la agrupación de la otra copia que esas aplicaciones dejan ahí, siempre que coincida forma por forma con las formas y no lleve recortes.
Qué se convierte en qué
| En el SVG | En Celas Studio |
|---|---|
| g, a y un svg anidado | Una capa de grupo |
| path, rect, circle, ellipse, polygon, polyline, line | Una capa de forma por cada uno |
| image | Una capa de imagen |
| linearGradient, radialGradient | Un relleno o un trazo de degradado en la forma que lo use |
| text | Una capa marcador de posición vacía, con el nombre de los primeros caracteres |
Se entiende cualquier comando de trazado, incluidos los arcos elípticos, y todo se convierte en Béziers cúbicas. Un trazado compuesto (una letra O, un donut, cualquier cosa con un agujero) sigue siendo una sola capa de forma con sus contornos interiores intactos, así que el agujero sigue funcionando y el conjunto se sigue editando como un solo objeto.
Los rellenos, la regla de relleno, los contornos, el grosor del contorno, los extremos y las uniones, la opacidad y los degradados llegan todos, y el grosor del contorno se escala junto con el dibujo para que el peso de línea se vea bien. Cualquier cosa marcada como oculta en el archivo llega oculta.
Algunos programas vectoriales escriben una forma que tiene formas dentro en tres partes: su relleno, las formas de dentro y una copia de su contorno encima. Celas Studio vuelve a juntarlas. El relleno y el contorno pasan a ser una sola capa de forma, las formas intermedias pasan a ser sus hijas, y su contorno se pone en Delante para que se quede encima, como en el original.
Los colores se leen en todas las formas CSS que usa el modelo de dibujo: colores con nombre, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() y rgba(), y se aceptan porcentajes en las formas numéricas. Las formas hexadecimales de cuatro y ocho dígitos llevan su alfa consigo.
Un rectángulo redondeado con rx distinto de ry se importa con esquinas genuinamente elípticas. Cuando rx y ry coinciden, sigue siendo un rectángulo normal que lleva un radio de esquina, así que el manejador de radio de la herramienta Nodo sigue funcionando en él.
Una etiqueta image enlazada se resuelve respecto a la carpeta del propio SVG, así que el dibujo que hace referencia a un archivo hermano se carga. Un URI data: incrustado se descodifica directamente.
Los grupos no llevan transformación
Las transformaciones del archivo se hornean en el propio dibujo, así que los grupos que obtienes son estructura pura, sin rotación ni escala propias. El dibujo aterriza exactamente donde el archivo dice que debe estar, y luego eres libre de rotar o escalar el grupo sin que nada se desplace por debajo. Un grupo que no contiene más que una transformación, sin nombre, id ni ningún otro ajuste, no se conserva: su contenido llega directamente adonde lo habría puesto el grupo.
Qué no se admite
El lector cubre el modelo de dibujo, no toda la especificación de SVG. Todo lo siguiente se salta sin ningún mensaje.
- Los bloques de estilo CSS y los atributos class: consulta el aviso de abajo
- use y symbol: las hojas de sprites y las instancias repetidas se importan vacías
- clipPath y mask: el recorte no se aplica, así que el dibujo que quedaba recortado puede aparecer
- Los rellenos de patrón, que recurren a un gris plano
- Los efectos de filtro: desenfoques, sombras y demás
- marker: puntas de flecha y remates de línea
- stroke-dasharray y stroke-dashoffset, así que los contornos discontinuos se importan continuos
- switch, foreignObject y la animación SMIL
- El texto: la fuente, el tamaño y la posición se pierden y solo queda una capa marcador de posición con nombre
- Las unidades porcentuales y relativas, y las transformaciones escritas dentro de un atributo style
Preparar un archivo que se importe limpio
- Convierte el texto en contornos antes de exportar; el texto llega solo como marcador de posición.
- Expande los contornos, las líneas discontinuas, los patrones y cualquier efecto de filtro que quieras conservar.
- Libera las máscaras de recorte, o recorta el dibujo a lo que deba verse.
- Expande los símbolos y las instancias repetidas para que nada dependa de use.
- Exporta con atributos de presentación en lugar de CSS, y dale al documento un viewBox.
Tamaño y colocación
La anchura y la altura del documento se leen en píxeles, puntos, picas, pulgadas, milímetros o centímetros, y se combinan con el viewBox para escalar el dibujo con sensatez. Un archivo dimensionado en porcentajes (el típico logotipo web con width=100%) se importa a su tamaño de viewBox en lugar de estirarse. Después el dibujo se centra en tu lienzo.