Cómo editar archivos SVG: Guía completa para principiantes (2026)

Actualizado en junio de 2026 · 6 minutos de lectura

Los archivos SVG son distintos de las imágenes normales: no basta con abrirlos en cualquier aplicación para empezar a editarlos, ya que están formados por código, no por píxeles. Pero una vez que entiendes cómo funcionan, editar archivos SVG es incluso más sencillo que editar PNG o JPG. Aquí tienes todo lo que necesitas saber.

Método 1: Inkscape (Gratis, con todas las funcionalidades)

Inkscape es el editor de SVG gratuito más potente que existe. Es de código abierto y es compatible con Windows, Mac y Linux:

• Editar formas y rutas: Mueve puntos, modifica curvas y ajusta nodos directamente
• Cambiar colores: Selecciona cualquier elemento → Panel de Relleno y Trazo → elige el color nuevo
• Redimensionar: Selecciona todo (Ctrl+A) → arrastra los tiradores de las esquinas o define las dimensiones exactas
• Añadir o eliminar elementos: Cuenta con un conjunto completo de herramientas de dibujo vectorial: rectángulos, círculos, texto, rutas
• Exportar a PNG: Archivo → Exportar PNG (o usa svg2png.org para conversiones por lotes)

Inkscape es compatible con archivos SVG estándar y su curva de aprendizaje es mucho más suave que la de Illustrator. Su interfaz está un poco anticuada, pero cumple su función perfectamente sin coste alguno.

Método 2: Figma (Gratis, basado en navegador, ideal para UI)

Figma tiene un plan gratuito muy completo y funciona completamente en el navegador:

1. Crea una cuenta gratuita en figma.com
2. Arrastra tu archivo SVG directamente sobre el Canvas
3. Haz clic en cualquier elemento para seleccionarlo
4. Usa la barra lateral derecha para cambiar colores, tamaños y posiciones
5. Exportar: Selecciona el elemento → Panel de exportación → SVG o PNG

Figma es excelente para editar iconos SVG y elementos de UI. No es la mejor opción para ilustraciones complejas con cientos de rutas.

Método 3: Editar el código SVG directamente (Gratis, no necesitas instalar ningún programa)

Como los SVG son simplemente texto, puedes editarlos en cualquier editor de código:

1. Haz clic derecho en el archivo .svg → Abrir con → Notepad (Windows) o TextEdit (Mac)
2. Busca el elemento que quieras modificar: busca las etiquetas <path>, <circle>, <rect>
3. Cambiar el color: edita fill="#FF0000" por cualquier código de color hexadecimal
4. Cambiar el tamaño: edita los atributos width y height de la etiqueta <svg>
5. Guarda los cambios y abre el archivo en un navegador para previsualizarlo

Ediciones de código SVG comunes:

• Cambiar color: fill="#ff0000" → fill="#0066ff"
• Redimensionar: width="100" height="100" → width="200" height="200"
• Eliminar fondo: Borra cualquier etiqueta <rect> con el atributo fill que cubra todo el Canvas
• Hacer transparente: Añade el atributo fill-opacity="0.5" a cualquier elemento

Método 4: Adobe Illustrator (Profesional, de pago)

Illustrator es el estándar del sector para la edición de gráficos vectoriales. Abre archivos SVG de forma nativa y te da control total sobre cada ruta y propiedad. Es la mejor opción para diseñadores profesionales que necesiten colores CMYK, archivos listos para imprenta o integración con otras aplicaciones de Adobe. Es excesivo para cambios de color sencillos o redimensionamientos.

Método 5: Photopea (Gratis, basado en navegador, similar a Photoshop)

Photopea es un clon gratuito de Photoshop que funciona en el navegador y también es compatible con SVG:

• Abre los SVG como capas vectoriales editables
• Haz doble clic en la miniatura de la capa para cambiar su color
• Archivo → Exportar como → SVG o PNG

Es un término medio perfecto: es más potente que editar el código directamente y más sencillo que Inkscape.

Tareas comunes de edición de SVG (Referencia rápida)

Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Cree SVG2PNG después de cansarme de tener activos de clientes en servidores aleatorios. Más sobre mí →