Cómo editar un archivo SVG: editor visual o código

Para editar un archivo SVG, abre una copia en un editor visual si quieres modificar formas, colores y curvas, o en un editor de texto para pequeños cambios en el marcado. Guarda como SVG y vuelve a abrir el archivo para comprobar el resultado. El método adecuado depende del cambio que necesites y de los objetos que contenga.

Antes de elegir un comando que altere más la estructura, identifica lo que has seleccionado. Un grupo, un trazado con varias partes y un PNG incrustado pueden parecer un único objeto en el lienzo. Cada uno necesita una solución diferente.

Prepara una copia e identifica los objetos SVG

Necesitas el archivo SVG, una copia de trabajo, un editor y un visor compatible con SVG. Conserva el original hasta que la copia exportada pase las comprobaciones.

SVG significa Scalable Vector Graphics. Su marcado XML puede describir formas y trazados vectoriales, pero también contener imágenes incrustadas. Un trazado describe una línea o forma; un nodo es un punto editable de ese trazado en un editor vectorial. La extensión SVG por sí sola no indica si el dibujo visible permite acceder a esos puntos.

Abre la copia e inspecciona el objeto seleccionado en el panel Capas u Objetos. Si hace falta, consulta el marcado en un editor de texto. Identifica el tipo de objeto antes de cambiar su estructura:

El elemento <image> puede referenciar contenido PNG o JPEG. Esos píxeles no se convierten en trazados porque el archivo exterior termine en .svg. Los bordes pixelados al ampliar son una pista; el panel de objetos y la referencia al origen ofrecen un diagnóstico más preciso. Algunos editores también insertan un SVG vectorial válido como un único objeto gráfico, así que una sola selección demuestra muy poco.

Un trazado compuesto puede conservar huecos, como el centro de una «O». Separarlo puede modificar esos huecos. Consulta el diagnóstico de tipos de objeto SVG cuando Desagrupar no esté disponible o no tenga efecto.

Elige un editor visual o el código

Inkscape es gratuito y de código abierto, funciona en macOS, Windows y Linux, y utiliza SVG como formato principal. Illustrator es otra opción si ya forma parte de tu trabajo. Figma permite transferir recursos como SVG entre herramientas de diseño, aunque su guía de importación excluye los elementos marker y pattern de SVG. Comprueba una importación compleja antes de elegir editor.

El flujo del editor SVG de Canva documenta cambios básicos de color y distribución. Los editores del navegador pueden servir para tareas pequeñas. Comprueba la compatibilidad con los rellenos, trazos, textos y efectos del archivo, además de las condiciones actuales de exportación. Para la tarea más concreta de dividir rellenos sólidos compatibles en archivos alineados por color exacto, usa el Separador de colores SVG; usa un editor vectorial si necesitas modificar trazados.

Edita las formas visualmente y verifica la exportación

Los comandos cambian según el editor, pero el orden de trabajo es el siguiente:

1. Abre la copia de trabajo. Compara el diseño importado con el original. Detente si ya cambiaron letras, patrones o efectos.
2. Selecciona el objeto previsto. Entra en un grupo o desagrúpalo solo cuando el panel lo identifique como grupo. Si es un trazado, cambia a la herramienta de nodos o selección directa.
3. Haz un cambio. Modifica un relleno, mueve una parte o ajusta algunos nodos. Al redimensionar, conserva la proporción salvo que quieras estirar el diseño.
4. Comprueba la zona modificada. Inspecciona curvas y huecos pequeños de cerca; después observa el conjunto al tamaño previsto.
5. Guarda o exporta un SVG nuevo. Vuelve a abrirlo en un visor y en la aplicación donde lo usarás. Comprueba la parte editada, las dimensiones generales y los objetos que deban poder seleccionarse.

Al cambiar colores, distingue el relleno, la pintura interior de una forma, del trazo, la pintura de su contorno. Un color visible puede abarcar muchos objetos. La selección por mismo relleno puede ayudar, pero revísala antes de cambiarlo: otra parte puede compartir ese color. La guía para cambiar el color de un SVG explica estilos heredados y colores que no cambian.

