Editor SVG
Formas y código, uno junto al otro
Pega código SVG o empieza con una forma. Este editor SVG te deja moverla y cambiar su estilo en un lienzo en vivo, y luego copiar o descargar el código limpio. Sin cuenta, sin subidas y nada en un servidor.
- GratisPrecio
- CincoFormas
- SVG limpioResultado
- NingunaSubidas
Editor SVG
Pega o dibuja formas, muévelas y cambia su tamaño, y guarda un código limpio
Nada seleccionado. Haz clic en una forma del lienzo o de la lista de capas.
Listo. Hay un dibujo de ejemplo cargado. Pega tu propio código SVG abajo y pulsa Cargar el código.
Qué hace un editor SVG
Este editor SVG te deja trabajar con gráficos vectoriales en tu navegador. Pegas código SVG o empiezas con una forma sencilla. Después mueves, redimensionas y cambias el estilo de las partes en un lienzo en vivo. Como todo ocurre en tu dispositivo, el código nunca sale de la página. Además, no se guarda copia en ningún otro sitio.
Editar el dibujo lleva pocos pasos. Primero, pega tu código SVG o añade una forma, como un rectángulo, un círculo, una línea o un texto. Después, haz clic en una parte para seleccionarla y arrástrala, o tira del punto de su esquina para cambiar su tamaño. Además, puedes fijar el relleno y el borde, escribir números exactos y reordenar las capas para que la parte correcta quede encima.
No necesitas cuenta y no hay paso de subida, así que el dibujo está listo enseguida. Todo se actualiza mientras editas, es decir, ves el resultado final antes de guardar. Cuando quede bien, copia el código o descárgalo como archivo SVG. Luego llévalo a una página, un set de iconos o un archivo de diseño.
Este editor SVG sirve a quien trabaja con gráficos vectoriales. Por ejemplo, los desarrolladores limpian un icono, los diseñadores ajustan el color de un logo y los redactores retocan un diagrama sin un programa pesado. Como el resultado es texto SVG, se ve nítido a cualquier tamaño. Además, sigue siendo legible cuando lo pegas en un proyecto.
Un dibujo, formas y código
La imagen de abajo muestra el lienzo a la izquierda. A la derecha está el código SVG limpio que el editor guarda para él.
Haz clic en una forma del lienzo y un recuadro discontinuo la marca. Mueve o cambia esa forma, y el código correspondiente se actualiza al instante. Así los dos siempre coinciden.
Selecciona, arrastra y ajusta
Haz clic en una forma del lienzo o de la lista de capas. Un recuadro discontinuo la marca, y el punto de su esquina redimensiona un rectángulo, círculo, elipse, línea, texto o imagen. Los trazados y grupos se mueven arrastrando, y su tamaño se cambia en su código.
El panel lateral fija el relleno, el borde y la opacidad. Debajo, cada atributo de la forma tiene su propio campo, así que puedes escribir un número exacto. Además, las flechas del teclado mueven la forma seleccionada, y Deshacer vuelve por tus cambios recientes.
Guía en vídeo: Editor SVG
Un vídeo corto recorre cada paso. Luego elige tu idioma abajo y activa los subtítulos si quieres.
Cómo editar un SVG
Seis pasos, y el código nunca sale de la pestaña.
- 1
Pega tu código o añade una forma
Pega código SVG y pulsa Cargar el código. O empieza con un rectángulo, círculo, elipse, línea o texto si partes de cero.
- 2
Selecciona una parte en el lienzo
Haz clic en una forma para elegirla. Aparecen un recuadro discontinuo y un punto en la esquina, así siempre sabes qué parte está activa.
- 3
Muévela y cambia su tamaño
Arrastra la forma a otro sitio o tira del punto de la esquina para cambiar su tamaño. Mantén Mayús para conservar las proporciones de un rectángulo, una elipse o una imagen.
- 4
Cambia el relleno y el borde
Elige un color de relleno, añade un borde, cambia su grosor y ajusta la opacidad. El lienzo se redibuja con cada valor.
- 5
Reordena las capas
Usa Traer adelante y Enviar atrás para subir o bajar una forma en la pila de capas. Así el dibujo se lee como quieres.
- 6
Copia o descarga el resultado
Copia el código limpio al portapapeles o guárdalo como archivo SVG. Nada se envía a un servidor, así el código sigue siendo privado.
Por qué editar SVG en el navegador
Tres razones por las que un editor en el navegador gana a un programa de diseño pesado para esta tarea.
Ve la forma y el código a la vez
SVG es dibujo vectorial escrito como texto, así que es fácil de editar a mano pero difícil de imaginar. Como los números describen las formas, un pequeño cambio en un valor mueve toda una forma. En la práctica, este editor muestra el dibujo y los números juntos. Así cambias un valor y ves el resultado al momento.
Tu código sigue siendo privado
Este editor SVG se salta el paso de subida habitual. Muchas herramientas vectoriales envían tu archivo a un servidor y te dan un enlace. Aquí, en cambio, el dibujo se hace en tu propio dispositivo. Por eso un icono privado o un logo sin publicar sigue siendo privado, y puedes editar un borrador de cliente sin riesgo.
El resultado es SVG limpio y nítido
El resultado importa tanto como la edición. Como el resultado es texto SVG, entra en una página web o un programa de diseño sin plugins. Así obtienes un archivo nítido a cualquier tamaño, que carga rápido y se lee bien cuando un desarrollador lo abre.
Cómo funciona el editor
Tres cosas deciden el resultado. Conviene conocer cada una antes de guardar.
- Cada clic lleva a una forma El editor lee tu código SVG, lo dibuja y relaciona cada clic con la forma bajo el cursor. Como el dibujo son formas con coordenadas, mover una parte cambia solo sus números. El resto queda intacto. Además, el panel muestra los atributos de la forma seleccionada, así que puedes escribir un valor exacto cuando arrastrar no basta.
- El orden de las capas decide qué se ve El orden de las capas decide qué queda encima. SVG pinta las formas en el orden en que aparecen, así que una forma posterior tapa a las anteriores. Por tanto, subir o bajar una parte cambia lo que se ve primero. Un pequeño cambio de orden puede arreglar un borde oculto o un texto tapado.
- La descarga sale limpia y portátil La descarga mantiene el código limpio. El editor escribe código ordenado mientras trabajas, así que la copia es SVG legible y no una línea larga. Además, el archivo contiene solo las formas que dibujaste, así que se abre en cualquier navegador sin nada más.
Errores comunes al editar SVG
Cada uno deja el dibujo bien a la vista pero mal por dentro, y eso cuesta de ver.
Perder el viewBox
Sin viewBox, el dibujo se recorta o se escala raro en una página. Así que conserva el viewBox y cambia el ancho y el alto solo cuando necesites un tamaño fijo.
Estirar un solo eje
Una forma estirada por un lado parece rota. Como un vector se estira sin límite, mantén Mayús al redimensionar para que la forma conserve sus proporciones.
Dejar relleno en un contorno
Una forma pensada como contorno inunda una zona entera si tiene relleno. Así que marca Sin relleno cuando una forma deba ser solo contorno.
Editar una copia y perder el original
El editor trabaja sobre el código que pegas, así que el archivo original está a salvo. Aun así, guarda una copia del original para comparar las dos versiones.
Olvidar el grosor del borde
Un borde finísimo desaparece en una pantalla de alta resolución. Como el vector se amplía, revisa el grosor del borde a gran tamaño antes de publicar el archivo.
Olvidar la etiqueta de accesibilidad
Una imagen decorativa no necesita título, pero una con significado sí. Así que añade un elemento title breve en el código, y un lector de pantalla podrá nombrar el gráfico.
Preguntas frecuentes sobre el editor SVG
¿El editor SVG sube mi archivo?
No. Todo el dibujo se queda en tu navegador. Así tu código nunca llega a un servidor, porque el editor no lo necesita para editar el dibujo.
¿Qué es SVG?
SVG significa Scalable Vector Graphics, un formato de texto que describe formas con números en vez de píxeles. Como es vectorial, se ve nítido a cualquier tamaño. Además se lee como código, así que es fácil de editar y pesa poco.
¿Tengo que subir un archivo SVG?
No. El editor usa código pegado, así que abre tu archivo, copia su texto SVG y pégalo. Después editas en el lienzo, y el archivo de tu disco sigue igual.
¿Qué formas puedo añadir?
El editor añade rectángulo, círculo, elipse, línea y texto. Cubren la mayoría de iconos y diagramas, así que puedes crear un gráfico sencillo sin un programa de diseño completo.
¿Puedo editar el trazado de una forma compleja?
Sí. El panel muestra los atributos tal cual, así que puedes editar un trazado a mano. En la práctica, usa el lienzo para mover rápido y el campo del atributo cuando un valor deba ser exacto.
¿Puedo cambiar el relleno y el borde?
Sí. El editor escribe los colores en el código, así que fijas relleno, color de borde y grosor de borde por forma. Además, puedes marcar Sin relleno, útil para un icono de contorno.
¿El editor mantiene limpio mi código?
Sí. Escribe atributos ordenados mientras editas, así que el código copiado se lee bien en vez de ser una línea larga. Sin embargo, no carga archivos ni scripts externos, así que la descarga contiene solo lo que dibujaste.
¿El editor SVG es gratis?
Sí, del todo. No hay cuenta, ni prueba, ni marca de agua. Además, el trabajo ocurre en tu navegador, así que no hay coste de servidor. Todo sigue siendo gratis.
¿Funciona sin conexión?
Sí. Una vez cargada la página, cada cambio ocurre en local. Por tanto, puedes cortar la conexión y el editor sigue funcionando, porque nunca contacta con un servidor.
¿Puedo descargar el resultado como archivo?
Sí. El resultado es texto SVG, así que puedes copiarlo al portapapeles o guardarlo como archivo. Un archivo guardado se abre en cualquier navegador y entra directo en un proyecto web.
¿Puedo convertir el SVG a PNG?
No en esta página. Esta herramienta edita código vectorial, y la salida en píxeles es tarea de un conversor. En su lugar, usa la página de SVG a PNG cuando necesites una imagen de tamaño fijo.
¿Puedo editar un logo?
Sí, si tienes el código SVG. Un logo está hecho de formas, así que puedes moverlas, cambiarles el color y editar sus números. Sin embargo, este editor no puede cambiar un logo que llega como imagen plana, porque no tiene datos de formas.
¿Puedo fijar el tamaño del lienzo?
Sí. Los campos bajo el lienzo guardan el ancho, el alto y el viewBox, así que puedes cambiarlos. En la práctica, conserva el viewBox y ajusta el tamaño solo cuando necesites uno fijo.
¿El editor guarda mi dibujo?
No. Ningún servidor ni almacenamiento local guarda nada, así que no queda copia. Al cerrar la pestaña, el dibujo desaparece. Por eso, copia o descarga el resultado antes de salir.
¿Puedo usar el editor en el móvil?
Sí. La página se adapta a pantallas pequeñas, así que puedes editar en un móvil o una tableta. Sin embargo, arrastrar con precisión es más fácil en un ordenador, así que el móvil va bien para un cambio rápido de color o tamaño.
¿Puedo deshacer un cambio?
Sí. El editor guarda un historial corto, así que Deshacer vuelve atrás cuando un movimiento sale mal. El historial cubre solo los pasos recientes de esta sesión.
¿Es seguro pegar el SVG en una página?
Depende del archivo. Algunos SVG llevan scripts, eventos o enlaces externos, así que el editor quita esas partes y conserva el dibujo. Después te dice cuántas partes quitó.
¿Puedo reordenar las formas?
Sí. SVG pinta las formas en su orden, así que subir o bajar una parte en la lista de capas cambia qué tapa a qué. Pon el fondo primero y los textos al final, así todo queda visible.
¿El editor añade marca de agua?
No. La descarga es una copia limpia de tu dibujo en código SVG. El editor no añade nada ni marca alguna, porque solo escribe las formas, los colores y el texto que pones.
¿Puedo agrupar formas?
Un grupo de tu archivo sigue siendo un grupo. Aparece como una capa, así que lo seleccionas, lo mueves y le cambias el color como una sola pieza. Sin embargo, este editor no crea grupos nuevos, así que envuelve las formas en una etiqueta g en el código cuando lo necesites.
¿El editor me rastrea o lee mi código?
No. Tu código nunca se envía a ningún sitio y ningún script de analítica lo lee. Así, el dibujo se crea en tu dispositivo, porque nada de tu archivo sale de la página.
¿Puedo usar el resultado en una web?
Sí. El resultado es SVG puro, así que entra en una página como imagen o como código en línea. El SVG en línea te deja dar estilo y animar las partes con CSS, mientras que una etiqueta de imagen mantiene la página más corta.
Más herramientas para imágenes y vectores
Algunas páginas a las que suele llevar esta tarea.
Exporta el vector terminado como imagen de tamaño fijo.
Abrir herramienta →Convierte entre PNG, JPG, WebP y más.
Abrir herramienta →Inserta una imagen pequeña directamente en tu código.
Abrir herramienta →Generador de combinaciones de colores
Crea una paleta para rellenos y bordes.
Abrir herramienta →Convierte una imagen en arte de texto hecho con caracteres.
Abrir herramienta →
Edita tu primer SVG ahora
Abre el editor SVG, pega tu código o añade una forma, y muévela y cambia su estilo en el lienzo. Cuando quede bien, copia el código limpio o descarga el archivo. Nada sale de tu dispositivo.