PerfectVector
Por Irene Kim10 min de lectura

De PSD a SVG sin perder capas: qué se conserva

Un PSD puede contener capas de formas, texto editable, máscaras y píxeles, pero un SVG no lo conservará todo. Descubre qué partes exportar, acoplar o vectorizar primero.

En esta página

No puedes convertir cada capa de Photoshop en una capa SVG equivalente. Un PSD puede mezclar capas de formas, texto editable, máscaras, efectos, objetos inteligentes y píxeles normales. SVG puede representar trazados, texto, grupos e imágenes, pero esos objetos no se corresponden limpiamente con el modelo de documento de Photoshop. El flujo más seguro es conservar el contenido vectorial mediante una exportación nativa y vectorizar solo la ilustración rasterizada que no tenga un original vectorial reutilizable.

Decisión rápida
  • Si el PSD ya contiene trazados de formas limpios, consérvalos o pásalos a un editor vectorial.
  • Mantén el texto editable solo cuando el destino tenga la fuente y pueda gestionar texto SVG de forma fiable. De lo contrario, convierte una copia de entrega en contornos.
  • Trata máscaras, efectos, objetos inteligentes y capas de píxeles como apariencia visible, no como estructura de capas portable.
  • Si solo necesitas la ilustración acoplada como formas editables, revisa la imagen compuesta guardada y vectorízala.
  • Abre el SVG final e inspecciona sus objetos. La extensión .svg no demuestra que se hayan conservado capas ni que los píxeles se hayan convertido en trazados.

Una capa PSD no es una capa SVG

El panel Capas de Photoshop describe cómo se edita un documento. SVG describe lo que dibuja un renderizador. Son funciones diferentes.

Contenido PSDMejor métodoQué esperar en SVG
Capa de forma o trazado de PhotoshopConservarlo o transferirlo de forma nativaTrazados editables, si la exportación conserva geometría vectorial
Texto editableMantenerlo editable o convertir una copia en contornosEl texto editable necesita la fuente; los contornos conservan el aspecto, pero pierden la edición de texto
Capa de píxelesVectorizar solo si las formas vectoriales son útilesTrazados nuevos que aproximan los píxeles visibles
Máscara de capa o de recorteReconstruir o acoplar deliberadamentePuede conservarse el recorte visible, pero no la configuración de edición de Photoshop
Objeto inteligenteAbrir primero su originalEl resultado colocado por sí solo puede mostrar únicamente píxeles renderizados
Efecto de capa, textura o sombra suaveConservar rasterizado o simplificarLos efectos suaves suelen convertirse en píxeles o un conjunto grande de formas

El flujo actual de recursos de imagen de Adobe puede generar recursos SVG a partir de capas o grupos de capas con nombre. La misma documentación indica que un recurso de grupo de capas se acopla, aunque el grupo contenga formas y texto editable. En otras palabras, elegir SVG como salida no convierte la jerarquía de Photoshop en una jerarquía SVG equivalente.

Haz inventario del archivo antes de convertirlo

Duplica el PSD antes de cambiar nada. Inspecciona después los paneles Capas, Trazados, Propiedades y Objetos inteligentes.

  1. Oculta las capas de píxeles. Si queda ilustración útil, quizá ya tengas formas vectoriales que merezca la pena conservar.
  2. Selecciona cada capa de texto. Registra la familia y el peso de la fuente antes de convertir el texto en contornos o moverlo.
  3. Abre los objetos inteligentes. Un archivo Illustrator vinculado u otro original vectorial es mejor que vectorizar su vista previa renderizada.
  4. Activa y desactiva máscaras y efectos. Decide si importa la construcción editable o solo el aspecto final.
  5. Comprueba la imagen compuesta guardada. Si el archivo se abre de forma diferente en otro equipo, vuelve a guardar una copia verificada antes de usar un flujo acoplado.

