Visor SVG online y editor de código

Cómo usar el visor SVG

1. Abre un archivo o pega código. Usa Abrir archivo, suelta un SVG sobre la vista previa o pega el código en el editor.
2. Revisa la vista previa. Cambia entre fondo transparente, claro y oscuro para ver los bordes y las formas blancas.
3. Edita el código. La vista previa se actualiza mientras escribes. Formatear código ordena la sangría.
4. Copia o descarga. Guarda el SVG editado o copia el código.

Ver un SVG sobre cualquier fondo

Muchos iconos SVG son blancos o tienen zonas transparentes, y desaparecen sobre una página blanca. El selector de fondo muestra la imagen sobre cuadros, sobre blanco y sobre una superficie oscura, y así detectas un logo blanco, un relleno que falta o un borde que se sale.

Debajo de la vista previa ves el width y el height declarados, el viewBox, el número de elementos y el peso del archivo. Estos valores explican casi todos los problemas de tamaño: un SVG sin ancho ni alto toma el tamaño de su contenedor, y un viewBox mal puesto recorta o encoge el dibujo.

Visor SVG online con editor de código

El editor resalta el XML, pliega los grupos largos y muestra los números de línea. Cuando el código tiene un fallo, como una etiqueta sin cerrar, el visor muestra el error del analizador en lugar de una imagen en blanco, así sabes qué línea corregir.

La vista previa se renderiza como imagen. Los scripts que haya dentro de un SVG no se ejecutan, así que puedes abrir con seguridad archivos que te han enviado otras personas.

Editar SVG online para arreglos rápidos

Los cambios típicos llevan unos segundos: cambiar un color de fill, quitar un width y un height fijos para que el icono sea adaptable, borrar una capa oculta o añadir un <title> por accesibilidad. Para una limpieza a fondo, pasa el archivo por el optimizador SVG.

Preguntas sobre el visor SVG