Better SVG es una extensión open source para Visual Studio Code creada por midudev que mejora notablemente la edición de archivos SVG. Permite previsualizar los gráficos en tiempo real, optimizarlos automáticamente y manipularlos visualmente sin salir del editor, algo especialmente relevante para proyectos frontend modernos.
Qué es Better SVG
Better SVG es una extensión para Visual Studio Code que añade un editor especializado para archivos .svg. En lugar de trabajar únicamente con código XML, el desarrollador puede ver cómo se renderiza el gráfico en tiempo real mientras lo edita.
El proyecto está publicado en GitHub bajo licencia Apache-2.0 y se distribuye gratuitamente a través del Visual Studio Marketplace. Su crecimiento en estrellas refleja el interés de la comunidad frontend por mejorar el flujo de trabajo con SVG.
Por qué es importante trabajar bien con SVG
Los SVG se han convertido en un formato clave en el desarrollo web moderno. Se utilizan en iconos, ilustraciones, logotipos y gráficos interactivos gracias a su escalabilidad y bajo peso.
Sin embargo, editar SVG directamente en texto plano puede ser complejo. Pequeños cambios en coordenadas, colores o atributos suelen requerir recargar el navegador constantemente. Better SVG resuelve este problema integrando visualización, edición y optimización en un solo entorno.
Características principales de Better SVG
Según su documentación oficial, la extensión incluye un conjunto de herramientas pensadas para acelerar el trabajo diario con gráficos vectoriales:
- Vista previa en vivo: muestra el resultado del SVG al mismo tiempo que se edita el código.
- Control de currentColor: permite cambiar el color de visualización para comprobar el SVG en distintos contextos visuales.
- Fondo oscuro opcional: facilita la visualización de SVG claros o blancos.
- Zoom y desplazamiento interactivo: inspección precisa de detalles del gráfico.
- Optimización con SVGO: botón integrado para reducir tamaño y limpiar el SVG automáticamente.
- Cuadrícula de fondo: útil para alinear y medir elementos visuales.
Cómo funciona la extensión en la práctica
El flujo de uso de Better SVG es sencillo y no requiere configuración compleja:
- Abrir un archivo .svg en Visual Studio Code.
- La extensión activa un editor dividido con código a la izquierda y vista previa a la derecha.
- Desde el panel visual se pueden controlar el zoom, el fondo, los colores y la optimización.
- Los cambios se reflejan instantáneamente en la vista previa.
Opciones de configuración disponibles
Better SVG incluye ajustes personalizables desde los settings de VS Code que permiten adaptar la experiencia a cada desarrollador:
- betterSvg.autoReveal: abre automáticamente la vista previa al abrir un SVG.
- betterSvg.autoCollapse: cierra la vista previa al cambiar a otro tipo de archivo.
- betterSvg.defaultColor: define el color por defecto para currentColor.
Público objetivo
Esta extensión está especialmente pensada para perfiles técnicos que trabajan habitualmente con SVG:
- Desarrolladores frontend que usan SVG en React, Vue o Angular.
- Diseñadores técnicos e integradores que manipulan iconos e ilustraciones.
- Equipos que quieren optimizar activos SVG sin depender de herramientas externas.
Análisis y valoración
Better SVG cubre un hueco real en el ecosistema de Visual Studio Code. No intenta sustituir herramientas de diseño como Figma o Illustrator, sino mejorar la fase técnica de ajuste, limpieza y validación del SVG final.
La integración directa con SVGO y la vista previa en tiempo real reducen errores, ahorran tiempo y mejoran la calidad de los activos gráficos en producción.
Conclusión
Better SVG es una extensión ligera, bien enfocada y muy útil para cualquier desarrollador que trabaje con gráficos vectoriales. Su enfoque práctico y su integración directa en el editor la convierten en una herramienta recomendable para optimizar el flujo de trabajo con SVG.
A corto plazo, extensiones como esta refuerzan la idea de que Visual Studio Code puede cubrir cada vez más tareas sin depender de herramientas externas.
