Skip to main content

Visor y editor SVG

Visualiza, valida y previsualiza archivos SVG con esta herramienta gratuita. Escribe o sube tu código SVG y verás el resultado al instante.

Código SVG

Vista previa SVG

Aquí se mostrará la vista previa de tu SVG

Sobre el visor SVG

Esta herramienta te permite visualizar, validar y previsualizar archivos SVG con una vista en vivo. Solo tienes que pegar tu código en el editor o subir un archivo para verlo al instante.

Vista previa en vivo

Ve tu SVG en tiempo real mientras escribes o editas el código, para comprobar los cambios al momento.

Modo oscuro/claro

Cambia entre fondo oscuro y claro para ver cómo se ve tu SVG en distintos contextos y comprobar el contraste.

Controles de zoom

Acerca o aleja para revisar detalles o ver la imagen completa. Escala del 10 % al 300 % con los controles o los atajos (Ctrl++, Ctrl+-, Ctrl+0).

Subir archivos SVG

Carga archivos SVG desde tu dispositivo para previsualizarlos y validarlos. Acepta cualquier archivo SVG válido.

Validación

Comprueba automáticamente tu código SVG y te indica si hay errores, para que puedas localizarlos y corregirlos.

Exportar como PNG

Convierte tu SVG a PNG con un clic. Ideal para compartir donde no se admita SVG o cuando necesites una imagen rasterizada.

¿Por qué usar archivos SVG?

  • Los SVG mantienen la calidad a cualquier tamaño, ideales para diseños responsive.
  • Los SVG suelen ocupar menos que imágenes raster equivalentes.
  • Los SVG pueden incluir texto y atributos ARIA para mejorar la accesibilidad en la web.
  • Los elementos SVG se pueden animar con CSS o JavaScript para crear experiencias interactivas.

Trabajar con SVG grandes

El visor escala automáticamente los SVG para que quepan en la zona de vista previa sin deformar la proporción. Aunque tu SVG tenga dimensiones grandes (por ejemplo 800×800 o más), se mostrará bien reducido.

  • Incluye siempre el atributo viewBox para definir el sistema de coordenadas.
  • Usa unidades relativas cuando puedas en lugar de píxeles para que escale mejor.
  • Usa width="100%" y height="auto" para un comportamiento responsive.
  • Prueba tu SVG a distintos tamaños para asegurarte de que escala bien en cualquier dispositivo.

Recursos adicionales

Este visor SVG gratuito forma parte de nuestra colección de utilidades para desarrolladores y diseñadores.