Cómo separar los colores de un SVG en archivos individuales

Para separar los colores de un SVG en archivos individuales, agrupa las formas por su color de relleno exacto y exporta cada grupo sobre la misma mesa de trabajo de tamaño completo que el original. No recortes cada color a sus propios límites. El espacio vacío mantiene alineadas las piezas al importarlas, cortarlas, serigrafiarlas o volver a montarlas.

Para un SVG compatible de rellenos sólidos, el Separador de colores SVG gratuito de PerfectVector lo hace localmente en tu navegador. En diseños complejos, puedes seleccionar objetos por relleno en un editor vectorial y exportar cada color manualmente.

La regla para separar con seguridad

• Haz una copia intacta del SVG original.
• Decide si debes fusionar colores casi duplicados antes de separarlos.
• Agrupa por color de relleno exacto; no trates los degradados, patrones o imágenes como colores simples.
• Conserva el ancho, la altura y el viewBox originales en cada salida.
• Conserva la posición original de cada forma y el orden de pintado dentro de un mismo color.
• Importa todos los archivos juntos y verifica su tamaño y alineación antes de cortar material.

Por qué cada archivo de color debe conservar toda la mesa de trabajo

Imagina una flor con un pétalo azul cerca de la esquina superior izquierda y uno rojo cerca de la inferior derecha. Si recortas ajustadamente ambos archivos, cada pétalo pasa a la esquina superior izquierda de su nuevo documento. Los dos SVG ya no comparten un sistema de coordenadas y el montaje requiere adivinar.

Si cada archivo conserva la mesa de trabajo original, cada color permanece en sus coordenadas correspondientes. El archivo que solo contiene azul puede tener mucho lienzo vacío. Es información intencionada de alineación, no un desperdicio.

Concepto de lienzo compartido

El viewBox de SVG define el espacio interno de coordenadas. Consérvalo junto a un ancho y una altura físicos fiables cuando tu cortadora, imprenta o colaborador de producción necesite dimensiones reales.

Los colores exactos no equivalen a los colores visuales

Un SVG puede contener #ff0000 y #fe0000. Parecen casi idénticos, pero son dos valores exactos y producirán dos archivos en un flujo basado en colores exactos. Es más seguro que suponer silenciosamente que el diseñador los quería como un único color de producción.

Antes de separar, revisa la paleta:

El flujo de reducción de paleta explica cómo fusionar colores próximos según su función visual y de producción. Toma primero esa decisión. Un separador no debe decidirla por ti.

Método 1: utiliza el separador gratuito del navegador

El Separador de colores SVG acepta un subconjunto deliberadamente limitado de SVG para conservar el archivo en lugar de devolver capas que parezcan correctas pero no lo sean.

1. Elige el SVG

Selecciona un SVG de hasta 5 MiB. El documento se comprueba dentro de un worker desechable del navegador antes de crear una vista previa o descarga segura. El contenido SVG, el nombre del archivo, los trazados, los colores, las vistas previas y los archivos generados no se envían a PerfectVector.

La versión actual está diseñada para ilustraciones vectoriales con rellenos sólidos opacos: trazados, rectángulos, círculos, elipses, polígonos y polilíneas compatibles con transformaciones habituales. Gestiona los rellenos sólidos compatibles definidos en línea y heredados.

2. Revisa la compatibilidad y el tamaño

Comprueba la composición aceptada, las dimensiones físicas, el viewBox, el número de trazados, la paleta de colores exactos y las advertencias. Si el archivo tiene viewBox pero no un ancho y una altura físicos fiables, confirma una dimensión; la otra mantiene la proporción.

El procesamiento se detiene en lugar de eliminar contenido no compatible. Actualmente, las condiciones que lo detienen incluyen trazos visibles, degradados, patrones, filtros, trazados de recorte, máscaras, texto editable, imágenes incrustadas, referencias reutilizables, SVG anidados, recursos externos, hojas de estilos o clases, scripts, controladores de eventos y colores de corte transparentes.

Ese límite responde al propio modelo SVG. La especificación de pintado de SVG 2 distingue los colores sólidos de los degradados, patrones, opacidad del relleno y comportamiento de los trazos. Un «color» visible no siempre es un valor plano que pueda trasladarse con seguridad a un archivo.

3. Revisa la vista previa de cada color exacto

La herramienta crea una vista previa por cada color opaco exacto. Verifica que:

• las formas esperadas aparezcan en el archivo de color correcto;
• no falte ningún trazo, texto o imagen previstos;
• las dimensiones de la composición coincidan con el original;
• cada capa permanezca en su posición original;
• la paleta contenga el número de colores de producción previsto.

Un SVG de un solo color sigue siendo válido; ya está separado. Los archivos con entre dos y 24 colores exactos reciben la vista normal de capas. Los recuentos superiores compatibles siguen siendo admisibles hasta el límite de seguridad, pero decenas de colores suelen indicar que conviene limpiar primero la paleta. Se rechazan más de 256 colores exactos.

4. Descarga los archivos

Descarga individualmente los archivos de color necesarios o utiliza el archivo comprimido local. Cada salida conserva el mismo ancho, altura, viewBox y sistema de coordenadas. Los nombres de archivo y el orden de las capas son deterministas, por lo que la entrega es repetible.

No necesitas registrarte ni créditos para el separador o sus descargas de capas. Es independiente del flujo de descarga de pago de ráster a vector de PerfectVector.

Método 2: separa colores en un editor vectorial

