Sobre el visor SVG
Pega código SVG y míralo renderizado al momento. Como el SVG es XML y no un formato binario, un icono roto suele ser un problema del código: un viewBox que falta, un fill incorrecto, un trazado recortado. Verlo aquí junto al código fuente, con un fondo intercambiable que deja ver la transparencia, saca esos problemas a la luz.
Cómo usar el visor SVG
-
Pega tu código SVG
Pega el código completo en el panel «Código SVG», incluida la etiqueta <svg> de apertura. La vista previa aparece en cuanto el código se puede interpretar.
-
Revisa el resultado
En «Fondo», cambia entre blanco, negro, transparente y cuadrícula para ver cómo se comporta el gráfico sobre distintas superficies y si los rellenos están realmente definidos.
-
Descarga el archivo
Cuando se vea bien, guarda el SVG en tu dispositivo con el botón «SVG».
Casos de uso
Revisar un icono antes de usarlo
Comprueba que un SVG copiado de una herramienta de diseño o de un set de iconos se ve como esperas.
Depurar un gráfico roto
Descubre por qué un SVG sale en blanco: casi siempre es un viewBox que falta, unas dimensiones a cero o un relleno del mismo color que el fondo.
Probar sobre distintos fondos
Asegúrate de que un icono con relleno blanco no desaparece sobre una superficie clara antes de publicarlo.
Preguntas frecuentes
¿Por qué mi SVG aparece en blanco?
Las causas habituales son un viewBox ausente o incorrecto, un ancho y un alto a cero, un color de relleno idéntico al fondo o contenido situado fuera del área visible.
¿Mi SVG se sube a algún sitio?
No. Tu navegador renderiza el código y nada se envía a ningún servidor. Tampoco se guarda: al recargar la página vuelve el ejemplo inicial, así que descarga o copia tu SVG antes de cerrar la pestaña.
¿Puedo editar el código SVG aquí?
Sí: edita el código y la vista previa se actualiza. Es un visor y editor de código, no una aplicación de dibujo vectorial, así que no tiene herramientas para manipular formas.
¿Se ejecutan los scripts que contiene el SVG?
Un SVG puede contener elementos script, y por eso un SVG que no es de confianza supone un riesgo de seguridad cuando se inserta en una página. Trata cualquier SVG de origen desconocido con la misma precaución que aplicarías a un HTML.
Herramientas relacionadas
Explora todas las herramientas online gratis de Tooly: todas funcionan en tu navegador y ninguna necesita cuenta.