SVG a PNG con Sharp: tamaño, densidad y exportaciones nítidas

En un proceso con una versión actual de Sharp, parte del SVG en cada exportación y llama a resize() con el ancho en píxeles que realmente necesitas. Si necesitas un recurso 2x, solicita el doble de píxeles de salida. No crees primero un PNG pequeño para después ampliarlo. Tampoco copies una antigua solución con density en todos los procesos: nuestra prueba con Sharp 0.34.4 renderizó los mismos píxeles con y sin una densidad de entrada mayor.

Renderiza un PNG 1x y otro 2x desde el SVG

El constructor de Sharp acepta un archivo o un búfer SVG, y su API de redimensionado establece las dimensiones de salida. Para un icono cuadrado de 64 unidades que aparecerá a 256 píxeles CSS, exporta un PNG de 256 píxeles para uso 1x y otro de 512 píxeles para uso 2x:

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

Omitir la altura conserva la relación de aspecto del original con el comportamiento habitual de redimensionado de Sharp. Elige anchos de salida reales para tu destino; «2x» se refiere a las dimensiones en píxeles respecto al tamaño de visualización CSS previsto, no a un atributo SVG ni a una garantía para todas las pantallas. Si quieres ver el icono a 256 píxeles CSS, compara los PNG de 256 y 512 píxeles a ese tamaño de visualización y decide si el archivo mayor justifica su peso.

Nuestro icono original de prueba declaraba width="64" height="64" viewBox="0 0 64 64". Lo renderizamos a 64, 512 y 1,024 píxeles con la versión Sharp 0.34.4 fijada en el repositorio. Los resultados de 512 y 1,024 píxeles se generaron desde el SVG, tenían esquinas transparentes y centros pintados opacos, y mostraban las dimensiones solicitadas en sus metadatos. Son observaciones de este ejemplo y versión, no una evaluación de todos los diseños SVG.

Prueba original de renderizado con Sharp 0.34.4

La figura muestra el fallo de forma concreta: cuando la primera salida es un PNG de 64 píxeles, un redimensionado posterior interpola esos píxeles. Ya no tiene trazados que volver a dibujar. En esta prueba, nuestros resultados de 512 píxeles directos y con densidad ajustada fueron idénticos en todos los canales RGBA sin procesar. El SVG original, el script de renderizado y los metadatos de los resultados se conservan en el paquete de investigación del artículo.

¿Necesitas density en Sharp?

La opción density del constructor de Sharp controla los DPI utilizados al leer la entrada SVG o PDF; su valor predeterminado documentado es 72. Es diferente de solicitar un ancho final en resize(). Puedes encontrar ejemplos antiguos de Sharp que aumentan la densidad de entrada para evitar una ampliación borrosa. Esos ejemplos describen un síntoma histórico real: el problema #1421 de Sharp informa de un SVG de 32 píxeles que se pixelaba al ampliarlo a 512 píxeles en 2018. No demuestran que esa solución siga siendo necesaria en una instalación actual.

Probamos exactamente este par con Sharp 0.34.4:

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

Para nuestro icono vectorial de 64 píxeles, ambos procesos produjeron los mismos píxeles RGBA de 512 × 512. Establece la densidad de entrada solo cuando un archivo concreto y la versión instalada de Sharp demuestren que hace falta, y repite la comparación después de actualizar. No trates un número de DPI mayor como un interruptor universal de nitidez. La primera pregunta útil es si todavía tienes geometría vectorial cuando Sharp renderiza el PNG final.

Si también trabajas con PDF, prueba esa entrada por separado: este experimento de SVG no establece el comportamiento de PDF. Asimismo, withDensity() en la documentación más reciente de Sharp describe metadatos DPI de salida; es una operación diferente de la densidad de renderizado de entrada SVG del constructor.

Comprueba las dimensiones, la transparencia y el contenido original

Utiliza la API de metadatos de Sharp sobre la salida en lugar de deducir las dimensiones a partir del zoom de una vista previa:

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