Conserva un original de trabajo editable si tu editor usa un formato propio o metadatos adicionales. Las opciones para guardar SVG de Adobe incluyen ajustes de fuentes, propiedades CSS, imágenes rasterizadas y datos de edición de Illustrator. Un archivo que parece correcto después de exportarlo puede tener otro marcado o contenido rasterizado. Compara también los objetos y referencias necesarios, además de la imagen.

Edita el código SVG para un cambio pequeño y controlado

Abre la copia SVG en VS Code u otro editor de texto plano. Mantén intactos el espacio de nombres, los nombres de elementos y las comillas. Haz un cambio y representa el archivo antes del siguiente.

Prueba un cambio de relleno sin modificar el trazado

Guarda este ejemplo como triangle.svg y ábrelo en un visor compatible con SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Sustituye #3b82f6 por #f97316 en el atributo fill del trazado.
2. Guarda y vuelve a abrir o actualiza el archivo.
3. Comprueba que el triángulo sea naranja y que su contorno no haya cambiado. Los datos d, el id y la class deben seguir coincidiendo con el original.

Si el color no cambia, inspecciona un atributo style, una regla de clase, pintura heredada o un trazo que pueda controlar lo visible. Modifica la regla responsable en vez de sustituir cada aparición del color en todo el archivo.

Nota de método: Representamos este ejemplo antes y después del cambio de relleno con un renderizador SVG y comprobamos los píxeles resultantes. El triángulo cambió de color mientras los datos del trazado, el ID y la clase permanecieron iguales. Este pequeño ejemplo no prueba la importación o exportación de un SVG complejo en una aplicación de diseño.

Elimina márgenes vacíos con viewBox

El viewBox del elemento raíz tiene cuatro números: x mínimo, y mínimo, anchura y altura. Definen el rectángulo del espacio de coordenadas SVG que se mapea al área visible.

En el ejemplo, el triángulo ocupa x=8 a 40 e y=8 a 40. Cambia viewBox="0 0 48 48" por viewBox="8 8 32 32" sin tocar los datos del trazado. Guarda y representa de nuevo. Ahora el triángulo ocupa más del mismo espacio visible de 48 por 48 porque se han quitado los márgenes vacíos.

Ese cambio modifica el mapeo del lienzo, no la geometría del trazado ni los atributos width y height del elemento raíz. En dibujos reales, deja espacio para trazos y efectos: una caja ajustada a la geometría puede recortarlos. La opción visual más segura suele ser ajustar la página o mesa de trabajo al dibujo e inspeccionar una copia exportada. Si se importa con un tamaño físico incorrecto, sigue la guía de dimensiones SVG y viewBox.

Si el dibujo desaparece, se recorta o se estira, restaura el viewBox original y comprueba los cuatro valores y la proporción. No «arregles» un problema de lienzo moviendo todos los nodos.

Cuando un SVG trazado necesita limpieza

Una imagen rasterizada guarda píxeles en una cuadrícula. La vectorización reconstruye geometría a partir de ellos, por lo que el archivo trazado puede organizar colores y contornos de forma diferente al diseño original.

Una parte visible puede quedar repartida entre trazados pequeños. Un solo color también puede abarcar varias regiones desconectadas. Los nodos densos, puntos diminutos, formas de fondo y contornos superpuestos pueden ralentizar un cambio sencillo. Inspecciona esas propiedades concretas en lugar de juzgar el archivo solo por su nitidez a un nivel de zoom.

Estructura fragmentada

Estructura más sencilla

Estas ilustraciones explican el esfuerzo de edición; no son muestras de conversión ni una comparación medida entre productos. Si merece la pena conservar el trazado, repara las zonas afectadas y simplifica solo donde el contorno siga siendo preciso. Si procede de una imagen rasterizada y la limpieza sería excesiva, prueba a vectorizar de nuevo el original. Conserva la geometría vectorial nativa útil en vez de trazar una captura de ella.

Cómo hacerlo con PerfectVector

