PSD a SVG (ráster PNG en el interior): una ventana gráfica XML alrededor de un mapa de bits aplanado, excelente para incrustar, no para vectorización automática
Aquí el SVG es un contenedor liviano: el compuesto de “fusión visible” de Photoshop (a menudo PNG) está incrustado en `<imagen>` con `viewBox` y ancho/alto para que los wikis, las páginas de revisión y los documentos de componentes puedan hacer referencia a un tipo MIME. Los detalles de los píxeles todavía están limitados por el mapa de bits incrustado; al hacer zoom más allá de los píxeles reales, se verán bloques, lo cual no tiene relación con la "escala vectorial infinita". La colaboración necesita una línea explícita: se trata de una vista previa o un arte de marcador de posición, no una fuente vectorial editable; Las ediciones de copia y forma pertenecen a PSD, Figma o Illustrator. También tenga cuidado con CSP, enlaces directos y peso en línea: insertar un PNG enorme como base64 en HTML puede arruinar TTFB; generalmente prefiera una URL estática con huellas digitales y encabezados de caché.
Cómo usar PSD a SVG en línea: congelar capas visibles, cargar, descargar un SVG que envuelva el PNG, comparar la relación de aspecto y la nitidez con la vista PSD fusionada en un navegador, luego archivar la versión y aplicar hash con el ticket
- En Photoshop, confirme las capas visibles hacia afuera, el tamaño de píxel de la mesa de trabajo y que el borde largo de exportación cubra el ancho del CSS objetivo multiplicado por el DPR del dispositivo; ocultar el marcado de reseña. Si el sitio prohíbe imágenes remotas, decida de antemano entre URI de datos en línea y rutas estáticas del mismo origen para que Content-Security-Policy no bloquee la producción.
- Abra el SVG descargado directamente en un navegador y nuevamente dentro de la página de destino mediante `<img>` o iframe; verifique que `viewBox` más la escala CSS no se estire inesperadamente. Haga zoom al 200 %: si las letras pequeñas o las líneas finas se suavizan, aumente la resolución de fusión o la interpolación en PS; el shell SVG no inventará detalles.
- Almacene el SVG junto al PSD de origen, las notas de los parámetros y un hash de archivo en el mismo registro de versión; utilice URL con huellas digitales en las bibliotecas de componentes para que las cachés CDN de larga duración no sigan mostrando una miniatura antigua después de las actualizaciones de diseño.
Preguntas frecuentes sobre PSD a SVG (ráster en SVG, no reconstrucción de ruta)
Las partes interesadas ven "SVG" y asumen un "relleno" CSS con estilo de icono o una cirugía de ruta: ¿cómo trazamos un límite estricto frente a los entregables vectoriales reales?
Indique claramente: este SVG es un contenedor de vista previa cuyo héroe vive en el PNG incrustado al que hace referencia `<image>`; no incluye contornos vectoriales independientes ni objetos de texto en vivo. El abastecimiento de vectores debe seguir su sistema de diseño o proceso de exportación de escritorio. Sin esa frase, los equipos de front-end la conectan como un componente de glifo y luego culpan al convertidor cuando los colores y los trazos no se pueden editar.
El activo se ve nítido en una computadora portátil Retina pero suave en una pantalla estándar o después de la escala CSS. ¿Eso significa que SVG falló o es simplemente resolución incrustada versus matemáticas de diseño?
Inspeccione `naturalWidth` versus el ancho de CSS y devicePixelRatio, y verifique si hay transformaciones que no sean enteras. Los problemas casi siempre se deben a píxeles incrustados insuficientes o a una extensión del diseño, no a una sintaxis SVG rota. A/B contra un PNG exportado con el mismo tamaño combinado desde Photoshop para separar la resolución de origen de los errores del contenedor.
¿El PNG incrustado debería estar basado en base64 o referenciado por URL? ¿Cuáles son las compensaciones habituales en cuanto a rendimiento, almacenamiento en caché e higiene de SEO?
La inserción de globos HTML perjudica la reutilización de la caché y puede dañar TTFB; Los archivos estáticos externos con huellas digitales y encabezados de caché largos se adaptan a la mayoría de las incrustaciones de sitios. Reserve base64 para insignias pequeñas, archivos estrictos de un solo archivo o paquetes similares a correos electrónicos donde una segunda solicitud es imposible; nunca coloque silenciosamente una vista previa de varios megabytes en el encabezado del documento.
Preocupaciones de seguridad o cumplimiento sobre scripts y cargas remotas: ¿cómo describimos el modelo de amenaza para estos SVG envueltos en ráster y fortalecemos la entrega?
Las salidas bien formadas deben ser `<svg>` estáticas más `<imagen>` sin `<script>` ni entidades externas; seguir ejecutando análisis de políticas, bloqueando cargas no confiables desde rutas activas y compilaciones congeladas mediante hash. Si los usuarios pueden cargar SVG arbitrarios, necesita desinfección y etiquetas de listas permitidas; el hecho de que su generador sea estático no inmuniza toda la superficie del producto.
¿Este SVG puede pasar directamente a imprenta o a impresión de gran formato como mecánica final?
Por lo general, no: el contenedor apunta a la colaboración de pantalla y la resolución incrustada puede no cumplir con las reglas de tramas de líneas de impresión, sangrado, colores planos o incrustación de fuentes. Manténgase informado sobre los flujos de trabajo TIFF/PDF/Illustrator y etiquete los tickets como "no un maestro de impresión". Enviar este archivo a un proveedor sin esa exención de responsabilidad invita a costosos reemplazos y peleas de responsabilidad.