Cómo editar un SVG (y por qué uno limpio es mucho más fácil)

Hay dos formas de editar un SVG. Puedes abrirlo en un editor visual y hacer clic en las formas para cambiarles el color, redimensionarlas o moverlas, o puedes abrir el código y modificarlo a mano, porque un SVG en realidad es solo un archivo de texto. La mayoría de las personas quiere la primera opción, normalmente para cambiar un color o redimensionar un icono, y un editor visual lo resuelve en segundos.

La parte que casi ningún tutorial menciona: lo fácil que sea hacer esto depende de cómo se creó el SVG. Un archivo limpio con unas pocas formas ordenadas se edita en segundos. Uno desordenado, como los que suele generar un conversor rápido, puede traer miles de puntos sueltos y un solo color dividido en cientos de fragmentos; entonces, eso de "solo haz clic en la forma y cambia el color" deja de funcionar. Esta guía cubre ambos métodos de edición y cómo saber qué tipo de archivo tienes delante.

La versión rápida

• Dos formas de editar: visualmente en un editor (cambiar color, tamaño o forma) o directamente en el código SVG (es solo texto).
• Editor visual gratis: Inkscape. Profesional: Illustrator. En el navegador: Figma o un editor SVG online gratuito. Código: VS Code o cualquier editor de texto.
• La tarea habitual, cambiar colores: selecciona una forma y cambia su relleno. Es rápido en un archivo limpio y doloroso en uno fragmentado.
• Edita el código cuando necesites conservar nombres de clases e IDs intactos, cambiar el viewBox o hacer un ajuste rápido sin abrir una app.
• Si no puedes seleccionar la forma que quieres, el problema es el archivo, no el editor. Una conversión más limpia suele ser la verdadera solución.

Primero, qué hay realmente dentro de un SVG

Un SVG se puede editar por lo que es: un conjunto de formas descritas como matemáticas, escrito en texto plano (específicamente XML). Un círculo se guarda como un centro y un radio; un logo, como una serie de trazados, cada uno con su propio color de relleno. (Aquí tienes la versión más larga si los vectores son nuevos para ti.)

Por eso puedes cambiarle el color o el tamaño sin que se vea borroso, y por eso se abre a dos tipos de edición completamente distintos. Ábrelo en un editor visual y trabajas con las formas. Ábrelo en un editor de texto y trabajas con el código que las describe. El mismo archivo, dos puertas de entrada.

Revisa una cosa antes que nada: abre el SVG e intenta hacer clic en una sola forma. Si puedes seleccionarla y moverla por separado, es un vector real y editable. Si todo se selecciona como un solo bloque y se pixela al hacer zoom, probablemente sea una imagen rasterizada envuelta en un archivo .svg, un vector "falso" que no puedes editar de verdad. Ningún editor arregla eso; primero hay que convertir bien el archivo.

Las dos formas de editar un SVG y cuándo usar cada una

Quieres…	Mejor método
Cambiar colores, redimensionar o mover formas	Editor visual (Inkscape, Illustrator, Figma)
Editar texto o cambiar unos colores rápidamente	Editor visual, o el código para cambios puntuales
Conservar nombres de clases / IDs para CSS o animación	Editar el código directamente
Cambiar el viewBox, las dimensiones o un valor hexadecimal	Editar el código directamente
Redibujar o modificar trazados a mano	Editor visual

La mayor parte de la edición es visual. Recurres al código cuando eres desarrollador y necesitas que el marcado se mantenga exactamente como está escrito, algo que un editor visual no siempre respeta (más sobre eso abajo).

Editar un SVG visualmente

Esta es la ruta que la mayoría busca, y cubre cambiar colores, redimensionar, modificar formas y eliminar partes.

Elige un editor

• Inkscape es gratuito, de código abierto y funciona en Mac, Windows y Linux. Es la respuesta habitual a "con qué edito SVGs", y se la ha ganado.
• Adobe Illustrator es el estándar profesional de pago y te da el mayor control si ya lo tienes.
• Figma funciona en el navegador y maneja bien los cambios ligeros y el cambio de colores, por eso muchos equipos de producto lo usan.
• Editores online gratuitos como Boxy SVG, o un editor SVG web rápido, cubren cambios pequeños sin instalar nada.

Haz la edición

Los pasos son los mismos en cualquiera:

1. Abre el archivo en tu editor (Archivo → Abrir, o arrástralo).
2. Desagrupa si hace falta. Los SVG convertidos y exportados suelen llegar como un solo grupo bloqueado. Selecciona todo y desagrupa (en Illustrator e Inkscape) para poder acceder a las formas individuales.
3. Selecciona la forma que quieres con la herramienta de selección o selección directa.
4. Modifícala. Define un nuevo color de relleno, arrastra un tirador para redimensionarla, muévela, edita el texto o elimina una parte que no necesites.
5. Guarda o exporta como SVG cuando termines.

La edición más común: cambiar colores

La mayoría de las preguntas de "cómo edito un SVG" en realidad son "cómo cambio este color". En un archivo limpio es rápido: haces clic en la forma, eliges un nuevo relleno y listo. Cada color es su propia forma editable, así que convertir el azul de tu marca en verde es un clic por forma.

También es justo aquí donde un archivo desordenado se viene abajo, que es la siguiente sección.

Editar directamente el código SVG

Como un SVG es texto, puedes abrirlo en VS Code, Notepad o cualquier editor de texto y modificarlo a mano. Esta es la ruta del desarrollador, y para algunas tareas es más rápida y segura que cualquier app visual:

