Archivo SVG

Qué es

Un archivo SVG es un archivo de texto. Describe tres tipos de objetos: formas vectoriales, texto e imágenes de mapa de bits incrustadas. Su viewBox define un sistema de coordenadas y no un tamaño en píxeles, así que el navegador o la aplicación escala el dibujo al espacio que se le da.

Propiedad	SVG
Tipo de imagen	Vectorial, con imágenes PNG o JPEG incrustadas opcionales
Compresión	Ninguna; .svgz es un SVG comprimido con gzip
Color	Colores sólidos, degradados lineales y radiales, patrones
Transparencia	Sí; todo lo que no se dibuja es transparente
Texto	Texto real, que sigue siendo seleccionable y se puede buscar
Estilos	CSS en un elemento style, atributos style o atributos de presentación
Animación	Sí, con elementos de animación SMIL o scripts
Scripts	Un elemento <script>, como en HTML
Tamaño en píxeles	Ninguno fijo; se dibuja al tamaño solicitado

SVG es el formato habitual para logotipos, iconos, gráficos e ilustraciones en sitios web, porque un solo archivo sirve para todos los tamaños de pantalla. Como un SVG puede contener scripts, los navegadores los desactivan cuando el archivo se muestra como imagen (en una etiqueta <img> o como fondo CSS), pero no cuando el archivo se abre directamente o se inserta con <object> o <iframe>.

Fuentes: W3C, SVG 1.0, SVG 1.1 (Second Edition) (capítulos de introducción, sistemas de coordenadas, degradados, estilos, estructura y animación) y SVG 2; MDN, script element, SVG as an image y Image file type and format guide. Consultado el 27 de octubre de 2026.

Qué aplicaciones lo abren

Plataforma o aplicación	Abre SVG	Notas
Chrome, Edge, Firefox, Safari	Sí, en todas las versiones actuales	Safari 26 también acepta SVG para los favicons
Explorador de archivos de Windows	Vista previa y miniaturas mediante Microsoft PowerToys	Microsoft no documenta ninguna vista previa de SVG integrada
Mac	Safari abre archivos SVG	La documentación de Vista Previa de Apple no menciona SVG
Android	Vector Asset Studio de Android Studio convierte SVG en elementos de dibujo vectoriales de Android para las aplicaciones	No se convierten el texto, los filtros, los rellenos de patrón ni los modos de fusión
Illustrator	Exporta SVG con Exportar para pantallas
Inkscape	Sí; SVG es su propio formato de archivo
Figma	Sí; un SVG importado se convierte en una capa vectorial editable
Affinity Designer 2	Sí, abre y exporta
GIMP	Abre SVG como imagen; los trazados SVG se pueden importar mediante el cuadro de diálogo Trazados
Canva	Sí, como imagen subida	Menos de 3 MB, guardado con el perfil SVG 1.1

Fuentes: MDN, Image file type and format guide; WebKit, WebKit features in Safari 26.0; Microsoft, PowerToys File Explorer add-ons; Apple, Convert graphics file types in Preview; Android, Vector Asset Studio; Adobe, Supported file formats in Illustrator (actualizado el 27 de octubre de 2025); Inkscape README; Figma, Add images and videos to designs; formatos de archivo de Affinity Designer 2; GIMP, Paths and SVG; Canva, Check file upload formats and requirements. Consultado el 27 de octubre de 2026.

Cómo convertirlo

Convertir un SVG a PNG, JPEG o WebP transforma el dibujo en píxeles de un solo tamaño. El resultado ya no se escala, su texto deja de ser editable y se pierden la animación y los scripts. PNG y WebP conservan el fondo transparente; JPEG no tiene canal alfa y lo rellena con un color.

