Tools 4 All
Inicio
Herramientas de imagen

Editor SVG en línea

Un editor vectorial rápido y profesional en tu navegador: dibuja con la pluma, edita nodos, combina formas, aplica degradados, anima y exporta SVG optimizado o PNG. No se sube nada.

GratisSin registroSe ejecuta localmente: los archivos nunca salen de tu dispositivo

Inicio rápido y atajos

Elige una herramienta a la izquierda (o pulsa su tecla), arrastra en el lienzo para dibujar y usa el panel Diseño de la derecha para dar estilo a la selección. Pulsa ? en cualquier momento para ver la lista completa de atajos.

  • Navega: desplaza para mover la vista, Ctrl/⌘ + rueda o pellizca para hacer zoom, mantén Space y arrastra para mover la vista. Shift+1 ajusta el zoom al contenido.
  • Selecciona: haz clic, Shift+clic o arrastra un marco de selección. Haz doble clic en un grupo para entrar en él, en un trazado para editar sus nodos o en un texto para escribir.
  • Transforma: arrastra los manejadores para escalar (Shift mantiene las proporciones, Alt escala desde el centro), arrastra el tirador redondo para rotar y usa Ctrl/⌘ + arrastrar un manejador lateral para sesgar.
  • Pluma: haz clic para crear esquinas, arrastra para crear curvas, haz clic en el primer nodo para cerrar el trazado y pulsa Enter para terminar.
  • Archivos: suelta SVG o imágenes en cualquier parte del editor, pega código SVG o capturas de pantalla, y el autoguardado conserva tu trabajo.
Untitled
Guide, features and FAQ

Cómo usar el editor SVG

  1. Abre o empieza a dibujar

    Suelta un SVG, PNG o JPEG en el lienzo, abre un archivo o empieza con una página en blanco. No se sube nada: el editor funciona completamente en tu navegador.

  2. Dibuja y edita

    Usa la pluma, el lápiz y las herramientas de formas, y luego refina los trazados nodo a nodo, combina formas con operaciones booleanas y da estilo a rellenos, trazos y degradados.

  3. Organiza

    Agrupa, reordena y bloquea objetos en el panel Capas, alinéalos y distribúyelos, reutiliza ilustraciones como símbolos y edita el código SVG directamente.

  4. Exportar

    Descarga un SVG, PNG, JPEG o WebP optimizado a cualquier escala, o copia el resultado como código SVG, URI de datos, componente de React o SVG listo para Tailwind que toma su color del CSS.

Un editor SVG profesional que funciona completamente en tu navegador

El Editor SVG de Tools 4 All es una aplicación completa de gráficos vectoriales que se abre al instante, sin descargas, cuentas ni subidas. Úsalo para dibujar logotipos, iconos, ilustraciones, diagramas y recursos de interfaz, o para limpiar y pulsar los archivos SVG que ya tienes. Está construido en torno al propio formato SVG, así que el archivo que exportas es el mismo documento que editaste: sin formato propietario ni conversiones ocultas.

