Cómo abrir y editar archivos SVG en Windows

Gráficos Vectoriales Escalables (SVG) es un formato de archivo amigable para la web que se utiliza para mostrar gráficos 2D, ilustraciones vectoriales, gráficos, etc. Si bien se renderiza como una imagen, debajo hay un código XML que define las curvas y líneas. En Windows, puedes ver fácilmente archivos SVG con un navegador, pero editarlos con el editor de imágenes habitual. En esta guía, te mostraremos cómo abrir y editar un archivo SVG en Windows.

Abrir archivo SVG usando un navegador

Podemos abrir un archivo SVG en el navegador haciendo doble clic en él o arrastrándolo a nuestro navegador preferido.

Esta es la forma más fácil de abrir cualquier archivo SVG. Sin embargo, no podemos editar la imagen usando este método.

Ver un archivo SVG en el Explorador de archivos

Puedes abrir archivos SVG habilitando la función de vista previa SVG en Microsoft PowerToys. Para hacer esto, necesitas descargar e instalar PowerToys desde la página oficial de PowerToys, Microsoft Store o Windows Package Manager (winget).

Por ejemplo, utilizamos el administrador de paquetes Winget en PowerShell para instalar PowerToys:

winget install --id Microsoft.PowerToys --source winget

Después de la instalación, puedes abrir PowerToys desde el menú de inicio. En la configuración de PowerToys, ve a “Complementos del Explorador de archivos” y habilita la vista previa de “Gráficos Vectoriales Escalables” en la sección de Panel de Previsualización:

También puedes habilitar miniaturas SVG para verlas en vista de íconos, no solo en el panel de vista previa:

Ahora abre el Explorador de archivos, presiona Alt + P para habilitar el Panel de Previsualización, y selecciona cualquier archivo SVG para ver una vista previa a la derecha.

De esta manera, puedes ver miniaturas y vistas previas detalladas en el explorador de archivos sin necesidad de software adicional.

Editar un archivo SVG usando un editor de texto

Dado que los SVG son principalmente archivos XML, puedes editarlos fácilmente utilizando un editor de texto. Además, puedes usar CSS para estilizar el SVG de muchas maneras, incluso agregar animaciones. Eso es algo que no puedes hacer con formatos de imagen regulares como JPG o PNG.

Haz clic derecho en el archivo SVG, pasa el ratón sobre Abrir con, y selecciona un editor como el Bloc de notas:

Cuando abres un archivo SVG en un editor de texto, verás un código basado en XML en lugar de la imagen en sí.

Supongamos que queremos cambiar el color de relleno del archivo SVG dado a negro. En ese caso, podemos editar el atributo fill de la siguiente manera:

Guarda el código en un archivo de texto y vuelve a abrir el archivo, verás la salida actualizada, algo como esto:

Puedes usar un editor de texto para crear o editar un archivo SVG, pero eso solo funciona bien para imágenes muy simples con unas pocas formas. Si la imagen es compleja, cambiar cada parte manualmente se vuelve demasiado difícil.

Editar un archivo SVG usando un editor vectorial

Las herramientas modernas de edición vectorial, ya sean basadas en escritorio como Adobe Illustrator e Inkscape o plataformas en línea como Figma y Canva, pueden abrir y editar archivos SVG.

Por ejemplo, usaremos el editor SVG de Canva para mostrarte qué tan fácilmente puedes editar una imagen SVG utilizando una herramienta en línea. Primero, accede al editor SVG de Canva desde el sitio web oficial y luego haz clic en el botón Editar SVG:

Haz clic en el botón Subir archivos y selecciona el archivo SVG que deseas editar:

Una vez que el archivo SVG deseado esté cargado, puedes editarlo como desees. Aquí, cambié el color de fondo y el color de primer plano del archivo SVG seleccionado.

Si necesitas ediciones básicas, puedes optar por el editor SVG de Canva. Sin embargo, recomiendo usar herramientas avanzadas como Adobe Illustrator o Inkscape para editar grupos o rutas vectoriales complejas.

Convertir archivos a y desde el formato SVG

Puedes convertir un archivo SVG a otros formatos o desde otros formatos de imagen a SVG utilizando herramientas de edición de imágenes de escritorio o en línea.

Al convertir a SVG, especialmente desde PNG o JPG, las herramientas en línea pueden tener dificultades con visuales complejos. Puede que notes formas simplificadas o colores faltantes porque las imágenes rasterizadas se trazan en gráficos vectoriales.

Supongamos que queremos convertir el siguiente archivo PNG a SVG:

Utilicemos un editor en línea como Convertio para convertir una imagen PNG a SVG. Para hacer esto, sube el archivo a convertir, luego selecciona el formato de salida deseado. Finalmente, haz clic en el botón Convertir para convertir el archivo al formato seleccionado:

Una vez que el archivo se haya convertido, puedes descargarlo haciendo clic en el botón correspondiente:

Ahora abre el archivo convertido para ver el resultado final:

La salida indica una disminución significativa en la calidad de la imagen.

Por otro lado, convertir de SVG a formatos como PNG o JPG suele ser más preciso y funciona bien en la mayoría de las herramientas. Supongamos que queremos convertir la siguiente imagen SVG a JPG:

Utilicemos convertio para convertir el archivo SVG seleccionado a JPG:

Descarga la imagen y ábrela para analizar el resultado. La salida muestra que convertir un SVG a JPG no afecta la calidad de la imagen:

Si necesitas trabajar con imágenes rasterizadas en móvil, también puedes editar fotos con Photoshop para Android.