Exportación de SVG a PNG con IA

Al exportar un icono SVG a PNG, intento conservar la calidad de la imagen sin perder el tamaño (16 px x 16 px). Lo he intentado varias veces, pero todavía tengo que producir una imagen de icono que conserve una buena calidad. Cada intento produce una imagen muy borrosa con una resolución de pantalla de 72 ppi. Cuando aumento la resolución a 300 ppp, la imagen es clara pero las dimensiones del ícono ahora son 67px x 67px. ¿Hay alguna forma de bloquear las dimensiones al aplicar una resolución de pantalla más alta? Intenté esto a través de la exportación normal y también intenté establecer los valores dentro de la mesa de trabajo.

¿ Está reduciendo el SVG antes de intentar guardar como PNG? -- esa es tu mejor apuesta.
El SVG ya tiene un tamaño de 16px x 16x antes de exportarlo a PNG.

Respuestas (2)

No, has entendido mal las cosas. No hay diferencia entre una imagen de 16 x 16 píxeles a 300 DPI y una imagen de 16 x 16 píxeles a 72 DPI. ¡El valor DPI simplemente no cambia la claridad de la imagen de ninguna manera! 16 píxeles son 16 píxeles, un píxel es una muestra, la muestra es la misma independientemente. No existe tal cosa como una resolución de pantalla más alta en este sentido. Hacer lo que pides no lograría absolutamente nada.

Solo los dispositivos tienen una propiedad de resolución que las imágenes no tienen. Para las imágenes, el valor DPI es una pieza de metadatos. Es como poner una nota adhesiva en la imagen que diga que este es el tamaño que desearía imprimir en su dispositivo de copia impresa, es decir, una impresora. Se entiende universalmente que las pantallas ni siquiera comienzan a tratar de prestar atención a esto.

Esto no significa que su pregunta esté rota, la única razón por la que mencioné lo anterior es que muchas personas cometen su error y, francamente, ni siquiera debería ir allí. Si tiene dificultades para entender DPI, simplemente ignórelo, sabrá cuándo lo necesita y, básicamente, solo se aplica para imprimir de todos modos.

Como ha descubierto, tener un archivo vectorial vectores no significa contenido infinitamente escalable. Los tamaños de iconos particularmente pequeños requieren que modifique manualmente el contenido para llegar a la cuadrícula de píxeles. Puede intentar habilitar el ajuste de píxeles para su arte y modificar los puntos *.

Alternativamente, más cerca de lo que cree que está sucediendo, podría probar una técnica de filtrado diferente. Es posible cambiar a, tipo de renderizado optimizado o un filtro Sinc en ventana (Lanczos), vea esta publicación . Sin embargo, debido a que su imagen es extremadamente pequeña, dudo que esto lo ayude de alguna manera práctica. Esta es la razón por la que se insinúan las fuentes, ya que realmente no hay forma de evitar el hecho de que ajustar los puntos es la mejor estrategia.

* O aumente la escala, habilite el ajuste de píxeles y reduzca la escala para un enfoque rápido y sucio. Alternativamente, puede configurar la cuadrícula en un tamaño de píxel/medio píxel y usar jooSnapToDocumentGrid.jsx en los puntos que considere más problemáticos.

