Editor SVG
Abre o pega cualquier SVG y edítalo directamente en tu navegador. Haz clic en una forma para seleccionarla, arrástrala para moverla y cambia su relleno, trazo, opacidad, texto y posición. Añade rectángulos, elipses, líneas, estrellas, trazados a mano alzada y texto, y mira cómo se actualiza el código sobre la marcha.
Última actualización:
Cómo usar Editor SVG
- Abre tu SVG con Abrir SVG, suelta el archivo en el lienzo o pega código SVG. Se carga un dibujo de ejemplo para que pruebes.
- Selecciona una forma haciendo clic en ella en el lienzo o en la lista Elementos y luego arrástrala o desplázala con las flechas (Mayús mueve 10 pasos).
- Edita sus propiedades en el panel: colores de relleno y trazo, grosor del trazo, opacidad, texto y coordenadas exactas.
- Añade formas nuevas con las herramientas Rect., Elipse, Línea, Estrella, Dibujar y Texto. Define el relleno, el trazo y el grosor de las formas nuevas a la derecha de la barra de herramientas.
- Ajusta el código en el cuadro de código SVG si quieres; los cambios válidos se aplican automáticamente.
- Guarda con Descargar SVG, Copiar código o Descargar PNG.
Atajos de teclado
| Tecla | Acción |
|---|---|
| V, R, E, L, S, P, T | Herramienta Seleccionar, Rectángulo, Elipse, Línea, Estrella, Dibujar, Texto (cuando el lienzo tiene el foco) |
| Flechas | Desplaza el elemento seleccionado un píxel de pantalla; con Mayús, diez |
| Supr / Retroceso | Elimina el elemento seleccionado |
| Ctrl/Cmd + D | Duplica el elemento seleccionado |
| ] y [ | Traer adelante / enviar atrás dentro de su grupo |
| Ctrl/Cmd + Z, Ctrl/Cmd + Y | Deshacer, rehacer (Ctrl/Cmd + Mayús + Z también rehace) |
| Mayús al dibujar | Cuadrado, círculo o línea a 45° |
| Esc | Quita la selección y vuelve a la herramienta Seleccionar |
Formas SVG y sus atributos clave
| Elemento | Posición y tamaño | Notas |
|---|---|---|
<rect> | x, y, width, height | rx y ry redondean las esquinas |
<circle> | cx, cy, r | Punto central y radio |
<ellipse> | cx, cy, rx, ry | Radios horizontal y vertical por separado |
<line> | x1, y1, x2, y2 | Necesita un trazo para verse; el relleno no tiene efecto |
<polygon> | points | Una forma cerrada que pasa por una lista de pares x,y; polyline es la versión abierta |
<path> | d | Comandos como M (mover), L (línea), C (curva), A (arco) y Z (cerrar) |
<text> | x, y | y es la línea base; text-anchor define la alineación start, middle o end |
<g> | transform | Agrupa elementos; el relleno y el trazo definidos en un grupo los heredan sus hijos |
Cómo funciona el viewBox
El atributo viewBox (min-x min-y width height) define el sistema de coordenadas que usan todas las formas, mientras que width y height fijan el tamaño con que se muestra la imagen. Un dibujo con viewBox="0 0 400 300" puede mostrarse a 400 × 300 o a 1600 × 1200 píxeles y sigue perfectamente nítido. Si un archivo abierto no tiene viewBox, el editor añade uno basado en su ancho y alto para poder escalarlo en pantalla. Para recortar o añadir margen, cambia los valores del viewBox en el panel Documento (se muestra cuando no hay nada seleccionado).
Preguntas frecuentes
¿Cómo cambio el color de un SVG?
Abre el SVG, haz clic en la forma que quieras recolorear y elige un nuevo color de Relleno (el interior) o de Trazo (el contorno) en el panel. Si todo el icono es un solo grupo, selecciona el grupo en la lista Elementos y define su relleno, o haz clic en cada forma. También puedes escribir valores como #ff0000, red, none o currentColor.
¿Se sube mi SVG a algún sitio?
No. El archivo se lee y se edita por completo en tu navegador. No se envía nada a ningún servidor, y el dibujo actual solo se guarda en el almacenamiento local de tu navegador para que no se pierda al recargar la página.
¿Por qué al arrastrar se añade un atributo transform?
Los rectángulos, círculos, elipses, líneas, textos e imágenes se mueven cambiando sus coordenadas x/y o de centro. Los trazados, polígonos, grupos y todo lo que ya tenga un transform se mueven añadiendo o actualizando translate(x y) en el atributo transform, lo que mantiene sin cambios los datos originales del trazado.
¿Puedo editar el código SVG directamente?
Sí. El cuadro de código muestra el marcado SVG completo y se actualiza cada vez que editas visualmente. Escribe en él y el dibujo se actualizará tras una breve pausa si el código es XML válido. Si hay un error, un mensaje lo explica y el dibujo se queda como estaba hasta que lo corrijas.
¿Por qué no puedo hacer clic en una forma?
Puede que otras formas la tapen o que no tenga relleno, o que el relleno sea none y solo se pueda hacer clic en el contorno. Usa la lista Elementos para seleccionar cualquier elemento directamente, o Enviar atrás en la forma que estorba.
¿Conserva degradados, filtros y estilos CSS?
Sí. Las definiciones como degradados, trazados de recorte, máscaras, filtros y hojas de estilo incrustadas se conservan y se muestran. Los valores de style en línea prevalecen sobre los atributos, así que cuando cambias un color el editor elimina esa propiedad del style en línea y la escribe como atributo.
¿Sustituye a Inkscape o Illustrator?
Está pensado para ediciones rápidas: recolorear iconos y logotipos, corregir textos, mover y añadir formas sencillas y limpiar código. Para trabajos de ilustración complejos, como operaciones booleanas con trazados o edición nodo a nodo, usa un editor vectorial de escritorio, o nuestro SVG Path Editor para los datos de trazados.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.