Editor de Código SVG con Vista Previa Gratis - Edita y Ve el Resultado al Instante

Escribe o pega código SVG y míralo al instante.

Edita Código SVG y Míralo al Instante

El SVG es el formato de imagen de la web: pequeño, nítido a cualquier tamaño y escrito en código de texto plano. Editar ese código a mano suele significar cambiar entre un editor de texto y un navegador para comprobar cada cambio. Esta herramienta reúne ambos en un solo lugar. Escribes o pegas código SVG y la vista previa se actualiza con cada tecla.

Es gratis y funciona por completo en tu navegador. Tu código no se sube a ningún sitio. El archivo editado se descarga como un SVG limpio, listo para una web, un documento o una herramienta de diseño.

Cómo se Usa el Editor

Pega tu código SVG en el editor o pulsa el botón de ejemplo para cargar un ejemplo que funciona. La vista previa de abajo muestra el resultado de inmediato. Cambia un color, un tamaño o una posición y la vista previa te sigue. No hay botón de guardar que pulsar ni página que recargar.

Cuando el código está como quieres, pulsa descargar. Recibes un SVG estándar, listo para subir a tu web o abrir en un editor. La herramienta elimina scripts y controladores de eventos antes de mostrar la vista previa y antes de descargar, así el archivo es seguro para publicar.

Por Qué Ayuda Tanto la Vista Previa en Vivo

Aprender SVG es mucho más fácil con respuesta inmediata. Cambia el radio de un círculo y míralo crecer. Mueve un rectángulo y ve dónde cae. Ajusta un color y ve el resultado sin adivinar códigos. Los principiantes aprenden las formas, círculos, rectángulos, trazados y texto, jugando en lugar de leyendo.

Los usuarios con experiencia también ganan. Limpiar un SVG exportado, quitar basura de una herramienta de diseño o retocar un icono para una web es más rápido cuando cada cambio se ve al momento. Pequeños arreglos que llevarían una docena de ciclos de guardar y recargar tardan segundos aquí.

Lo Básico del SVG

Un archivo SVG es un documento de texto que describe formas. Un círculo lleva un centro y un radio. Un rectángulo lleva una posición, una anchura y una altura. Un trazado lleva una cadena de órdenes de dibujo. El relleno marca el color interior, el trazo marca el contorno y el viewBox marca el sistema de coordenadas donde viven las formas.

Como el SVG es texto, escala sin perder calidad. El mismo archivo se ve nítido en la pantalla de un móvil y en una valla publicitaria, y suele pesar mucho menos que una foto de la misma imagen. Por eso los logotipos y los iconos suelen ser SVG.

Notas de Seguridad

Los archivos SVG pueden contener scripts, y por eso nunca debes publicar un SVG sin revisarlo. Esta herramienta quita los elementos de script, los atributos de eventos y los enlaces javascript de la vista previa y de la descarga. El resultado es una imagen, no un programa, que es lo que quieres para una web pública.

Sin cuentas ni instalaciones. Pegas código, lo ves dibujado y descargas el resultado. Tu código nunca sale de tu navegador.

Arreglar Errores Habituales de SVG

La mayoría de problemas que encuentran los principiantes con SVG son pequeños y fáciles de arreglar cuando se ven. El más común es una etiqueta sin cerrar, que hace desaparecer toda la vista previa. El editor no muestra nada, lo que parece alarmante, pero la solución suele ser un solo paréntesis angular que falta cerca del final del archivo. Otro error habitual es una forma dibujada fuera del viewBox, así que existe en el código pero nunca aparece en pantalla. Comprueba que las coordenadas de tus formas caigan dentro del rango del viewBox. Un tercero es un color de relleno escrito sin el signo de almohadilla, que los navegadores ignoran y dejan la forma negra o invisible. La vista previa en vivo hace evidentes los tres errores en segundos, porque la imagen aparece, desaparece o cambia de color mientras escribes. Ese ciclo instantáneo es todo el sentido de la herramienta. En lugar de adivinar, ves. Los usuarios con experiencia también usan la vista previa para adelgazar archivos exportados: pegan el archivo, borran los metadatos y los grupos vacíos, y ven cómo la imagen queda idéntica mientras el código se reduce.

Editor de Código SVG con Vista Previa Gratis – Edita y Ve el Resultado al Instante