Gracias por la respuesta joojaa. Solo introduzco lo que he realizado en Adobe Illustrator. Ya realicé todos los ajustes manuales de mis íconos en una cuadrícula ajustada de 16px x 16px. Nada se está reduciendo. He creado todos mis SVG con el tamaño de cuadrícula en el que se utilizarán. En cuanto a los png exportados y luego vistos en el tamaño exportado 16px x 16px a 72 PPI o 300 PPI. Son significativamente diferentes. sin embargo, al observar las dimensiones del archivo en el Explorador de archivos, las dimensiones han cambiado con el tamaño de la resolución.
@Bgreen, por supuesto, las imágenes más grandes se ven diferentes, una imagen de 16x16 píxeles a 300 ppp es lo mismo que una imagen de 16x16 píxeles a 72 ppp, pero eso no es lo que tiene. Lo que estoy diciendo es verdad aunque sea difícil de aceptar.
No es difícil de aceptar. Sin embargo, si inserto las imágenes png de cada una, ambas muestran las mismas dimensiones de 16 px x 16 px en Word, PowerPoint, Visio, incluso en Illustrator, etc. La calidad de cada una es evidente. png ha crecido más allá de 16 x 16 ahora a aproximadamente 67 x 67. Para que pueda usar el archivo dentro de ciertas aplicaciones, el ícono no debe ser más grande que 16 x 16. Solo necesito que la calidad sea buena como un PNG.
@Bgreen sí, pero tiene menos muestras, por lo que la calidad no puede ser tan buena a menos que sus gráficos se alineen mejor con las muestras. Puede probar diferentes filtros, pero aún así no hará una gran diferencia. Si está por debajo del límite de nyquist, entonces lo está y no hay forma de evitarlo.
@Bgreen y ¿con qué frecuencia ve imágenes en tamaño 1: 1 en Illustrator, Word o PowerPoint? El powerpoint predeterminado y la palabra se amplían más allá de un píxel es una unidad. No hay forma de comprobar eso. En Illustrator, puede ver el tamaño correcto si presiona el zoom al 100%
Lo que quiero decir es que la calidad es lo suficientemente evidente para cualquiera que vea el ícono con un nivel de zoom del 100 % (sin acercar). La calidad del ícono es lo suficientemente mala como para justificar cierto nivel de acciones correctivas para limpiar el ícono de 16 x 16 para hacerlo más atractivo para el usuario de la aplicación.
Bien, si en Illustrator ve una imagen aceptable a 300 ppp insertada en Illustrator Y (muy importante) hace zoom al 100% y su imagen tiene 16 píxeles de ancho en el lienzo. Luego, puede mejorar la situación cambiando ligeramente el filtrado, si no, entonces no hay dados. Si haces esto de palabra, entonces estás mintiendo por ti mismo. Pero entonces su imagen vectorial debería verse como una mierda con ese zoom del 100% también antes de exportar. SI no, intente cambiar el antialiasing a tipo optimizado.
@Bgreen todavía no tiene nada que ver con DPI solo con el comportamiento de ajuste.

IPP no importa

Como dice Joojaa , el PPI no importa. El valor PPI en sí mismo no hace ninguna diferencia, todo lo que importa son las dimensiones de los píxeles. una imagen de 16 × 16 píxeles a 300 PPI y 72 PPI son exactamente lo mismo. Si está trabajando en Illustrator y exportando para la pantalla, siempre exporte a 72 PPI (suponiendo que su documento tenga el tamaño deseado), pero esto en realidad no tiene nada que ver con el valor PPI asignado al archivo de salida, es solo un acceso directo a la salida en el tamaño correcto.

El problema es que su SVG no fue diseñado para mostrarse en 16 × 16 píxeles. Los vectores no tienen un tamaño inherente, por lo que la mayoría de las veces no importa, puedes escalar tanto como quieras. El problema aparece cuando su vector ya no es un vector, es decir, está compuesto de píxeles.

Un ejemplo...

Tome este ícono SVG de boom box. El vector original de la izquierda se ve muy bien. Vea lo mismo a 16 × 16 píxeles y se ve terrible. Puede ver que esto se debe a que las rutas no se alinean con los píxeles. Hay demasiada información para ser vista en la cantidad de píxeles disponibles.

ingrese la descripción de la imagen aquí

Imagen 1: vector original (izquierda), vista previa de 16 × 16 píxeles (derecha)

La solución es diseñar el ícono específicamente para el tamaño en el que se verá. Tome el mismo ícono nuevamente y vuelva a dibujar las rutas para que se alineen con la cuadrícula de píxeles y tenga un ícono limpio y agradable (limpio, al menos, el altavoz / círculo probablemente necesite más ajustes):

ingrese la descripción de la imagen aquí

Imagen 2: vector original de vista previa de 16 × 16 píxeles (izquierda), rutas ajustadas para adaptarse a la cuadrícula de píxeles (derecha)

Esto significa que en muchos casos deberías tener diferentes versiones del mismo ícono para diferentes tamaños. O al menos diseñar con el tamaño más pequeño en mente.

Lectura relacionada:

Exportación de SVG a PNG con IA
RespuestasAquíPolítica de privacidad1y, 0v