Vía	Cómo	Notas
librsvg	rsvg-convert -w 2048 -a logo.svg -o logo.png	-a mantiene la relación de aspecto; sin -w se usa el ancho propio del SVG
Inkscape	inkscape logo.svg --export-type=png --export-width=2048	También exporta PDF, EPS y EMF
ImageMagick	magick -density 300 logo.svg logo.png	-density va antes del archivo de entrada; el valor predeterminado es 72 ppp
Illustrator	Archivo > Exportar > Exportar para pantallas, PNG o JPEG
Freedam	Descarga una versión derivada en WebP con un ancho definido, o el SVG original	La versión derivada se dibuja a partir de una vista previa de 3072 píxeles

Fuentes: rsvg-convert manual; Inkscape, command-line manual; ImageMagick, command-line options; MDN, Image file type and format guide. Consultado el 27 de octubre de 2026.

Cómo convertirlo con IA

Un asistente de IA que pueda ejecutar comandos en tu equipo, como un agente de programación en una terminal, puede instalar librsvg, el renderizador de SVG de código abierto que usa GNOME, y hacer la conversión por ti. Pega un mensaje como este, cambia los nombres de las carpetas y lee cada comando que proponga el asistente antes de aprobarlo: se ejecuta con tus permisos sobre tus archivos.

Install librsvg on this computer, which includes rsvg-convert (Homebrew package librsvg on macOS, apt package librsvg2-bin on Debian or Ubuntu, MSYS2 on Windows).

Then convert every .svg file in the folder ~/Logos to a PNG 2,048 pixels wide, keeping the aspect ratio and the transparent background, for example:
rsvg-convert -w 2048 -a logo.svg -o logo.png

Write the PNG files to a new folder ~/Logos/png and keep the originals unchanged. When you have finished, list any file that failed, with the error.

SVG en Freedam

Freedam acepta archivos .svg en la biblioteca de recursos y guarda el original sin cambios.

• Vista previa: Freedam dibuja el SVG con librsvg en un PNG de hasta 3072 píxeles en el lado largo, conservando el fondo transparente, y lo guarda como una vista previa en WebP. Si librsvg falla con un archivo, lo dibuja ImageMagick.
• Versiones derivadas: al importar el archivo se crean a partir de esa vista previa copias en WebP de 128, 256, 512 y 1024 píxeles de ancho, y los tamaños mayores, de hasta 5120 píxeles, en la primera solicitud. Las URL de imagen de Freedam entregan el dibujo en AVIF, WebP o JPEG, según lo que acepte el navegador.
• Descargas: las personas con derechos de descarga eligen entre el SVG original y una versión derivada en WebP. Como SVG se abre en todos los navegadores actuales, el cuadro de diálogo de descarga sugiere el original.
• Metadatos: al importar el archivo, Freedam lee el ancho y el alto declarados en el SVG y comprueba si el archivo tiene Content Credentials. Una descripción, palabras clave, un autor o un aviso de derechos de autor en los metadatos XMP del SVG rellenan los campos propios del recurso.

Preguntas frecuentes

¿SVG es mejor que PNG?

Para logotipos, iconos, gráficos y diagramas, normalmente sí: un SVG se mantiene nítido en todos los tamaños, y MDN recomienda SVG para las imágenes que deben dibujarse con precisión a distintos tamaños. Para fotos, usa un formato de mapa de bits como JPEG, WebP o AVIF; PNG es adecuado para capturas de pantalla e imágenes de mapa de bits que necesitan transparencia.

¿Puede un archivo SVG contener JavaScript?

Sí. SVG tiene un elemento <script>. Los navegadores no lo ejecutan cuando el SVG se muestra como imagen mediante una etiqueta <img> o un fondo CSS, pero sí cuando el archivo se abre directamente o se inserta con <object> o <iframe>.

¿Por qué no se ven las miniaturas de SVG en el Explorador de archivos de Windows?

Microsoft documenta las vistas previas y las miniaturas de SVG en el Explorador de archivos solo mediante PowerToys, un conjunto gratuito de complementos. Instala PowerToys y activa sus complementos del Explorador de archivos para SVG.