PerfectVector encaja cuando necesitas crear trazados a partir de imágenes rasterizadas, como un PNG o JPEG original o el contenido rasterizado de un SVG. Para dibujos vectoriales existentes que quieras conservar, usa los métodos generales de edición anteriores.

Para tu propia conversión, sigue este orden:

1. Sube el original rasterizado y compara la vista previa vectorial. Busca detalles ausentes, zonas no deseadas y contornos distintos al original.
2. Desbloquea el resultado antes de editar o exportar. La conversión y vista previa son gratuitas e ilimitadas; la política pública actual de precios indica que un crédito desbloquea cada resultado único y que volver a descargarlo es gratuito.
3. Inspecciona y edita la geometría desbloqueada. Revisa las formas y nodos necesarios, ajusta la paleta cuando resulte útil y compara el resultado editado al tamaño previsto.
4. Exporta y verifica en tu siguiente aplicación. Abre de nuevo el SVG, selecciona las partes previstas y comprueba dimensiones y detalles pequeños. Una vista previa por sí sola no demuestra que un archivo esté listo para cualquier editor, impresora o máquina de corte.

Las letras rasterizadas se reconstruyen como geometría, así que no esperes texto editable escrito con una fuente. Ten disponible la corrección manual o el redibujo si una letra, curva o hueco importante no sobrevive al trazado.

Preguntas frecuentes

¿Cómo edito un SVG gratis? Usa Inkscape para editar visualmente o un editor de texto plano para modificar el marcado. Las herramientas del navegador también pueden ofrecer funciones gratuitas; consulta sus condiciones actuales de exportación y la compatibilidad con las funciones SVG de tu archivo.

¿Puedo editar un SVG en VS Code? Sí. Modifica el marcado XML para pequeños cambios de relleno, dimensiones, viewBox o IDs y clases necesarios. Guarda una copia y represéntala después. Usa un editor visual para cambiar curvas.

¿Por qué no puedo seleccionar formas individuales de mi SVG? Inspecciona el tipo de objeto. Puede ser un grupo, un trazado con varios subtrazados, un dibujo recortado o una imagen incrustada. Entra o desagrupa un grupo real; edita nodos para la geometría y vectoriza contenido rasterizado solo si necesitas trazados.

¿Puedo editar un SVG en Canva? El flujo SVG documentado de Canva cubre cambios básicos de color y distribución. Comprueba el archivo importado y las condiciones actuales de descarga SVG. Usa un editor vectorial o el marcado si necesitas cambios precisos de contorno o controlar IDs y clases.

¿Puedo editar un resultado de PerfectVector antes de desbloquearlo? Para tu propia conversión, compara primero la vista previa y desbloquea el resultado antes de usar los controles de edición y exportación. Inspecciona el SVG exportado en la aplicación donde se utilizará.

Fuentes

1. W3C — Scalable Vector Graphics (SVG) 2 — modelo de documento, formas, trazados y estilos SVG.
2. W3C — Contenido incrustado SVG — las imágenes rasterizadas pueden permanecer incrustadas en un SVG.
3. W3C — Sistemas de coordenadas, transformaciones y unidades SVG — mapeo de viewBox y diferencia entre geometría y dimensiones del área visible.
4. Inkscape — Acerca de Inkscape — información oficial sobre plataformas, formato SVG y código abierto.
5. Adobe — Guardar ilustraciones en Illustrator — ajustes de exportación SVG y datos conservados de edición de Illustrator.
6. Figma — Copiar recursos entre herramientas de diseño — transferencia SVG y límites de importación de marcadores y patrones.
7. Canva — Editor SVG — flujo documentado de color, tamaño y distribución básicos.
8. PerfectVector — Política de precios — condiciones actuales de vista previa, desbloqueo y nueva descarga.

Conserva un SVG útil y edita su geometría existente. Si el original es rasterizado o necesitas reemplazar su trazado, prueba tu imagen original en PerfectVector, compara la vista previa con el original, desbloquea antes de editar e inspecciona las formas y dimensiones exportadas en tu siguiente aplicación.