Archivos SVG: cómo abrir, crear, editar y convertir
Un archivo SVG describe una imagen vectorial con XML. Guarda trazados, formas, rellenos y líneas en lugar de una cuadrícula fija de píxeles, por lo que los logotipos, iconos, gráficos e ilustraciones conservan su nitidez en cualquier tamaño.
Qué es SVG
SVG significa Scalable Vector Graphics y es un estándar abierto del W3C. PNG guarda píxeles; SVG guarda instrucciones de dibujo. viewBox define el sistema de coordenadas interno y width y height establecen el tamaño inicial.
Cuándo usarlo
SVG es ideal para logotipos, iconos de interfaz, mapas, diagramas, ilustraciones lineales y gráficos animados. Las fotografías y texturas suelen funcionar mejor en PNG o JPG. Una vectorización compleja también puede ocupar más que una imagen raster optimizada.
Cómo abrir un SVG
Arrastra el archivo a Chrome, Firefox, Safari o Edge. Para revisar zoom, recortes y viewBox, usa SVG Viewer. Inkscape, Illustrator y Figma permiten editar; un editor de código muestra el XML y las referencias externas.
Cómo crear un SVG
Puedes exportar desde una aplicación vectorial o escribir formas sencillas:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
El espacio de nombres es necesario en un SVG independiente. Añade un title cuando la imagen aporte información.
Editar y convertir
Edita nodos y curvas con software vectorial, o cambia colores, viewBox y trazados directamente en el XML. Comprueba el resultado en SVG Editor y SVG Viewer. Limpia archivos de terceros con SVG Sanitizer antes de incrustarlos.
- SVG to PNG para imágenes raster transparentes.
- SVG to JPG para vistas previas sin transparencia.
- SVG to PDF para revisión e impresión.
- SVG to Data URI para usarlo en CSS o HTML.
Lista antes de publicar
Revisa la representación, viewBox, proporción, recorte y contraste. Elimina metadatos innecesarios, sanea entradas no confiables y comprime la versión final con SVG Optimizer. Conserva aparte el archivo editable.
Preguntas frecuentes
¿SVG es mejor que PNG?
SVG gana en formas escalables. PNG es más adecuado para fotos, texturas y tamaños de píxel fijos.
¿Puedo abrirlo sin software de diseño?
Sí. Un navegador o SVG Viewer puede mostrarlo.
¿Puedo convertir PNG a SVG?
El trazado crea una aproximación con rutas; los dibujos simples dan mejores resultados.
¿Por qué aparece vacío?
Comprueba viewBox, recorte, fondo, filtros y la sintaxis XML.
¿Es seguro un SVG?
Trata las cargas como XML no confiable y límpialas antes de incrustarlas.
Flujo con SVGView
Previsualiza en SVG Viewer, edita en SVG Editor, sanea con SVG Sanitizer, optimiza con SVG Optimizer y convierte solo al formato que necesite el destino.