Utiliza Illustrator, Inkscape, Affinity u otro editor vectorial cuando el SVG necesite reparaciones antes de separarse.

1. Abre una copia y anota el ancho, la altura y el viewBox o la mesa de trabajo del documento.
2. Convierte el texto editable a contornos si el destino requiere formas.
3. Expande o sustituye deliberadamente los trazos, degradados, patrones, máscaras y estructuras de recorte no compatibles.
4. Selecciona una forma representativa y utiliza el comando Select Same Fill Color del editor.
5. Copia las formas seleccionadas a una mesa de trabajo duplicada con las mismas dimensiones y origen.
6. Elimina u oculta los demás colores sin mover las formas seleccionadas.
7. Exporta el archivo de color como SVG y repite.
8. Vuelve a importar todos los archivos juntos para verificar que se superpongan exactamente.

No crees un documento nuevo ajustado a cada selección. Duplica la mesa de trabajo original o utiliza un ajuste de exportación que conserve sus límites.

La edición manual también permite combinar formas del mismo color cuando ayude a la producción. No las unas automáticamente si los huecos, las superposiciones, el orden de pintado original o la edición posterior dependen de objetos separados.

Prepara los archivos para Cricut

La guía actual de carga de imágenes de Cricut indica que los SVG con capas se cargan tal como se diseñaron y aparecen como una imagen agrupada cuyas capas pueden moverse y dimensionarse por separado al desagrupar. También documenta un límite de 5,000 trazados SVG.

Antes de cortar:

1. Carga todos los archivos separados.
2. Añádelos al mismo Canvas sin cambiar sus dimensiones.
3. Confirma que todos indiquen el mismo ancho y altura.
4. Utiliza los controles de posición o un método de registro compartido si el flujo exige una superposición exacta.
5. Asigna la operación y el color de material correctos a cada capa.
6. Realiza una prueba pequeña con material económico.

La guía de elementos no compatibles de Cricut señala específicamente los rellenos de patrón, degradados, trazados de recorte, texto editable, imágenes vinculadas e imágenes incrustadas no compatibles como problemas al cargar vectores con capas. Convierte el texto a formas y simplifica deliberadamente esas características antes de exportar.

Para una revisión más amplia, consulta cómo revisar un SVG antes de cortar. Si los archivos separados se importan con un tamaño inesperado, utiliza el diagnóstico de tamaño incorrecto en SVG antes de redimensionar las capas individualmente.

Errores habituales de separación

Las capas ya no se alinean

Probablemente se recortó cada color a sus propios límites o se pegó en un documento con otro origen. Exporta otra vez con la mesa de trabajo, el ancho, la altura y el viewBox originales.

Un «color» se convirtió en varios archivos

El SVG contiene valores casi duplicados. Decide qué valores tienen la misma función, fusiónalos deliberadamente y repite la separación.

Un degradado desapareció o se rechazó

Un degradado es un servidor de pintura, no un relleno sólido exacto. Sustitúyelo por regiones sólidas deliberadas, conserva el flujo original de degradados o utiliza un método de producción ráster cuando importe la fidelidad tonal.

Faltan texto o trazos

El texto editable y los trazos visibles son estructuras distintas de los trazados de contorno con relleno. Conviértelos a formas en un editor vectorial solo cuando corresponda a los requisitos del destino.

Cricut rechaza el archivo

Comprueba primero los elementos no compatibles y el número de trazados. Un archivo puede ser SVG válido y quedar fuera del subconjunto aceptado por Design Space.

Preguntas frecuentes

¿Un SVG puede contener varios colores? Sí. Las formas SVG pueden utilizar distintos rellenos y trazos, y SVG también admite degradados, patrones, opacidad y pintura referenciada. La separación por colores exactos es más sencilla con rellenos sólidos opacos.

¿Por qué los archivos separados tienen tanto espacio vacío? El espacio vacío conserva la mesa de trabajo y las coordenadas originales. Permite que cada color siga alineado al importar o volver a montar los archivos.

¿Se fusionan automáticamente los colores SVG similares? No. El separador de PerfectVector agrupa solo colores exactos. Fusiona deliberadamente los casi duplicados antes de separar si deben convertirse en un único color de producción.

¿Puedo separar degradados en archivos de color? No como capas de colores sólidos exactos sin cambiar el diseño. Sustituye el degradado por regiones sólidas elegidas, conserva el flujo original de degradados o utiliza una salida ráster cuando importe el detalle tonal suave.

¿El Separador de colores SVG es gratuito? Sí. Los SVG compatibles se comprueban, previsualizan, separan y descargan localmente sin cuenta ni créditos. Los recursos estáticos de la página se cargan normalmente, pero los datos del documento permanecen en el navegador.

Fuentes

1. PerfectVector — Separador de colores SVG — Condiciones actuales de procesamiento local, colores exactos, alineación, compatibilidad y descarga.
2. W3C — Pintado en SVG 2 — Define rellenos, trazos, pintura sólida, degradados, patrones, opacidad y pintura referenciada.
3. Cricut — Cómo cargar imágenes en Design Space — Comportamiento actual de importación de SVG con capas y límite de trazados.
4. Cricut — Carga de imágenes: elementos no compatibles — Limitaciones actuales de degradados, patrones, recortes, texto e imágenes al cargar vectores con capas.

---

¿Quieres mantener alineados todos los colores? Abre el Separador de colores SVG gratuito, revisa las vistas previas de colores exactos y las dimensiones y descarga solo cuando la mesa de trabajo compartida supere tu comprobación.