Adobe también documenta la exportación de capas seleccionadas como archivos independientes. Las exportaciones separadas pueden conservar límites útiles entre recursos, pero siguen sin crear un SVG que se comporte como el conjunto original de capas PSD.

Elige el método según el tipo de objeto
Diagrama conceptual de dos métodos que lleva un documento Photoshop con capas a objetos vectoriales conservados o a píxeles acoplados vectorizados en trazados SVG
Dos métodos: conserva los objetos vectoriales existentes cuando puedas; vectoriza solo los píxeles visibles que carezcan de un original vectorial reutilizable.

Método 1: conserva el contenido vectorial

Usa este método para capas de formas, trazados de pluma, texto editable sencillo y objetos inteligentes cuyo original vectorial aún exista.

Mueve o exporta un recurso lógico cada vez y ábrelo en Illustrator, Inkscape u otro editor SVG. Comprueba si el resultado contiene trazados y grupos en lugar de una imagen rectangular única. Si el texto debe seguir siendo editable, abre el SVG en otro equipo que no tenga tu documento Photoshop y confirma que se carga la fuente prevista. Para logotipos y archivos de producción, conserva un archivo maestro de texto editable y crea una copia de entrega con contornos.

No acoples un buen original vectorial solo para pasarlo por un vectorizador. La vectorización redibuja el aspecto renderizado, por lo que puede añadir nodos, alterar curvas y convertir texto en contornos aproximados. La geometría nativa es un punto de partida más limpio.

Método 2: acopla la ilustración visible y vectorízala

Usa vectorización cuando el diseño útil solo exista como píxeles o cuando el aspecto visible guardado del PSD sea el mejor original conservado. Los logotipos planos, insignias, iconos, letras e ilustraciones con límites claros de color suelen ser adecuados. Las fotos, degradados sutiles, texturas de pincel y sombras suaves normalmente no.

Antes de vectorizar:

  1. Oculta lo que no deba aparecer en el vector.
  2. Coloca la ilustración sobre el fondo o transparencia necesarios para la entrega.
  3. Comprueba los pequeños huecos interiores, aberturas y letras finas al tamaño de salida previsto.
  4. Guarda una copia de compatibilidad o exporta un PNG de alta calidad cuando el PSD no tenga una vista combinada fiable.
  5. Conserva el PSD original. La vectorización es un nuevo recurso de entrega, no un sustituto del documento.

Un SVG puede contener legítimamente una imagen rasterizada incrustada según el modelo de contenido incrustado de SVG 2. Un conversor que solo cambie el formato puede, por tanto, colocar los píxeles acoplados del PSD dentro de un SVG sin vectorizarlos. Ampliar e inspeccionar el tipo de objeto permite detectar ese resultado de falso vector.

Cómo se hace con PerfectVector

PerfectVector abre un PSD o PSB compatible mediante su imagen combinada de compatibilidad guardada. El navegador prepara localmente esa imagen visible y te pide revisarla antes de vectorizar. No sube el documento Photoshop original ni afirma reconstruir capas, máscaras, texto editable, efectos, trazados, mesas de trabajo u objetos inteligentes. El flujo de Photoshop a SVG reconstruye los píxeles preparados como trazados SVG.

Por tanto, es el método de vectorización, no el de conservación de capas. Úsalo cuando la imagen compuesta guardada tenga el aspecto correcto y la geometría editable de trazados sea más útil que la construcción original de Photoshop. Después de convertir, inspecciona la silueta, regiones de color, formas de texto, espacio negativo y estructura de nodos. Si el PSD ya contiene originales vectoriales limpios, transfíerelos directamente.

Comprueba qué se conservó en el SVG

