Cómo editar archivos SVG online en tu navegador

Un icono declarado en 24 por 24 unidades que se muestra a 2.400 píxeles no se estira como una foto ampliada: se vuelve a dibujar cien veces más grande y el archivo sigue pesando lo mismo. Ese detalle explica por qué editar archivos SVG online en tu navegador se parece más a mover nodos y recolocar formas que a retocar píxeles.

El Editor vectorial abre el documento, muestra la geometría y entrega el resultado como descarga. Antes de arrastrar nada conviene saber qué acepta, en qué orden se trabaja sin estropear el original y hasta dónde llega la pestaña del navegador.

Un SVG es una lista de instrucciones, no una imagen

El formato es XML y describe formas en dos dimensiones, con sus colores, trazos y posiciones. También admite mapas de bits incrustados, y ahí está la primera trampa: un SVG con una fotografía dentro es vectorial solo en parte y conserva las limitaciones de esa foto.

El atributo que separa las coordenadas del tamaño final es viewBox. Traduce las coordenadas con las que se dibujó el contenido a las dimensiones con las que se va a mostrar. Con viewBox="0 0 24 24" y un ancho de 240 píxeles, cada unidad del dibujo ocupa diez píxeles en pantalla. A 2.400 píxeles, cada unidad ocupa cien. El contenido no ha cambiado, solo la escala de representación.

La referencia técnica es el estándar del W3C. La versión 2 sigue siendo una Candidate Recommendation, mientras que SVG 1.1 Second Edition es la que está implementada de forma más completa. Ese matiz aparece cuando un archivo usa funciones recientes y el visor no las conoce.

Lo que abre y lo que deja fuera

El editor abre SVG, PDF y archivos .ai, y trabaja con nodos Bézier, formas, texto, degradados, capas, operaciones booleanas de Pathfinder y máscaras de recorte. Exporta en SVG, PDF, PNG, JPEG y WebP, siempre a través de la descarga normal del navegador.

Hay tres límites que conviene saber de antemano. EPS no aparece ni en la importación ni en la exportación, así que un EPS no se resuelve aquí. La lectura de .ai es un comportamiento que el proyecto de origen documenta, sin promesa de conservar todo lo que el programa que creó el archivo guarda dentro. Y esta compilación no incluye ninguna fuente con caracteres árabes, de modo que el texto árabe se dibuja como cajas vacías mientras el latino, el chino, el japonés y los emojis se ven bien.

El proyecto de origen describe esta versión como alfa. No es una fórmula de marketing: significa revisar cada exportación antes de publicarla.

Primera sesión, en el orden que menos corrige

1. Abre el archivo y comprueba que la geometría está completa. Si falta una forma que debería estar, el problema viene del archivo y no del editor.
2. Fija el tamaño de trabajo. Cambiar el viewBox a mitad descoloca posiciones que ya dabas por buenas.
3. Agrupa y nombra las capas. Un logotipo con quince formas sueltas se vuelve un caos en cuanto se toca la primera.
4. Edita estructura, después color y al final texto. El texto es lo que más se mueve al cambiar el reparto de espacios.
5. Exporta una copia y ábrela fuera del editor para confirmar que se ve como esperas.

Decisiones que ahorran una segunda pasada

Si el destino es una web, exporta SVG. Si va a imprimirse o a incrustarse en un documento, el PDF suele resultar más cómodo. Si el sitio de destino no admite vectores, exporta PNG al tamaño final, sabiendo que ese PNG ya no se amplía sin volver a exportar.

Y guarda antes de cerrar la pestaña. No hay autoguardado ni biblioteca de documentos al otro lado: el guardado entrega el archivo al navegador y desde ahí vive en tu equipo.

Errores de primera sesión

El más común es confundir el tamaño del lienzo con el del dibujo. Agrandar el lienzo no agranda las formas, hay que escalar los objetos. El segundo es editar el archivo de producción en lugar de una copia. El tercero, dar por hecho que el trabajo seguirá ahí al volver: no hay sesión guardada en ninguna parte.

El límite del navegador

Al pulsar el botón de arranque, el navegador descarga el motor, una aplicación WebAssembly de tamaño considerable. Antes de ese momento no se descarga nada. A partir de ahí la edición ocurre en la pestaña y la exportación se resuelve con la descarga habitual, así que conviene permitir las descargas para el sitio o el archivo no aparecerá en la carpeta de destino.

No hace falta cuenta de FreeAIGeneration. Tampoco hay sincronización ni historial. Lo que no se guarda, se pierde.

Abrir el editor con un archivo pequeño

La forma más rápida de entender el flujo es coger un SVG de los que ya están en cualquier web y cambiarle una sola cosa. Ese ejercicio enseña más que diez tutoriales. El detalle de cada propiedad está en la guía sobre cómo cambiar colores, texto y trazados de un SVG online, y si la duda es qué contenedor usar, la comparación entre SVG, AI y EPS resuelve la papeleta. Hay más rutas de este tipo en la biblioteca de guías.