¿Qué es Editor SVG?

Dibuja formas, trazados y texto en un lienzo visual, ajusta colores de trazo y relleno, y exporta el código SVG. Sin necesidad de software de escritorio.

Las herramientas incluyen rectángulo, elipse, línea, trazo libre, texto y una librería de formas (triángulo, hexágono, estrella, flecha). El texto se edita directamente en el lienzo — pulsa la herramienta de texto y escribe, o haz doble clic en cualquier texto existente para cambiarlo. Cada elemento conserva su relleno, color y grosor de trazo, y opacidad, y puedes escribir X, Y, ancho y alto exactos en el panel de propiedades. Importa un SVG existente con un clic, ajusta el dibujo a una cuadrícula de 10 px y deshaz o rehaz hasta cincuenta pasos. Exporta el resultado como código SVG plano para HTML y React JSX, o como PNG rasterizado para sitios que no acepten SVG.

Cómo usar

1. Selecciona una herramienta de dibujo (rectángulo, elipse, línea, trazado o texto) y dibuja en el lienzo.
2. Selecciona elementos para moverlos, redimensionarlos, rotarlos o cambiar su relleno, trazo y opacidad.
3. Exporta el gráfico terminado como archivo SVG o copia el código SVG directamente.

Cuándo usar

• Dibujar un logo, separador o forma de cabecera puntual para una landing page.
• Ajustar a mano un SVG existente sin abrir una aplicación de escritorio pesada.
• Enseñar fundamentos de SVG viendo cómo cambia el código mientras dibujas.

Resultado

Un desarrollador web necesita un logotipo simple — dos círculos superpuestos con un relleno degradado. Dibuja las formas en el lienzo, aplica los colores y copia el código SVG directamente en su HTML.

Preguntas frecuentes

¿Es seguro pegar el SVG copiado directamente en mi JSX de React?

En general sí, con un detalle: atributos como stroke-width y stop-color deben pasar a camelCase (strokeWidth, stopColor) en JSX. El SVG que se copia aquí usa kebab-case, correcto para HTML y fácil de convertir con buscar y reemplazar.

¿Puedo importar un SVG ya creado para seguir editándolo?

Sí. Usa el botón Importar SVG para cargar cualquier archivo .svg desde tu dispositivo. Rectángulos, elipses, círculos, líneas, trazados y texto pasan a ser elementos editables en el lienzo. Los degradados, filtros y grupos anidados se omiten porque el editor guarda cada forma como una primitiva.

¿Por qué mi SVG se ve distinto en Illustrator o Figma?

Cada renderizador trata la alineación del trazo, los degradados y los filtros con matices distintos. La salida de aquí coincide con lo que renderiza cualquier navegador moderno, que es la conducta correcta según la spec; la diferencia suele ser interpretación del otro programa.

¿Las trayectorias admiten curvas Bézier con puntos de control?

La herramienta de trazo libre guarda los puntos que dibujas y los exporta como una polilínea. Para curvas Bézier cúbicas reales, exporta el SVG y edita el atributo d a mano, o lleva el resultado a un programa vectorial que muestre los tiradores.

¿Cuántos elementos puedo añadir antes de que el lienzo se ralentice?

Unos cientos de formas van bien en cualquier dispositivo moderno. Con miles (por ejemplo mapas o cuadrículas de iconos) empieza a notarse latencia porque cada arrastre repinta todo el lienzo. Agrupa los trazos en menos paths compuestos si llegas a ese punto.

Herramientas relacionadas