Editor SVG online gratis: dibuja formas y texto y descarga el SVG
Dibuja formas, flechas, trazos a mano alzada y texto en un lienzo, y descarga un SVG o PNG limpio. Gratis, en tu navegador y sin registro.
Haz clic en una forma para seleccionarla, arrástrala para moverla y arrastra un tirador para redimensionarla. Las flechas la desplazan (Shift para 10 px).
Atajos de teclado
- V Seleccionar / mover
- R Rectángulo
- E Elipse
- G Triángulo
- S Estrella
- L Línea
- A Flecha
- P Lápiz a mano alzada
- T Texto
- Ctrl/⌘ Z deshacer, Shift para rehacer
- Ctrl/⌘ D duplicar
- Del eliminar lo seleccionado
- Flechas desplazar 1 px, Shift 10 px
- Shift al dibujar: cuadrado, círculo, línea a 45°
- Esc deseleccionar o cancelar un arrastre
Todo ocurre en tu navegador: no se sube nada y tu dibujo se guarda automáticamente en local, así que no se pierde al recargar. ¿Necesitas un logotipo, un diagrama ilustrado o un sistema de marca completo en lugar de un boceto rápido? Descubre más herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este editor SVG gratis te permite dibujar un gráfico vectorial en tu navegador y descargarlo como SVG limpio o como PNG, sin cuenta y sin subir nada. Elige una herramienta de forma, arrastra en el lienzo, ajusta el relleno y el trazo, añade una flecha y una etiqueta, y el archivo está listo. Está pensado para el trabajo de treinta segundos: un diagrama para una diapositiva, un icono sencillo, un logotipo provisional, un recuadro con anotaciones para la documentación.
A propósito no es un clon de Illustrator. No hay panel de capas, operaciones booleanas ni edición de nodos bézier, porque eso es lo que hace que las suites vectoriales completas lleven una tarde aprenderlas. A cambio tienes todas las herramientas que necesita un dibujo rápido, atajos de teclado para todas ellas, un deshacer que funciona como esperas y una exportación que solo contiene tus formas: sin metadatos del editor, sin fuentes incrustadas y sin sorpresas al abrirla en otro sitio.
Cómo usarla
- Elige un tamaño de lienzo predefinido (icono, publicación cuadrada, Full HD) o escribe el tuyo, y elige un fondo transparente o de color.
- Selecciona una herramienta: rectángulo (R), elipse (E), triángulo, estrella, línea (L), flecha (A), lápiz a mano alzada (P) o texto (T). Arrastra en el lienzo para dibujar; mantén Shift para un cuadrado o un círculo perfectos o una línea a 45°.
- Haz clic en una forma con la herramienta de selección (V) para moverla, arrastra un tirador para redimensionarla y edita su relleno, trazo, opacidad o radio de esquina en el panel. Las flechas la desplazan 1 px, y con Shift, 10 px.
- Duplica con Ctrl/⌘ D, elimina con Supr, reordena con los botones Delante / Detrás y deshaz cualquier cosa con Ctrl/⌘ Z.
- Descargar SVG para un archivo escalable, Descargar PNG (de 1× a 3×) para un mapa de bits, o Copiar código para pegar el SVG directamente en HTML. Tu dibujo se guarda automáticamente en este navegador por si quieres volver a él.
Preguntas frecuentes
¿Este editor SVG es realmente gratis y sin registro?
Sí. No hay cuenta, ni marca de agua, ni límite de exportación, ni ventas adicionales. El editor funciona por completo en tu navegador; puedes desconectarte de internet después de cargar la página y sigue funcionando. Creamos estas herramientas porque atraen gente al sitio, y algunas de esas personas necesitan más adelante el trabajo de diseño, web o software que hacemos para clientes.
¿Qué puedo dibujar con él?
Rectángulos (con esquinas redondeadas), elipses y círculos, triángulos, estrellas de cinco puntas, líneas rectas, flechas, trazos a mano alzada y texto en tres familias tipográficas. Cada forma tiene su propio relleno, trazo, grosor de trazo y opacidad, se puede mover, redimensionar, duplicar y reordenar, y se ajusta a una cuadrícula de 10 px si quieres. Eso cubre diagramas, iconos sencillos, anotaciones y logotipos provisionales. No cubre la edición de nodos bézier, los degradados, las capas ni las operaciones booleanas; para eso necesitas Inkscape o Figma.
¿Puedo abrir y editar un archivo SVG existente?
En parte, y el editor te dice exactamente hasta dónde. Abrir SVG importa rectángulos, círculos, elipses, líneas, polilíneas, polígonos, trazados y texto, conservando sus colores y posiciones. Todo lo que no puede representar fielmente se omite en lugar de destrozarse, y un mensaje informa de lo que se ha omitido: elementos con un atributo transform, grupos con transformaciones, referencias <use> e <image>, rellenos con degradado y hojas de estilo CSS. Los iconos y diagramas sencillos se abren sin problemas; una ilustración compleja exportada desde Illustrator, por lo general, no, y preferimos decirlo antes que fingir.
¿Descargo SVG o PNG?
SVG si el gráfico se va a escalar, editar más adelante o usar en un sitio web: se mantiene nítido a cualquier tamaño, suele ser mucho más pequeño que un PNG y se le puede aplicar estilo con CSS. PNG si necesitas un mapa de bits fijo: para pegarlo en un documento o una diapositiva que maneja mal el SVG, subirlo a una plataforma que rechaza el SVG o enviárselo a alguien que solo quiere una imagen. Las opciones 2× y 3× te dan un PNG nítido para pantallas de alta densidad. Si dudas, descarga los dos; son gratis.
¿Se sube mi dibujo a algún sitio?
No. El dibujo, la edición y la exportación se hacen en tu navegador con las API estándar de SVG y Canvas. No se envía nada a nuestro servidor. El dibujo se guarda automáticamente en el almacenamiento local de tu navegador para que no lo pierdas al recargar o cerrar una pestaña sin querer; esa copia se queda en tu dispositivo y se borra al pulsar Nuevo.
¿Puedo usar los archivos SVG con fines comerciales?
Sí. Lo que dibujas es tuyo, sin licencia asociada y sin necesidad de atribución, para uso personal o comercial. El archivo exportado solo contiene tus formas y marcado SVG estándar, así que no hay nada nuestro que licenciar.
¿Por qué la exportación se ve ligeramente distinta del lienzo?
El editor dibuja con el mismo SVG que mostrará tu navegador, así que las formas coinciden exactamente. Hay dos cosas que pueden diferir: la cuadrícula, que solo existe en el editor y nunca se exporta, y el texto, que usa familias tipográficas genéricas (Arial, Georgia, Courier New) para que el archivo se vea igual en cualquier equipo sin incrustar fuentes. Si a un visor le falta una de esas fuentes, la sustituye por una equivalente, lo que puede variar el ancho del texto en unos pocos píxeles.
SVG o PNG: qué significa realmente la diferencia
Un SVG es un archivo de texto que describe formas: un rectángulo en estas coordenadas, de este ancho y de este color. Un PNG es una cuadrícula de píxeles. Esa única diferencia explica todas las consecuencias prácticas. Un SVG se escala a cualquier tamaño sin desenfocarse, a menudo ocupa unos pocos cientos de bytes en un diagrama sencillo, se puede editar después y se le puede cambiar el color con CSS en una página web. Un PNG queda fijo al tamaño con el que lo exportaste, ocupa más cuanto mayor es la imagen y solo se puede editar como píxeles.
SVG es la opción predeterminada correcta para logotipos, iconos, diagramas y todo lo que vaya en un sitio web. PNG es la adecuada cuando el destino no admite SVG (muchos clientes de correo, algunas herramientas de documentos, la mayoría de las redes sociales) o cuando el destinatario solo quiere una imagen que pueda poner en cualquier parte. El editor exporta ambos a partir del mismo dibujo, así que elegir no cuesta nada.
Para qué sirve este editor y para qué no
• Diagramas rápidos: recuadros, flechas y etiquetas para una diapositiva, un README o una incidencia de soporte. La cuadrícula y el ajuste mantienen todo alineado sin complicarse.
• Iconos y favicons sencillos: dibuja a 256 × 256 o 512 × 512 con fondo transparente, descarga el SVG y pásalo por el generador de favicons para obtener todos los tamaños que necesita un sitio.
• Logotipos y marcas provisionales: una forma, una letra, un color. Suficiente para que un prototipo o una presentación para inversores supere la fase del espacio en blanco.
• Anotaciones: abre un gráfico o diagrama SVG sencillo, añade un círculo y una flecha alrededor de la parte que estás comentando y exporta.
No es la herramienta para ilustración, diseño con mucha tipografía ni nada con curvas que tengas que moldear punto a punto. Los trazos a mano alzada se suavizan automáticamente, pero no se pueden editar después. Para ese tipo de trabajo, Inkscape es gratis y excelente, y el plan gratuito de Figma va bien para gráficos de interfaz. Saber cuándo pasar a algo más potente forma parte de usar bien una herramienta pequeña.
Consejos para archivos SVG limpios
Dibuja al tamaño que pretendes. Un icono dibujado en un lienzo de 1920 × 1080 se exporta con ese viewBox, y quien lo use tendrá que escalarlo. Ajusta primero el lienzo a las dimensiones previstas; los tamaños predefinidos cubren los habituales.
Prefiere el trazo al relleno para el dibujo lineal y mantén grosores de trazo uniformes; mezclar grosores es la forma más rápida de que un diagrama parezca de aficionado. Dos o tres colores casi siempre bastan, y las muestras del panel están elegidas para combinar bien.
Mantén el texto como texto. Este editor exporta elementos <text> reales en lugar de convertirlos en trazados, lo que hace que el archivo sea diminuto y se pueda buscar, y te permite cambiar el texto más adelante. Si una herramienta posterior exige contornos, haz esa conversión allí, en el último paso.
Deja el fondo transparente salvo que necesites expresamente un color. Un SVG transparente encaja en cualquier página o diapositiva; un rectángulo blanco detrás de un logotipo, no.
Herramientas gratis relacionadas
- Creador de diagramas ER — Escribe el esquema de tu base de datos como texto y mira cómo se dibuja el diagrama entidad-relación en vivo; expórtalo a PDF o SVG.
- Creador de mapas mentales — Escribe un esquema con sangrías y obtén un mapa mental al instante; expórtalo a PDF o SVG. Sin cuenta y sin arrastrar y soltar.
- Generador de favicon — Convierte cualquier logotipo en un paquete de favicon completo (favicon.ico, todos los tamaños PNG, icono táctil de Apple y webmanifest) con un clic.
- Conversor de imágenes — Convierte entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP y SVG. La mayoría de las conversiones no salen de tu navegador.