Si trabajas con diseño web o gráfico, tarde o temprano te topas con los archivos SVG y descubres que son un auténtico salvavidas para logos, iconos e ilustraciones. En Windows, la clave está en saber abrirlos, visualizarlos y editarlos sin perder tiempo, ya sea desde el Explorador de archivos, aplicaciones de ofimática o editores de gráficos.
El objetivo de esta guía es que puedas manejarte con soltura con el formato: qué es, cuándo conviene usarlo, cómo convertirlo, maneras de abrirlo y, sobre todo, cómo conseguir previsualizaciones y miniaturas directamente en el Explorador de Windows. Repasamos también algunos trucos y recursos útiles para tu flujo de trabajo.
Qué es un archivo SVG
Un SVG (Scalable Vector Graphics) es una imagen descrita como código XML: líneas, curvas y formas se definen con coordenadas, no con píxeles. Al estar basado en vectores, puedes escalarlo sin perder nitidez, lo que lo hace perfecto para logotipos y gráficos que se usan en distintos tamaños.
En su interior encontrarás elementos como path, rect o circle que describen las figuras. El elemento path es el protagonista en la mayoría de ilustraciones complejas, ya que traza rutas en cualquier dirección con precisión milimétrica.
Estas son sus principales ventajas:
- Los SVG son ligeros cuando representan gráficos sencillos con pocas formas.
- Cualquier navegador moderno los entiende, como Edge, Chrome, Firefox o Safari.
- Google los indexa, incluso en la búsqueda de imágenes, por lo que no penalizan tu SEO.
- Admiten animaciones y transiciones con CSS y JavaScript, algo imposible con un JPG de forma nativa.
Ahora bien, hay un límite: convertir fotografías o ilustraciones muy detalladas a SVG suele ser mala idea. Al vectorizar imágenes complejas, el archivo crece y se pierden matices, resultando en un SVG más pesado y con menos detalle que el original en ráster.
Formas de abrir un archivo SVG en tu PC
Como los SVG se comportan como documentos XML, Windows y macOS suelen asignarlos al navegador. La forma más rápida de verlos es hacer doble clic y dejarlos abrir en tu navegador preferido. Eso sí, desde ahí solo los visualizas; no los editas.
Si prefieres ver y tocar el código, utiliza un editor de texto: Notepad++, VS Code, Sublime Text… Puedes editar atributos, cambiar colores con CSS o retocar nodos de path, aunque esto solo es razonable para gráficos sencillos.
Para edición visual, usa aplicaciones como Adobe Illustrator, Affinity Designer, Figma, Adobe XD, Gravit Designer o Inkscape. Estos programas abren, modifican y exportan SVG con herramientas vectoriales, permitiéndote añadir detalles, eliminar partes o reconstruir figuras con precisión.
Convertir imágenes a SVG (y al revés) sin sorpresas
Si partes de un PNG o JPG y quieres un SVG, puedes vectorizar con software de edición. Photopea, por ejemplo, permite abrir imágenes y exportarlas a SVG online, aunque, como en otras herramientas, la calidad depende de la complejidad del original.
Las utilidades gratuitas de conversión suelen ofrecer resultados básicos: contornos sin color o con apariencia simplificada. Esto es normal cuando la escena tiene degradados y texturas, ya que representarlas en vectores multiplica la complejidad del archivo.
La operación inversa (pasar de SVG a PNG o JPG) es más directa: los editores rasterizan el vector a la resolución que elijas sin pérdida de detalle visible. Es útil cuando necesitas un ráster final para un entorno que no admite SVG.
Miniaturas y vista previa de SVG en el Explorador de Windows
Una queja habitual es que en el Explorador solo aparece el icono genérico o el de la app asociada y no la miniatura del dibujo. Para ver previsualizaciones en Windows 7 y 10, una solución ligera es SVG Explorer Extension, una extensión del shell de Windows centrada en SVG.
Instálala desde su repositorio oficial en GitHub: ‘https://github.com/maphew/svg-explorer-extension/releases’. Elige el instalador acorde a tu sistema (32 o 64 bits) para que el códec se integre correctamente en la caché de miniaturas del sistema.
Tras instalar, es posible que sigas viendo los iconos como antes porque Windows conserva la caché previa. Un truco que funciona es cambiar temporalmente la aplicación predeterminada para abrir .svg: clic derecho en un SVG > Abrir con > Elegir otra aplicación, marca ‘Usar siempre esta aplicación’ y selecciona, por ejemplo, tu navegador.
Con ese cambio se regenera la caché y las miniaturas empiezan a aparecer. Si prefieres volver a abrirlos con tu editor habitual (Affinity, Illustrator, etc.) simplemente repite el proceso y deja de nuevo tu programa favorito como predeterminado.
PowerToys: previsualización y miniaturas nativas en el Explorador
Si usas Windows 10 u 11, Microsoft PowerToys incorpora complementos para el Explorador que habilitan vista previa y miniaturas para varios tipos, incluido SVG. Lo mejor es que se integra con el panel de vista previa y con las miniaturas sin apps de terceros.
Para empezar, descarga la última versión desde GitHub o a través de Microsoft Store y completa la instalación. Entra a la configuración de PowerToys y considera activar el modo administrador para que todas las utilidades funcionen sin restricciones.
Después, ve a la sección Explorador de archivos en PowerToys y habilita los toggles de vista previa y miniaturas para SVG. El panel de vista previa te permite ver el contenido del archivo al seleccionarlo sin abrir ningún programa adicional.
PowerToys añade previsualizadores para Markdown, SVG, PDF, G-code y el formato QOI, además de un visor para código fuente con soporte para más de 150 extensiones. Esto convierte el Explorador en un visor rápido de código y documentos más allá de las imágenes vectoriales.
El previsualizador de código fuente (basado en Monaco) permite ajustar parámetros útiles: activar/desactivar el ajuste de línea, intentar dar formato a JSON y XML para verlos legibles y fijar el tamaño máximo de archivo (en KB) para previsualizar, mejoran la legibilidad y evitan bloqueos con archivos pesados.
Si la vista previa no aparece, revisa en el Explorador de Windows: Opciones de carpeta > pestaña Ver > marca ‘Mostrar controladores de vista previa en el panel de vista previa’. Sin esa casilla, el panel no mostrará nada aunque PowerToys esté bien configurado.
Para activar el panel: en Windows 10 o 11, abre el Explorador, entra en Ver y selecciona ‘Panel de vista previa’. Al hacerlo, al seleccionar un archivo compatible verás el contenido a la derecha de la lista o cuadrícula de archivos.
Editar e insertar SVG en Microsoft Office
Word, PowerPoint, Outlook y Excel de Microsoft 365 admiten insertar y editar SVG en Windows, macOS, Android y Windows Mobile. En iOS puedes editar SVG que ya se hayan insertado desde otra plataforma, aunque las opciones son más limitadas.
Una vez insertado el SVG, puedes controlar el contorno (color del borde) desde Contorno de gráficos o Esquema, y elegir rellenos y estilos predefinidos para cambiar el aspecto con un clic. Si ninguno encaja, elige cualquier color para el relleno y aplícalo a toda la ilustración con un par de ajustes.
Para composición en el documento, Ajustar texto decide cómo fluye el contenido alrededor del gráfico. Si superpones varios objetos, Organizar te deja traer al frente o enviar al fondo para apilar elementos de forma precisa.
Recortar y Recortar gráfico sirven para delimitar el área visible del SVG sin alterar el original. Solo arrastra el cuadro de recorte hasta encuadrar lo que te interesa y confirma para quedarte con la parte útil.
Tamaño y posición te permiten fijar medidas exactas y la colocación en la página. Y no olvides el Texto alternativo: añade una descripción accesible para usuarios de lectores de pantalla y mejora la comprensión del contenido.
Editores, flujo de trabajo y elección de apps predeterminadas
Para crear o retocar SVG tienes una amplia gama: Illustrator, Affinity Designer, Figma, Adobe XD, Gravit Designer o Inkscape, entre otros. Todos abren y editan SVG con herramientas vectoriales precisas, y exportan a formatos ráster cuando lo necesitas.
En Windows, asociar los .svg a una app u otra tiene impacto en tu día a día. Durante la instalación de la extensión de miniaturas es útil vincularlos a un navegador para refrescar la caché, y después volver a tu editor favorito si es donde realmente los trabajas.
Los navegadores modernos interpretan el SVG exactamente como lo verán tus usuarios en web. Es una manera rápida de validar estilos CSS, colores y trazos antes de pasarlo al entorno final (por ejemplo, a un sitio WordPress).
Si prefieres modificar el código, introduce pequeñas mejoras con un editor de texto: clases, IDs, estilos inline o limpieza de atributos innecesarios. Estos retoques reducen el peso y facilitan animaciones o cambios desde CSS externo, especialmente útil en front-end.
Con estas herramientas y métodos, gestionar archivos SVG en Windows deja de ser un dolor de cabeza para convertirse en una ventaja productiva: desde ver miniaturas y vistas previas en el Explorador con PowerToys o una extensión, hasta abrirlos con navegadores, editores de texto o programas vectoriales, pasando por su uso en Office y su potencial en SEO y accesibilidad. Aplicando lo anterior, ganarás velocidad, calidad visual y control total sobre tus gráficos.