Editor de código SVG con vista previa

Funciones

• Código a la izquierda, dibujo en vivo a la derecha, actualizado con cada tecla
• El fondo alterna entre cuadros, claro y oscuro: los cuadros revelan la transparencia
• Añade un `xmlns` que falte en la vista previa y te recuerda ponérselo a tu archivo
• La descarga contiene la versión con el xmlns completado (sin él, el archivo no se muestra en ningún otro sitio)
• Revisa: falta de xmlns, falta de viewBox, referencias externas, atributos script / on* y cierre ausente
• Muestra las dimensiones del viewBox, el ancho y alto, y el número de bytes
• Tu código nunca entra en el DOM de la página y sus scripts nunca se ejecutan
• Todo ocurre en tu navegador; no se sube nada

Cómo se usa

1. Pega SVG a la izquierda (o pulsa Muestra)
2. El lado derecho se dibuja al instante y sigue cada edición
3. Repasa el panel de comprobaciones: son los fallos que no dan error
4. Cópialo o descarga el .svg (con el xmlns completado)

Preguntas frecuentes

¿Por qué la vista previa es una imagen y no el propio SVG?

Por seguridad. Incrustar el SVG de otra persona (`innerHTML`) mete código arbitrario en el origen de este sitio: `<svg onload="…">` y `<script>` se ejecutarían los dos, y ese código viene de fuera. Dibujado como `<img src>`, el SVG es un documento aparte: los scripts no se ejecutan ni se cargan los recursos externos, que es el comportamiento especificado, así que no puede acceder a nada de este sitio. El precio es perder acceso al DOM del SVG, que esta herramienta no necesita.

¿Por qué mi SVG pegado no muestra nada?

Lo más habitual es que falte el `xmlns`: un `<svg>` sin `xmlns="http://www.w3.org/2000/svg"` funciona incrustado en HTML (el espacio de nombres del documento padre se hace cargo), pero no dibuja nada como archivo o imagen independiente, y en la consola solo aparece un fallo de carga pelado. La vista previa lo añade por ti y el panel de comprobaciones te recuerda que lo pongas en tu archivo. Otras causas: etiquetas sin cerrar o referencias a imágenes y fuentes externas, que una imagen no puede cargar.

¿Por qué no avisa cuando mi código está mal?

Porque los navegadores son muy tolerantes con el SVG: etiquetas sin cerrar, atributos mal escritos y coordenadas equivocadas normalmente se dibujan igual (solo falta una pieza o está en otro sitio) y no dan error. Esta herramienta solo informa de los casos en que no se dibuja nada: un fallo de carga del `<img>`. Así que la forma fiable de juzgar si el código es correcto sigue siendo mirar la vista previa, mientras que el panel de comprobaciones lista lo que no da error pero con seguridad falla (falta de xmlns, falta de viewBox, referencias externas).

¿viewBox o width / height? ¿Cuál necesito?

Los dos, y `viewBox` importa más. El `viewBox` define el sistema de coordenadas (cómo se corresponde el dibujo con un tamaño); el `width` / `height` son solo el tamaño mostrado por defecto. Con ancho y alto pero sin viewBox, el SVG no puede escalar: ampliarlo solo lo emborrona, exactamente como un mapa de bits. Solo con viewBox es la forma responsiva: ocupa su contenedor y el CSS decide el tamaño (que es como están escritos todos los iconos de este sitio, así que las comprobaciones los dejan en paz).