Vuelve a abrir el SVG descargado en un editor vectorial en lugar de confiar en la primera vista previa.

  • Selecciona una región de color. Debería comportarse como un trazado o forma, no como parte de un rectángulo de imagen único.
  • Abre el panel Capas u Objetos. Busca una estructura de grupos manejable en lugar de esperar los nombres de capas PSD.
  • Amplía curvas y huecos interiores de letras. Busca zonas aplanadas, cierres accidentales y bordes con ruido.
  • Cambia un color de relleno. Un trazado real debería cambiar de color sin alterar regiones cercanas.
  • Busca en el código un elemento <image> cuando alguna zona siga pixelándose.
  • Importa el SVG a su destino real y comprueba allí tamaño, fuentes, máscaras y efectos.

Si todas las piezas visibles se comportan como un objeto, usa el diagnóstico de desagrupación SVG antes de aplicar operaciones destructivas de trazados. El archivo puede ser un trazado compuesto o una imagen incrustada en lugar de un grupo.

Cuándo el PSD debe seguir siendo PSD

Conserva Photoshop como archivo maestro cuando aún necesites texto editable, capas de ajuste, máscaras, objetos inteligentes, mesas de trabajo, textura fotográfica o efectos. SVG es un formato de entrega sólido para formas gráficas escalables, pero no sustituye un documento Photoshop.

Puedes terminar con dos archivos: el PSD como original editable y un SVG como recurso de producción. Es una transferencia adecuada. Ambos archivos conservan tipos diferentes de editabilidad.

Preguntas frecuentes

¿Puede convertirse un PSD en SVG con todas las capas intactas? No de forma fiable. Parte del contenido de formas y texto puede pasar a SVG, pero máscaras, efectos, objetos inteligentes, capas de ajuste, nombres de capas y capas de píxeles de Photoshop no tienen equivalentes SVG uno a uno. Conserva primero los objetos vectoriales nativos y trata el resto como apariencia renderizada.

¿Por qué mi resultado de PSD a SVG solo tiene una capa? El conversor probablemente usó una imagen compuesta acoplada o incrustó una imagen rasterizada. Un objeto SVG también puede ser un trazado compuesto o grupo, así que inspecciona su tipo antes de suponer que el archivo sigue rasterizado.

¿Guardar un archivo Photoshop como SVG vectoriza los píxeles? No. SVG puede contener imágenes rasterizadas. Una exportación de formato puede colocar píxeles dentro de un contenedor SVG sin vectorizarlos. Comprueba si la ilustración se selecciona como trazados y sigue siendo editable a nivel de objeto.

¿Debo convertir el texto en contornos antes de exportar SVG desde Photoshop? Convierte una copia de entrega cuando el aspecto deba permanecer fijo y ya no haga falta editar el texto. Conserva un archivo maestro con texto editable si puede cambiar la redacción o la traducción. Convertir en contornos no conserva la edición de fuentes; convierte letras en trazados.

¿Puede PerfectVector recuperar capas de Photoshop de un PSD? No. PerfectVector usa la imagen combinada de compatibilidad guardada del archivo compatible y vectoriza esa imagen visible en trazados. No reconstruye el conjunto original de capas Photoshop ni las funciones editables del documento.

Fuentes

  1. Adobe — crear recursos de imagen a partir de capas — Documenta la generación de recursos SVG y el acoplado de recursos de grupos de capas.
  2. Adobe — exportar capas como archivos — Documenta el comportamiento actual de exportación por capa.
  3. Adobe — dibujar formas y trazados en Photoshop — Define las herramientas de forma, pluma y trazado de Photoshop.
  4. W3C — contenido incrustado SVG — Explica por qué un SVG puede seguir conteniendo datos de imagen rasterizada.
  5. PerfectVector — Photoshop a SVG — Describe el flujo compatible de imagen compuesta guardada y sus límites de recuperación de capas.

Si la imagen compuesta guardada es el original que necesitas, revísala en el conversor de Photoshop a SVG, vectorízala, vuelve a abrir el SVG y confirma que las regiones importantes sean trazados.

Más del blog

Convierte tu archivo de imagen en un
SVG editable