Qué puedes hacer

  • Dibuja con precisión: herramienta pluma con curvas Bézier, lápiz a mano alzada con suavizado, rectángulos con esquinas redondeadas, biseladas o invertidas independientes, elipses, líneas, un pincel de manchas, un borrador, un cuchillo y unas tijeras, y formas editables: polígonos, estrellas, triángulos, cruces, marcos, anillos, sectores, medialunas, flechas, bocadillos, engranajes, corazones, nubes, flores y espirales, además de texto.
  • Edita trazados nodo a nodo: mueve nodos y manejadores, convierte entre nodos de esquina, suaves y simétricos, añade y elimina nodos, une y divide trazados, curva segmentos directamente y ajusta los manejadores a las tangentes.
  • Combina formas: unión, resta, intersección, exclusión y división, además de contornear trazo, desplazar trazado, simplificar e invertir, todo calculado por nuestro propio motor geométrico, que conserva las curvas, en un worker en segundo plano.
  • Da estilo a todo: colores sólidos, degradados lineales y radiales con manejadores en el lienzo, motivos, opacidad por relleno y por trazo, discontinuas, remates, uniones, marcadores de punta de flecha, modos de fusión, efectos de desenfoque y sombra paralela, trazados de recorte y máscaras.
  • Mantén el orden: un panel de capas con reordenación por arrastre, cambio de nombre y anidación, bloqueo y ocultación, agrupar y desagrupar, alinear y distribuir respecto a la selección, la mesa de trabajo o un objeto clave, muestras del documento y símbolos reutilizables.
  • Trabaja como un profesional: guías inteligentes con etiquetas de distancia e indicaciones de espaciado igual, ajuste a la cuadrícula, a los píxeles, a las guías de regla, a los nodos y a los trazados, campos numéricos de X/Y/An/Al/rotación, deshacer ilimitado y atajos al estilo de Figma e Illustrator.
  • Código y exportación: una vista de código SVG bidireccional, una exportación SVG optimizada con indicador de tamaño, PNG/JPEG/WebP a cualquier escala y copia como SVG, URI de datos, React (JSX o TSX), SVG para Tailwind o fondo CSS.
  • Hecho para producción web: colores del documento con sustitución en un clic y Convertir a currentColor, texto a contornos, contornear trazo, aplanar transformaciones y desagrupar, ajustar el lienzo al contenido y simplificar trazados con ruido.
  • Un espacio de trabajo de verdad: varios dibujos en pestañas, cada uno con su propio historial de deshacer, menús cortos con submenús, un panel lateral que se pliega (Ctrl/⌘+B) y edición a pantalla completa en móviles y ordenadores.

Por qué importa un editor nativo de SVG

Muchas herramientas de diseño tratan el SVG como un formato de exportación: dibujas en su propio modelo y el SVG se genera al final. Eso funciona para iconos sencillos. Pero falla cuando necesitas editar un archivo existente, conservar los ids de los que dependen tu CSS o tu JavaScript, o entender por qué un archivo pesa diez veces más de lo que debería. Este editor trabaja directamente sobre el documento SVG. Los grupos siguen siendo grupos, los degradados siguen siendo degradados y un <symbol> usado cinco veces sigue siendo un solo símbolo. Cuando cambias el nombre de una capa, estás definiendo el id del elemento.

Rápido con archivos grandes

La velocidad fue un objetivo de diseño desde la primera línea de código. El dibujo lo renderiza tu propio navegador de forma nativa dentro de una capa aislada. Los manejadores de selección, los contornos al pasar el ratón y las guías se dibujan en una capa superpuesta aparte, así que mover el ratón nunca toca tu documento. Un índice espacial (un R-tree) encuentra lo que hay bajo el puntero en microsegundos, incluso con decenas de miles de formas. En documentos pesados, el desplazamiento y el zoom se delegan al compositor de la GPU y los vectores se vuelven a renderizar nítidos cuando te detienes. El trabajo costoso, como las operaciones booleanas, el desplazamiento de trazados y la optimización SVG, se ejecuta en un Web Worker, para que la interfaz siga respondiendo.

Herramientas de precisión para el trabajo vectorial

Usa la herramienta pluma para hacer clic en las esquinas y arrastrar curvas suaves. Mantén Shift para conservar ángulos de 45° y Alt para romper un manejador. Con la herramienta de nodos puedes arrastrar un segmento para curvarlo, hacer doble clic para añadir un nodo o seleccionar varios nodos y alinearlos. Las guías inteligentes muestran cuándo un objeto se alinea con los bordes o los centros de sus vecinos y cuándo el espaciado entre objetos es igual. También puedes arrastrar guías desde las reglas. Para valores exactos, escribe X, Y, ancho, alto y rotación en el panel Diseño. Los campos aceptan operaciones aritméticas como 120+16 o 200/3.

Exportaciones limpias y ligeras