• Cambiar colores: busca el fill="#3b82f6" de la forma y cambia el valor hexadecimal.
• Redimensionar el lienzo: edita el width, el height o el viewBox.
• Mantener intactos tus puntos de conexión: este es el punto importante. Los editores visuales como Illustrator a menudo reescriben el marcado al guardar, renombrando o eliminando los atributos class e id de los que dependen tu CSS o JavaScript. Si tu SVG está conectado a estilos o animaciones, editar el código a mano es la única forma confiable de conservar esos puntos de conexión.

La compensación es simple: editar código es excelente para cambios pequeños y precisos, y para cualquier cosa que toque clases, IDs o animaciones. Es la herramienta equivocada para modificar la curva de un trazado o cambiar los colores de una ilustración cargada. Para eso están los editores visuales.

Por qué algunos SVG son una pesadilla de editar (y cómo arreglarlo)

Esto es lo que ninguna página de herramientas te dice: el editor rara vez es el problema. El problema es el archivo.

Abre un SVG limpio y editarlo se siente tranquilo. Hay unas pocas formas con nombre, un relleno por forma y pocos nodos, así que haces clic exactamente en lo que quieres y le cambias el color en un segundo.

Abre uno desordenado, normalmente algo trazado automáticamente por un conversor gratuito y rápido, y la misma edición se vuelve insoportable:

• Un solo color se divide en cientos de fragmentos diminutos, así que no hay una única "forma azul" en la que hacer clic. Hay cientos.
• Las curvas suaves se llenan de miles de puntos de ancla, así que modificar cualquier forma es casi imposible y el editor se ralentiza. (Este es el problema de demasiados nodos completo.)
• Los rectángulos de fondo sueltos y los bordes recortados se interponen.

Cuando te pasa esto, la solución normalmente no es un editor mejor ni más paciencia. Es un archivo inicial más limpio. Reconvertir la imagen original en un SVG ordenado te da algo que sí puedes editar.

Cómo se ve esto con PerfectVector

El SVG más fácil de editar es uno limpio, y esa es la parte que PerfectVector está diseñado para hacer bien. Reconstruye tu imagen como trazados limpios con pocos nodos y mantiene cada color como su propia forma editable, así que cuando abres el resultado en Illustrator, Figma o Inkscape, puedes seleccionar y cambiar colores como los tutoriales suponen que puedes hacerlo.

También tiene un editor de color integrado, para que puedas cambiar colores o fusionarlos justo después de convertir, por color en lugar de perseguir trazados individuales. Menos colores significa menos formas que gestionar y un archivo más simple de editar después. Puedes convertir una imagen en un SVG limpio y editable y revisar los trazados tú mismo. Convierte tus primeras imágenes gratis, sin tarjeta de crédito.

Cambia colores por color, no por trazado

Una lista rápida antes de editar

• Confirma que es un vector real. Haz clic en una sola forma. Si se selecciona por separado, todo listo. Si toda la imagen se selecciona como un bloque y se desenfoca al hacer zoom, conviértela primero en un SVG real.
• Conserva el original. Guarda una copia antes de empezar, sobre todo si vas a tocar el código.
• Elige el método. Editor visual para formas y colores; código para clases, IDs, viewBox y ajustes pequeños.
• Desagrupa si el archivo llega como un solo grupo bloqueado.
• Si no puedes seleccionar lo que quieres, deja de pelearte con el archivo. Está demasiado fragmentado, y una conversión más limpia te ahorrará más tiempo que limpiar a mano.

Preguntas frecuentes

¿Cómo edito un SVG gratis? Usa Inkscape, un editor gratuito y de código abierto para Mac, Windows y Linux, para una edición visual completa. Para cambios rápidos, usa un editor SVG online gratuito en el navegador, o abre el archivo en un editor de texto como VS Code y modifica el código directamente. Las tres opciones no cuestan nada.

¿Cómo cambio el color de un SVG? En un editor visual, selecciona la forma y define un nuevo color de relleno. En el código, busca el valor de relleno de la forma (como fill="#3b82f6") y cambia el hexadecimal. Si un color está dividido en muchas formas, cambia el color por color en lugar de hacer clic en cada pieza, usando una herramienta que agrupe los colores por ti.

¿Puedo editar un SVG en VS Code? Sí. Un SVG es texto XML, así que VS Code o cualquier editor de texto lo abre sin problema. Es la ruta correcta para cambiar colores hexadecimales, el viewBox o las dimensiones, y para mantener intactos los atributos class e id para CSS o animación. No es adecuado para modificar curvas a mano.

¿Por qué no puedo seleccionar formas individuales en mi SVG? Normalmente por una de dos razones. Las formas están agrupadas, así que primero selecciona todo y desagrupa. O el archivo es una imagen rasterizada envuelta en un .svg, que no tiene formas separadas para seleccionar. Si se pixela al hacer zoom, es el segundo caso, y tendrás que convertirlo en un vector real.

¿Puedo editar un SVG en Canva? Sí, para ediciones básicas. Canva te permite cambiar colores, redimensionar y reposicionar un SVG, lo que cubre la mayoría de las necesidades ligeras. Para edición precisa de trazados, desagrupar formas complejas o cambios a nivel de código, usa Inkscape, Illustrator o un editor de texto.

¿Cómo edito un SVG en Windows o Mac? Las mismas herramientas funcionan en ambos. Inkscape funciona en Windows, Mac y Linux; Figma y los editores online funcionan en cualquier navegador; VS Code edita el código en cualquiera de los dos. No necesitas software distinto para distintos sistemas operativos.

---

Editar va sobre ruedas cuando el archivo está limpio desde el principio. Si el tuyo es un enredo de trazados sueltos, convierte el original en un SVG limpio y editable y empieza desde algo con lo que sí puedas trabajar.