Para el ejemplo cuadrado de aquí, las dimensiones esperadas son 256 × 256 y 512 × 512. hasAlpha indica un canal alfa, pero no demuestra que una esquina concreta sea transparente; inspecciona el archivo o muestrea píxeles si la transparencia importa para tu entrega. El alfa de la esquina de nuestro ejemplo era cero y el del centro era 255 en todas las salidas probadas. Un rectángulo blanco dentro del SVG, en cambio, se pintaría en cada PNG, independientemente del formato PNG.

Si un renderizado grande recién creado sigue pixelado, inspecciona el contenido del SVG. El estándar SVG permite un elemento <image> que incrusta o vincula una imagen rasterizada. Por tanto, un archivo puede tener extensión .svg mientras el diseño interior sigue siendo un PNG de baja resolución. Nuestra guía para encontrar imágenes rasterizadas dentro de SVG muestra cómo comprobar los objetos y el XML. Aumentar el ancho de salida de Sharp no puede convertir esos píxeles incrustados en trazados.

Comprueba también el destino. Un archivo de 512 píxeles mostrado a 1,024 píxeles puede parecer borroso. Un visor ampliado muy por encima del 100% revela la cuadrícula del PNG incluso cuando la exportación es correcta. Compara al tamaño y fondo reales de visualización y después decide si entregar un PNG mayor o el propio SVG. Para la web, SVG en línea y SVG en un elemento de imagen ofrecen diferentes opciones de integración; ninguna requiere PNG cuando el destino admite SVG.

Dónde encaja PerfectVector

Sharp rasteriza un SVG; no recupera trazados editables de un PNG. Si tu original es únicamente un icono o logotipo rasterizado, crea e inspecciona un SVG antes de este proceso de exportación. La guía de iconos PNG a SVG para un kit de interfaz explica la geometría coherente y las comprobaciones de entrega de un conjunto. El proceso de imagen a vector de PerfectVector puede crear una alternativa SVG a partir de diseños que solo existen rasterizados. Abre el resultado, comprueba su silueta, sus detalles pequeños y si contiene trazados reales, y después renderiza los PNG 1x y 2x desde el SVG aprobado. Si ya tienes un SVG original limpio, consérvalo y utiliza Sharp directamente.

Preguntas frecuentes

¿Por qué mi salida SVG a PNG de Sharp se ve borrosa? Comprueba si el proceso creó primero un PNG pequeño y después lo amplió. Luego inspecciona el SVG en busca de contenido rasterizado incrustado y compara el PNG entregado a su tamaño real de visualización. En una versión actual de Sharp, prueba el renderizado directo del SVG al tamaño final antes de añadir una solución de densidad de entrada.

¿Es necesario density: 576 para una ampliación de ocho veces? No fue necesario para nuestro ejemplo SVG de 64 a 512 píxeles en Sharp 0.34.4: el redimensionado directo y el ajustado por densidad produjeron píxeles RGBA idénticos. Tu SVG y el renderizador instalado pueden comportarse de otra forma, así que prueba esas entradas exactas en lugar de adoptar el número como regla.

¿Cómo creo un PNG 2x transparente? Renderiza desde el SVG al doble de las dimensiones CSS previstas y exporta como PNG. Confirma el ancho y alto resultantes y después inspecciona una zona sin pintar para comprobar la transparencia. Un lienzo transparente no elimina una forma de fondo que ya esté en el SVG.

Fuentes

1. Sharp — Constructor — compatibilidad con entrada SVG y la opción de entrada density.
2. Sharp — Redimensionar imágenes — comportamiento del tamaño de salida utilizado en los ejemplos.
3. Sharp — Metadatos de entrada — comprobaciones de dimensiones y metadatos alfa.
4. Sharp en GitHub — Problema #1421 de pixelación al convertir SVG a PNG — síntoma histórico comunicado, separado explícitamente de la prueba con la versión actual fijada.
5. Sharp — Opciones de salida — distingue los metadatos más recientes de densidad de salida de la densidad de renderizado de entrada.
6. W3C — Contenido incrustado de SVG 2 — por qué un SVG puede contener píxeles rasterizados.

Si el original solo existe rasterizado, crea una alternativa SVG con PerfectVector, inspecciona sus trazados y utiliza Sharp para renderizar el archivo aprobado a cada tamaño PNG necesario.