Los editores suelen dejar metadatos, definiciones sin usar, grupos redundantes y números con demasiada precisión en los archivos que guardan. El cuadro de exportación ejecuta en segundo plano un optimizador al estilo de SVGO. Redondea los números a la precisión que elijas, convierte los datos de los trazados a su forma más corta, elimina los metadatos del editor y las definiciones sin usar, acorta ids y colores y elimina los grupos inútiles. Cada optimización se puede desactivar, y el cuadro muestra el tamaño del archivo antes y después. Para salida rasterizada, elige PNG, JPEG o WebP a 1×, 2×, 4× o a un tamaño exacto en píxeles, con o sin fondo transparente.

Hecho para producción web

Los SVG que se publican en sitios web y apps necesitan cosas distintas que las ilustraciones para imprimir. La lista Colores del documento muestra todos los colores que usa el archivo: cambia uno y todo lo que lo comparte lo sigue, o conviértelo a currentColor para que un icono de React o Tailwind tome su color del CSS. Los archivos importados suelen traer grupos anidados y transformaciones que dificultan la edición de los trazados: Aplanar transformaciones y desagrupar las integra en las coordenadas en un solo paso, y Ajustar al contenido recorta el viewBox a la ilustración, trazos incluidos. Texto a contornos y Contornear trazo convierten la tipografía y los grosores de línea en trazados simples que se ven igual en todas partes, y Simplificar elimina los cientos de puntos de una forma calcada o dibujada a mano alzada.

Tus archivos se quedan en tu dispositivo

No hay ningún servidor detrás del editor. Abrir un archivo lo lee desde tu disco a la página, y exportar genera el archivo en tu dispositivo. El autoguardado escribe en el almacenamiento IndexedDB privado de tu navegador, que también guarda tu lista de archivos recientes. Si cierras la pestaña por accidente, tu último documento se restaurará la próxima vez que vuelvas.

Explora más herramientas de imagen

Preguntas frecuentes

