Visor y Renderizador SVG
Pega el código SVG y previsualiza la imagen renderizada.
Descripción general
Los archivos SVG son documentos XML, lo que los hace fáciles de editar a mano pero
incómodos de inspeccionar: no puedes ver el resultado sin representarlo. Esta
herramienta representa al instante el marcado SVG que pegues sobre un fondo de
cuadros, para que las zonas transparentes queden visibles. Antes de representarlo,
el marcado pasa por DOMPurify con los perfiles svg y svgFilters, que eliminan
los elementos <script> y los atributos manejadores de eventos on*. Todo se
ejecuta en tu navegador.
Cómo se usa
- Pega o escribe tu marcado en el campo SVG source. Por defecto se carga un círculo de ejemplo.
- Observa cómo el panel Preview (sanitized) se actualiza a medida que escribes: no hay ningún botón que pulsar.
- Modifica atributos como
fill,widthoviewBoxy comprueba el efecto de inmediato.
Ejemplos
- Ajustar el color de un icono: cambia
fill="#0060c0"porfill="#e0403f"y confirma el resultado antes de dejarlo fijo. - Depurar un trazado: pega un
<path d="…">exportado de una herramienta de diseño para comprobar si la geometría es la que esperas. - Verificar una duda de saneamiento: pega un SVG que contenga
<script>y confirma que se representa sin el script.
Notas
Como el saneamiento elimina los scripts, las animaciones basadas en SMIL o CSS pueden representarse, pero los comportamientos interactivos no. Las referencias externas (imágenes remotas, tipografías) también pueden quedar bloqueadas por el saneador o por tu navegador.