Llega un logo en dos archivos: logo.svg a 3 KB y logo.png a 40 KB. Ambos tienen el mismo aspecto en la pestaña del navegador. Subirlos para llenar la pantalla de un proyector y solo uno permanece nítido. Intenta subirlos a un perfil social y solo se acepta el otro. Y si lo único que tienes es el PNG, las herramientas que prometen "convertir PNG a SVG" devuelve algo que técnicamente es un SVG pero no el archivo que habría creado tu diseñador.
Esta guía explica la diferencia entre los dos formatos en términos de lo que almacena cada archivo, cuándo usar cuál, qué sucede cuando se representa un SVG en píxeles y qué puede y qué no puede recuperar un PNG en formas vectoriales. Incluye números reales del motor de seguimiento detrás de los convertidores Toolz y se encuentra debajo centro de herramientas de imagen.
TL;Dr: SVG es un formato vectorial: almacena formas como geometría, por lo que escala a cualquier tamaño sin desenfoque y es ideal para logotipos, iconos y diagramas. PNG es un formato rasterizado: almacena una cuadrícula fija de píxeles, sin pérdidas, que se adapta a capturas de pantalla, ilustraciones detalladas y cualquier lugar que solo acepte imágenes. Pasar de SVG a PNG es exacto al tamaño que elijas; usar el Convertidor SVG a PNG a 2x o 4x para una salida nítida. Pasar de PNG a SVG es el rastreo, que reconstruye formas a partir de píxeles y no recupera un diseño original. Funciona para logotipos planos y arte lineal, y falla en las fotos. Todas las conversiones aquí se ejecutan en el lado del cliente, nada cargado, gratis, sin registro.
¿cuál es la diferencia entre SVG y PNG?
SVG describe una imagen como instrucciones para dibujarla, mientras que PNG almacena el dibujo terminado como píxeles. Todo lo demás sobre los dos formatos se deriva de esa única diferencia.
Un archivo SVG, definido por el W3C en Gráficos vectoriales escalables (SVG) 2, es texto XML. Enumera rutas, círculos, rectángulos, degradados y texto, cada uno con coordenadas y colores. Nada en él dice cuántos píxeles tiene la imagen. Cuando un navegador lo muestra, el renderizador determina qué píxeles cubre cada forma en el tamaño de la pantalla, razón por la cual el mismo archivo está nítido en un teléfono y en un monitor 5K.
Un archivo PNG, especificado por el W3C como Gráficos de red portátiles y publicado como ISO/IEC 15948, es una cuadrícula de píxeles de colores comprimidos con DEFLATE. La compresión no tiene pérdidas, por lo que los píxeles que decodifica son exactamente los píxeles que se guardaron. Un PNG puede transportar un canal alfa completo y hasta 16 bits por canal. Lo que no puede hacer es agregar detalles: un PNG de 512 x 512 mostrado en 2048 x 2048 tiene cada píxel extendido a lo largo de un bloque de 4 x 4 y los bordes se vuelven suaves o en bloques.
Aquí está la misma insignia simple que la fuente SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Esas cuatro líneas de marcado son la imagen completa y permanecen cuatro líneas ya sea que la muestre con 240 píxeles de ancho o 24.000. La versión PNG de la misma insignia de 240 x 80 tiene capacidad para 19.200 píxeles y de 960 x 320 tiene capacidad para 307.200.
SVG vs PNG: ¿qué formato debo utilizar?
Utilice SVG para cualquier cosa hecha de formas que deban escalarse, y PNG para cualquier cosa hecha de píxeles o dirigida a algún lugar que solo acepte imágenes rasterizadas. Esta tabla los coloca uno al lado del otro:
| Propiedad | SVG | PNG |
|---|---|---|
| Modelo de imagen | Vector: caminos, formas, texto | Ráster: cuadrícula de píxeles fija |
| estándar | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| decapado | Afilado en cualquier tamaño | Desenfoca o bloquea cuando se agranda |
| Compresión | Texto; gzip en el servidor | Desinflar sin pérdidas |
| diapositiva | sí | Sí, alfa completo |
| Tamaño de archivo para un logotipo | Generalmente unos cuantos KB | Crece con dimensiones de píxeles |
| Tamaño de archivo para una foto | Impractico | Grande pero razonable |
| Editable después de la exportación | Sí, formas y colores en un editor vectorial | Sólo píxel por píxel |
| Texto interior | Puede permanecer seleccionable y con capacidad de búsqueda | Horneado en píxeles |
| Puede contener scripts | Sí, lo cual es un problema de seguridad | prohibido |
| Aceptado por cargas sociales, aplicaciones de oficina, correo electrónico | A menudo no | casi siempre |
| mejor para | Logotipos, iconos, diagramas, gráficos, ilustraciones de interfaz de usuario | Capturas de pantalla, arte detallado, activos de tamaño fijo |
Una regla práctica: mantenga el SVG como su maestro para cualquier vector y exporte PNG desde él en los tamaños que cada destino necesita. Nunca conserve solo el PNG de un logotipo, porque convertir píxeles nuevamente en formas tiene pérdidas de una manera que convertir formas en píxeles no lo es.
Para las fotografías, ninguno de los formatos es la elección correcta para la entrega. Una foto en PNG es grande y una foto en SVG es un PNG envuelto en XML o una aproximación trazada. JPEG, WebP o AVIF están diseñados para ese trabajo; qué es WebP y cuándo utilizarlo cubre el lado de la foto.
¿por qué tantos lugares rechazan la carga de SVG?
Porque un SVG es un documento que puede contener contenido activo, no sólo una imagen. La especificación SVG lo permite <script> elementos, atributos del controlador de eventos como onload, enlaces a recursos externos y HTML integrado a través de <foreignObject>. Un sitio que acepta una carga SVG y luego la entrega desde su propio dominio podría terminar ejecutando JavaScript de otra persona 's para cada visitante que abra el archivo directamente.
Es posible desinfectar SVG de forma segura, pero es complicado, por lo que muchas plataformas toman la ruta más simple: imágenes de perfil, listados de mercados, redes publicitarias, muchas bibliotecas multimedia CMS y la mayoría de los clientes de correo electrónico solo aceptan formatos rasterizados. Los documentos de oficina y las aplicaciones de chat también tienen soporte más irregular.
Ésa es la razón más común para convertir SVG a PNG. Un navegador que dibuja un SVG como imagen es el caso seguro, ya que un SVG se carga a través de un <img> no se permite que Element o on a lienzo ejecuten scripts ni recuperen archivos externos. Los convertidores Toolz representan SVG exactamente de esa manera, lo que hace que sea seguro convertir un archivo desde una fuente desconocida.
¿cómo se convierte SVG a PNG sin perder calidad?
Represente el SVG en el tamaño de píxel que necesita, o más, y nunca aumente el PNG después. Debido a que el SVG es geometría, dibujarlo a 4x es tan exacto como dibujarlo a 1x; Toda pérdida de calidad en esta dirección proviene de elegir una salida demasiado pequeña.
los Convertidor SVG a PNG calcula el tamaño en este orden:
- Si se establece la raíz SVG
widthyheight, se utilizan, con unidades comomm,pt,inycmconvertido a píxeles CSS. - Si solo tiene un
viewBox, se utilizan el ancho y el alto de viewBox. - Si no tiene ninguna de las dos cosas, se dibuja en 1024 x 1024.
- Si el lado más largo todavía tiene menos de 512 píxeles, el dibujo se amplía proporcionalmente hasta que ese lado tenga 512, porque un icono de 24 x 24 dibujado en su tamaño declarado es demasiado pequeño para usarlo.
- Luego, la opción de escala SVG multiplica el resultado por 1, 2 o 4.
Tome la insignia de arriba, que declara width="240" height="80". El lado más largo está por debajo de 512, por lo que se amplía a 512 x 171. A las 2 x el PNG sale a 1024x342, con las esquinas sin pintar dejadas transparentes. La nota debajo del resultado indica el tamaño y de dónde viene, por lo que no hay adivinanzas.
Elija 2x para pantallas, donde la mayoría de los teléfonos y computadoras portátiles usan dos o más píxeles de dispositivo por píxel CSS, y 4x para pantallas impresas o grandes. El límite de salida es de 100 megapíxeles o 16.384 píxeles por lado, y los archivos SVG de más de 50 MB son rechazados; una escala más pequeña soluciona el primer caso.
Dos tipos de contenido no sobreviven a la representación. Las imágenes y las fuentes web vinculadas por URL se omiten porque un SVG dibujado como imagen no puede recuperar nada fuera del archivo, por lo que el texto vuelve a caer a una fuente del sistema; convertir texto a contornos en su editor vectorial antes de exportarlo evita eso. Y un SVG animado se convierte en un único fotograma fijo.
¿debo convertir SVG a PNG, JPG o PDF?
Convierta a PNG de forma predeterminada, a JPG solo cuando el destino rechaza PNG o necesita un archivo más pequeño para un gráfico similar a una foto, y a PDF cuando necesite un documento para imprimir o enviar un correo electrónico.
| blanco | diapositiva | Tamaño | Lo que pierdes | utilizar para |
|---|---|---|---|---|
| PNG | impuesto | Medio | Escalabilidad | Cargas, diapositivas, recursos de aplicaciones, cualquier cosa con un fondo transparente |
| JPG | Lleno de blanco | Más pequeño para arte complejo | Escalabilidad, transparencia, cierta nitidez de los bordes | Formularios que solo aceptan JPG, archivos adjuntos de correo electrónico |
| PDF (rasterizado) | Las áreas transparentes muestran la página blanca | Más grande | Escalabilidad, texto seleccionable, enlaces en los que se puede hacer clic | Hojas de prueba, impresión de un gráfico, envío de obras de arte a no diseñadores |
los Convertidor SVG a JPG llena las áreas transparentes de blanco, porque JPEG no tiene canal alfa y aplica el control deslizante Calidad. Los bordes nítidos en color plano son exactamente donde la compresión JPEG deja un leve timbre, por lo que un logotipo generalmente se ve mejor como PNG.
los Convertidor de SVG a PDF merece una advertencia clara. Rasteriza: cada SVG se dibuja en píxeles, se almacena como PNG y se coloca en una página. El PDF no contiene formas vectoriales, el texto no se puede seleccionar y al hacer zoom lo suficiente se muestran los píxeles. La opción de escala aún ayuda, ya que el tamaño de la página permanece fijo mientras que 2x y 4x incluyen más píxeles (72, 144 o 288 píxeles por pulgada con ajuste a la imagen). Si una imprenta solicita un PDF vectorial, por ISO 32000 un PDF puede transportar rutas vectoriales verdaderas, pero necesita un editor vectorial y una exportación n.° 39 para eso, no un convertidor de imágenes.
¿qué hace la conversión de PNG a SVG?
La conversión de PNG a SVG rastrea la imagen: agrupa los píxeles en áreas de color similar y se ajusta a los contornos alrededor de cada área, produciendo rutas vectoriales llenas. No encuentra el archivo vectorial original porque un PNG no contiene ningún registro de las formas que lo formaron. Cada borde en la salida es una estimación extraída de los píxeles.
El rastreador detrás PNG a SVG y JPG a SVG en Toolz está imagetracerjs, que se ejecuta en un Web Worker en segundo plano para que la página siga respondiendo. Funciona en dos pasos:
- Reducción de color. La imagen se reduce a una paleta pequeña, el número que eliges en Colores: 2, 8 o 16.
- Ajuste de bordes. Para cada capa de color, el trazador recorre el límite de cada área conectada y se ajusta en línea recta y se curva hacia ella, produciendo un camino lleno por área.
Cada camino también tiene un contorno de 1 píxel en su propio color. Sin él, las formas vecinas dejan espacios finos donde sus bordes no se encuentran del todo, y el fondo se muestra como finas costuras blancas.
El detalle controla qué tan cerca siguen esos contornos los píxeles:
| Detalle | Tolerancia de líneas y curvas | Las motas cayeron abajo | Pre-desenfoque | Resultado |
|---|---|---|---|---|
| Bajo | 2 páginas | 16 puntos | Ligero | Archivos más fluidos, simples y más pequeños |
| Medio (predeterminado) | 1 px | 8 puntos | nadie | Equilibrado |
| Alto | 0,5 px | 2 puntos | nadie | Sigue de cerca los píxeles, mantiene formas diminutas y más pesadas |
El SVG rastreado se escribe con su width y height establezca el tamaño de la imagen original y a viewBox en píxeles trazados, se abre al tamaño que esperas y escala limpiamente dondequiera que lo coloques.
¿Qué puede funcionar bien el rastreo y dónde falla?
Para empezar, el rastreo funciona bien en imágenes que eran vectoriales: color plano, bordes duros, pocos colores. Falla en cualquier cosa con tonos continuos, porque una foto no tiene bordes que encontrar, sólo gradientes.
| Fuente | Cómo rastrea | Configuraciones sugeridas |
|---|---|---|
| Logotipo plano, de 2 a 6 colores | Formas limpias, lima pequeña | 8 colores, Medio |
| Arte lineal en blanco y negro, firmas, sellos | Muy limpio | 2 colores, Medio o Alto |
| Iconos con gradiente | El gradiente se convierte en bandas | 16 colores, Medio, luego simplifica en un editor |
| Dibujo escaneado sobre papel | La textura del papel se convierte en motas | 2 colores, Bajo |
| Logotipo JPG con artefactos de compresión | Motas a lo largo de los bordes, fondo trazado como una forma | Bajo detalle; elimine la forma de fondo después |
| Captura de pantalla con texto | Las letras se convierten en contornos manchados | Mantenlo como PNG |
| Fotografía | Formas posterizadas manchadas, archivo enorme | No rastrear |
La fila de fotografías no es una cuestión de gustos. Al probar el motor Toolz, una foto ruidosa de 2000 px trazada a 16 colores tomó 28 segundos y produjo un SVG de 46 MB, muchas veces más pesado que la imagen de la que provenía y aún visiblemente peor. El ruido le da al trazador miles de regiones diminutas, y cada una se convierte en su propio camino con sus propias coordenadas.
Esa prueba es la razón por la que el convertidor escala cualquier imagen más de 1200 píxeles de lado hasta 1200 antes del seguimiento. Luego, el seguimiento finaliza en segundos en lugar de minutos, y debido a que la salida mantiene el ancho y alto originales, nada cambia sobre cómo se coloca el SVG. Un seguimiento que aún se ejecuta después de dos minutos se detiene con un mensaje que sugiere menos colores o menos detalles, en lugar de dejar la pestaña ocupada indefinidamente.
Las fuentes JPG añaden dos problemas específicos. La compresión JPEG deja bloques débiles alrededor de bordes afilados, que el trazador puede convertir en formas perdidas; Los detalles bajos se difuminan ligeramente y dejan caer motas para contrarrestarlo. Y JPG no tiene transparencia, por lo que el cuadro blanco alrededor de un logotipo se convierte en una forma más rellena detrás de la obra de arte. En un editor de vectores, seleccione esa forma y elimínela.
¿cómo obtengo un SVG limpio de un logotipo de PNG?
Comience con las configuraciones más simples que preservan el diseño, mire la vista previa y solo agregue colores o detalles cuando falta algo. Las configuraciones más pesadas rara vez corrigen un rastro incorrecto; le agregan más caminos.
Una secuencia confiable:
- Utilice la fuente más grande y limpia que tenga. Una exportación PNG supera una captura de pantalla y una captura de pantalla supera una foto de una copia impresa.
- Cuente los colores del logotipo y elija la opción más cercana en él o encima. Una marca de dos colores quiere 2, una marca de cinco colores quiere 8.
- Rastrear en Medio. Verifique la vista previa y el tamaño del archivo que se muestra en el resultado.
- Si hay motas o bordes ásperos, vuelva a trazar en Bajo. Si los detalles finos desaparecieron, vuelva a trazar en Alto.
- Abra el resultado en un editor vectorial para el último paso: elimine la forma de fondo si la hay, combine formas que deberían ser una y reemplace cualquier texto rastreado con texto real en la fuente correcta.
Cuando el tamaño del archivo que se muestra después del rastreo sea mayor que el PNG, trátelo como una señal. Para un logotipo, normalmente significa que se está rastreando el ruido; para cualquier otra cosa, normalmente significa que la imagen debe permanecer ráster.
Si el rastro se dirige a una máquina cortadora, grabadora láser o software de bordado, 2 colores suele ser la respuesta correcta incluso para un diseño colorido, ya que esas máquinas funcionan a partir de contornos en lugar de rellenos.
¿Puedo convertir entre estos formatos en un solo lugar?
Da. generalul Convertidor de imágenes acepta SVG junto con JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG y PDF, y escribe JPG, PNG, WebP, GIF, ICO, PDF o SVG. Elegir SVG como objetivo rastrea cualquier fuente rasterizada con los mismos colores y configuraciones de detalles; Al elegir un objetivo rasterizado para una fuente SVG se muestra la opción de escala SVG.
Las páginas de pares dedicadas aceptan solo su propio formato de origen, lo que mantiene relevantes las opciones en pantalla: las páginas SVG muestran escala, las páginas de seguimiento muestran colores y detalles.
No se ofrece una combinación: PDF a SVG. El convertidor lo rechaza con un mensaje y la ruta que sugiere son dos pasos: primero convierta la página PDF a PNG y luego rastree el PNG. Si el PDF proviene de un programa vectorial, exportar SVG desde ese programa mantiene las rutas reales y es la mejor opción.
Un SVG también puede convertirse en un favicon. Al renderizarlo a ICO se producen imágenes PNG cuadradas en cada tamaño de icono, y el mínimo de 512 px significa que un SVG de icono pequeño aún proporciona una entrada limpia de 256 px. Tamaños de Favicon y lo que contiene un archivo ICO cubre qué tamaños incluir.
¿las conversiones de SVG y PNG son privadas?
Sí. La renderización, la codificación y el seguimiento ocurren en el lado del cliente, dentro de la pestaña del navegador, por lo que no se carga ningún archivo. El paso de decodificación SVG y el trazador se descargan solo cuando un archivo los necesita, lo que mantiene la página ligera cuando solo está convirtiendo entre formatos rasterizados.
Los límites, en un solo lugar: archivos SVG de hasta 50 MB, salida renderizada de hasta 100 megapíxeles y 16.384 píxeles por lado, fuentes ráster de hasta 100 megapíxeles, seguimiento de hasta 1200 px en el lado más largo y un límite de dos minutos. por traza. Las herramientas son gratuitas, sin registro, con un límite diario de conversiones.
