¿Qué es SVG? Cuándo elegir SVG o PNG

¿Qué es un archivo SVG?

SVG significa Scalable Vector Graphics, es decir, gráficos vectoriales escalables. En lugar de almacenar solo una cuadrícula de píxeles de colores, puede describir formas, trazados, rellenos y texto. Un navegador o programa de dibujo utiliza esas instrucciones para dibujar la imagen al tamaño solicitado. No necesitas escribir código para crear un SVG: un programa de diseño vectorial puede exportarlo.

Piensa en un logotipo circular. Un SVG puede describir el círculo y su color; un PNG guarda los píxeles que forman ese círculo a un tamaño concreto. El SVG puede dibujar un círculo más grande con un borde suave. Al ampliar el PNG, sus píxeles se reparten sobre un área mayor y el borde puede perder nitidez. La introducción a SVG de MDN explica cómo funciona el formato.

SVG y PNG: diferencias en la práctica

Ninguno de los dos formatos pesa siempre menos. Un SVG detallado con miles de trazados puede ser más grande que un PNG adecuado. Compara los archivos reales y comprueba si el destino los acepta. Para fotografías, considera JPG, WebP o AVIF en lugar de usar SVG como formato de compresión fotográfica.

Cuándo SVG es una buena opción

Un logotipo que se usa en la cabecera de una web, en una presentación y en un banner grande se beneficia de un original vectorial. SVG también resulta útil para iconos y diagramas sencillos que deben funcionar a varios tamaños. Revisa siempre la versión más pequeña: un dibujo nítido no hace legible un texto diminuto ni evita que las líneas finas sean difíciles de ver.

Un SVG puede contener una imagen de píxeles normal, como un PNG o un JPG. Esa imagen conserva su resolución original. Incluir una fotografía pequeña en un SVG no recupera detalles ni la convierte en formas vectoriales. Cambiar el nombre de un archivo .png para que termine en .svg tampoco cambia su formato.

Entender el tamaño, el viewBox y el espacio vacío

El ancho y el alto indican las dimensiones de la imagen. El viewBox define el área de coordenadas en la que se coloca el dibujo. Ayuda a adaptar el dibujo al espacio donde se muestra; no es un ajuste del peso del archivo. La referencia de viewBox de MDN explica esta relación.

Si tu logotipo parece pequeño dentro de una gran zona vacía, revisa los límites de la mesa de trabajo o de la página en tu programa de diseño. Exportar toda la página puede incluir espacio sin usar alrededor del dibujo. Ajusta la página al contenido cuando corresponda, dejando margen para los contornos y las sombras. Aumentar solo el ancho de visualización también amplía ese espacio vacío.

Usar SVG en una página web

Un logotipo web corriente puede insertarse como un archivo de imagen SVG. Añade texto alternativo descriptivo a las imágenes que aportan información y reserva el ancho y el alto correctos en el diseño de la página. Las imágenes decorativas deben tener el texto alternativo vacío. Encontrarás ejemplos en la guía sobre texto alternativo.

Que un navegador muestre SVG no significa que todos los CMS o formularios de subida lo acepten. Comprueba las reglas de tu plataforma antes de elegir la exportación final. Además, un SVG usado como imagen se comporta de forma distinta a uno integrado directamente en el código de la página: en el contexto de imagen se restringen los scripts y la carga de recursos externos. La guía de MDN sobre SVG como imagen explica estas limitaciones. Usa dibujos de fuentes fiables y el método de publicación admitido por tu plataforma.

Preparar un SVG para compartirlo

• Exporta el área del dibujo que necesitas, no una página innecesariamente grande.
• Incluye las imágenes enlazadas y los estilos necesarios dentro del archivo para no depender de archivos separados.
• Si las letras deben verse exactamente igual en otro dispositivo, convierte el texto a trazados en tu programa de diseño. Guarda un original editable: el texto convertido a trazados ya no se puede editar como texto normal.
• Elimina los objetos sin usar y los datos innecesarios del editor en una copia. Revisa el resultado antes de sustituir el original.
• Abre el SVG exportado en la aplicación o web donde se usará y revisa los bordes, el texto, el fondo y los posibles elementos que falten.

Convertir texto a trazados puede aumentar su cantidad y el peso del archivo. Simplificar demasiado los trazados puede cambiar el dibujo. Evalúa la optimización comparando el resultado real, en vez de eliminar datos sin comprobarlos. La herramienta SVG a PNG de Pixilo crea una imagen de píxeles; no optimiza el SVG ni devuelve un archivo SVG más pequeño.

Cuándo crear una copia PNG

Crea un PNG si el servicio de destino lo exige, si necesitas una copia estática parecida a una captura de pantalla o si necesitas dimensiones concretas en píxeles. Exporta desde el SVG original al tamaño requerido. PNG no conserva los trazados vectoriales ni las funciones interactivas, y ampliarlo después puede hacer que se vea borroso. Guarda el SVG para futuras exportaciones.

Usa SVG a PNG para elegir las dimensiones en píxeles y conservar las zonas transparentes o añadir un fondo de un solo color. La página de la herramienta explica los límites de tamaño, las fuentes y el contenido no admitido. La opción de fondo transparente conserva la transparencia existente; no elimina una forma de fondo dibujada en el SVG.

Antes de publicar o enviar la imagen

1. Confirma qué formatos admite el destino.
2. Conserva SVG cuando sus formas vectoriales y su escalabilidad sean útiles; crea PNG cuando el destino necesite una imagen de píxeles.
3. Revisa los límites del dibujo, las fuentes y las imágenes incrustadas.
4. Examina el archivo final al tamaño en que se mostrará y sobre el fondo en el que se usará.
5. Compara el peso de los archivos si importa la velocidad de carga y guarda tu original editable.