¿Este editor SVG es de verdad gratuito y privado?
Sí. Es gratuito, no necesita cuenta y funciona al 100 % en tu navegador. Tus dibujos nunca se suben: los archivos se leen localmente, el autoguardado va al propio almacenamiento de tu navegador (IndexedDB) y las exportaciones se generan en tu dispositivo.
¿Puede abrir archivos SVG de Illustrator, Inkscape, Figma o bibliotecas de iconos?
Sí. El editor trabaja directamente sobre el documento SVG, así que los archivos reales conservan su estructura, ids, estilos, degradados, símbolos, trazados de recorte y máscaras. Los archivos desordenados o no válidos se reparan al abrirlos, los scripts se desactivan mientras editas y los archivos .svgz se descomprimen automáticamente.
¿Tiene herramienta pluma y operaciones booleanas como Illustrator?
Sí. La herramienta pluma dibuja trazados Bézier con nodos de esquina, suaves y simétricos, y la herramienta de nodos te permite añadir, eliminar, convertir, unir, dividir y alinear nodos. Unión, resta, intersección, exclusión y división funcionan con curvas y las conservan como curvas, y también puedes contornear trazos, desplazar y simplificar trazados.
¿Puedo animar un SVG?
Sí. Abre el espacio de trabajo Animar, mueve el cabezal de reproducción y cambia la posición, la rotación, la escala, la opacidad o los colores de un objeto: cada cambio se convierte en un fotograma clave con una curva de aceleración, y las propiedades ya animadas reciben automáticamente un nuevo fotograma clave. Las animaciones se guardan como SVG estándar (SMIL), así que se reproducen en cualquier navegador sin ningún script.
¿Puedo editar el código SVG directamente?
Sí. El panel Código muestra el código fuente SVG en directo con resaltado de sintaxis. Al editar el código se actualiza el dibujo, y al editar el dibujo se actualiza el código. Cualquier cambio, desde cualquiera de los dos lados, se puede deshacer.
¿Qué formatos de exportación se admiten?
Un SVG optimizado, generado por un optimizador integrado al estilo de SVGO con indicador de tamaño antes y después, y PNG, JPEG y WebP a 1×, 2×, 4× o a un tamaño personalizado, con transparencia opcional. También puedes copiar la selección como código SVG, como URI de datos o como JSX para React.
¿Perderé mi trabajo si se cierra el navegador?
No. Tu documento se guarda automáticamente en el almacenamiento local del navegador un instante después de cada cambio. La próxima vez que abras el editor, se restaurará tu última sesión, y los documentos anteriores siguen disponibles en Archivo → Archivos recientes.
¿Puedo hacer que un icono use currentColor para React o Tailwind?
Sí. La sección Colores del documento enumera todos los colores del dibujo (cada forma de escribir un color cuenta una vez). Haz clic en una muestra para seleccionar todo lo que la usa y cambiarla en todas partes a la vez, o elige Convertir a currentColor: el icono tomará entonces su color del CSS, como una clase text-… de Tailwind, mientras conserva su aspecto en el editor. Cópialo como componente de React o como SVG para Tailwind desde el menú Editar o el menú contextual.
¿Cómo convierto texto en trazados o un trazo en una forma rellena?
Selecciona el texto y elige Texto a contornos (Ctrl/⌘+Shift+O): cada glifo se convierte en un trazado exactamente donde lo dibujó el navegador, incluido el texto en un trazado y los fragmentos con estilo. Para los trazos, Contornear trazo convierte el trazo en una forma rellena que coincide con su grosor, remates, uniones y discontinuidades, para que un logotipo mantenga su peso a cualquier tamaño.
¿Puede limpiar los SVG importados con transformaciones y grupos anidados?
Sí. Aplanar transformaciones y desagrupar escribe cada transformación en las coordenadas de los trazados y disuelve los grupos en un solo paso de deshacer, conservando solo lo que de otro modo cambiaría el aspecto (grupos recortados, enmascarados o referenciados). Ajustar al contenido recorta el lienzo (viewBox, ancho y alto) a la ilustración, trazos incluidos, con margen opcional, y Simplificar reduce el número de puntos de los trazados con ruido.
¿Puedo trabajar en varios dibujos a la vez?
Sí. Cada dibujo se abre en su propia pestaña sobre el lienzo, con su propio historial de deshacer, selección y zoom. Cambia entre ellas libremente; al cerrar una pestaña, el archivo se conserva en Archivo → Archivos recientes, y tus pestañas abiertas vuelven la próxima vez que entres.
¿Dónde están todos los comandos? Los menús son cortos.
Los comandos relacionados están en submenús (Organizar, Transformar, Trazado, Recorte y máscara, Copiar como, Alinear y distribuir…). Pasa el ratón por encima o tócalos, o usa las teclas de flecha. Todos los comandos tienen además un atajo: pulsa ? para ver la lista completa. En un ordenador puedes plegar el panel lateral con Ctrl/⌘+B para dar más espacio al lienzo.
¿Funciona en móviles y tabletas?
Sí. En pantallas pequeñas, las herramientas pasan a una barra inferior y los paneles se abren como hojas. Pellizca para hacer zoom, arrastra con dos dedos para mover la vista y mantén pulsado para abrir el menú contextual.
¿Qué tamaño pueden tener mis dibujos?
El editor está hecho para archivos pesados. Usa un índice espacial para la detección de clics y la selección, una capa superpuesta aparte para manejadores y guías, desplazamiento y zoom solo en el compositor en documentos grandes, y Web Workers para la geometría y la optimización. Los documentos con decenas de miles de elementos siguen respondiendo con fluidez.
Todas las herramientas de imagen →
Compresor de imágenes Reduce el tamaño de las imágenes conservando la calidad visual. Convertidor de imágenes Convierte imágenes entre PNG, JPEG, WebP, GIF, BMP, ICO, TIFF y más. Redimensionador de imágenes Redimensiona imágenes a dimensiones exactas: perfecto para fotos de pasaporte. Imagen a PDF Combina una o varias imágenes en un único documento PDF.