Cómo crear un visor de SVG en HTML, CSS y JavaScript

En este artículo explicamos paso a paso cómo crear un visor de SVG en HTML, CSS y JavaScript, traducido y adaptado al español. El visor permitirá editar, validar, previsualizar en tiempo real y exportar gráficos SVG. Es perfecto para diseñadores y desarrolladores que necesitan una herramienta ligera para probar vectores antes de integrarlos en proyectos. Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, especialista en inteligencia artificial, ciberseguridad y servicios cloud, puede ayudarte a integrar este tipo de herramientas en soluciones a medida.

Características principales del visor SVG

• Editor de código SVG para escribir, pegar y editar código. • Mecanismo de validación que comprueba la validez del SVG. • Área de vista previa con renderizado en tiempo real. • Función de exportación para descargar el SVG como archivo.

Maquetado HTML básico para el visor

Un ejemplo sencillo de la estructura HTML, mostrado como texto para que puedas copiarlo y adaptarlo: <div class=main><header><h1>SVG Preview Tool</h1><p>Edit, preview, and export clean, scalable vector art</p></header><div class=container><div class=editor><div class=editor-header>SVG Code Editor</div><textarea id=svgInput placeholder=Paste your SVG code here and watch the magic happen></textarea></div><div class=preview><div class=preview-header>SVG Preview</div><div class=preview-content><div id=previewContainer class=preview-container></div></div></div></div><button id=exportBtn>Export SVG</button></div>

Estilos CSS esenciales

Usaremos Flexbox y media queries para conseguir que el editor y la vista previa estén lado a lado en pantallas grandes y se apilen en pantallas pequeñas. Ejemplo de reglas CSS representadas como texto: /* Reset y tipografía importada */ *{box-sizing:border-box;margin:0;padding:0} body{display:flex;min-height:100vh;justify-content:center;padding:20px;font-family:DM Mono,monospace} header{max-width:420px;text-align:center;margin-bottom:40px} .main{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:1000px;height:90vh;min-height:700px;margin-top:50px} .container{display:flex;height:calc(100% - 84px);gap:20px;width:100%} .editor,.preview{width:50%;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)} textarea{height:100%;border:none;padding:20px;font-size:13px;resize:none;background:#2e3138;color:white;overflow-y:auto} .preview-container{width:100%;height:100%;border-radius:16px;background-color:#f9fafb;overflow-y:auto} @media(max-width:768px){.container{flex-direction:column}.editor,.preview{width:100%;height:50%}}

Validación y renderizado con JavaScript

La idea es validar el código SVG antes de inyectarlo en el DOM usando DOMParser. A continuación se describe la lógica principal sin literales de cadena para facilitar su lectura e integración:

1 Obtener referencias: elementos textarea, contenedor de vista previa y botón export. 2 Función loadSVG(svgCode): limpiar previewContainer; si svgCode está vacío mostrar mensaje de error y salir; crear instancia de DOMParser; parsear svgCode con MIME image/svg+xml; comprobar error de parseo buscando parsererror; si hay error mostrar mensaje; extraer elemento svg y, si existe, inyectarlo dentro de un contenedor con clase svg-container y añadirlo a previewContainer; capturar excepciones y mostrar mensaje de error.

Eventos: añadir listeners al textarea para input y paste que llamen a loadSVG con el contenido actual.

Cargar SVG por defecto y exportar

Al abrir la herramienta se carga un SVG de ejemplo para que el usuario vea cómo funciona. Función loadDefaultSVG: establecer valor del textarea con el SVG de ejemplo y llamar a loadSVG. Ejemplo del SVG de muestra representado como texto: <svg xmlns=https://www.w3.org/2000/svg width=160 height=190 viewBox=0 0 60 60><defs><style>.cls-1{fill:#87e64b;}</style></defs><circle class=cls-1 cx=25.56 cy=61.15 r=2.86/><path class=cls-1 d=M42,41.65l-16.13,1.73c-.3.03-.45-.34-.21-.53l15.78-12.29c1.02-.84,1.68-2.14,1.4-3.54-.28-2.14-2.05-3.54-4.29-3.26l-17.15,2.51c-.3.04-.46-.34-.22-.53l17-12.98c3.35-2.61,3.63-7.73.56-10.71-2.79-2.79-7.27-2.7-10.06.09L1.29,30.01c-1.02,1.12-1.49,2.61-1.21,4.19.47,2.52,2.98,4.19,5.5,3.73l14.77-3.01c.32-.07.49.36.22.54l-16.38,10.49c-2.05,1.3-2.98,3.63-2.33,5.96.65,3.07,3.73,4.84,6.71,4.1l24.49-6.03c.28-.07.48.25.3.47l-3.82,4.72c-1.02,1.3.65,3.07,2.05,2.05l12.58-10.34c2.24-1.86.75-5.5-2.14-5.22h-.03Z/></svg>

Exportar SVG: crear un Blob con el contenido del textarea y tipo image/svg+xml, generar URL temporal con createObjectURL, crear un enlace temporal con atributo download y disparar el click para iniciar la descarga, luego limpiar recursos y revocar la URL.

Buenas prácticas de seguridad y rendimiento

• Sanitizar y validar siempre cualquier SVG proveniente de usuarios para evitar inyección de scripts o contenido no deseado. • Mantener la vista previa en un contenedor que no ejecute scripts. • Usar un límite de tamaño razonable para el contenido del editor. • Para proyectos empresariales, contar con una estrategia de ciberseguridad y auditoría de código es clave; en Q2BSTUDIO ofrecemos servicios de ciberseguridad y pentesting que aseguran la integridad de tus aplicaciones.

Extensiones y uso en proyectos reales

Puedes integrar este visor como componente en una aplicación web más grande, añadir características como historial de versiones, validaciones avanzadas, conversión a PNG y exportación optimizada. Si buscas desarrollar una solución escalable o integrar procesamiento por lotes en la nube, Q2BSTUDIO desarrolla aplicaciones a medida y software a medida para necesidades específicas, y puede ayudarte a desplegarlo en infraestructuras seguras.

Servicios complementarios y posicionamiento

En Q2BSTUDIO unimos experiencia en inteligencia artificial, servicios cloud aws y azure, servicios inteligencia de negocio y desarrollo de agentes IA para empresas. Si tu empresa necesita implementar analítica con power bi o soluciones de ia para empresas, contamos con capacidades para integrar agentes IA y pipelines de datos que optimicen decisiones y automatizaciones.

Palabras clave incluidas para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.

Resumen final

Hemos descrito cómo construir un visor de SVG funcional con HTML, CSS y JavaScript, desde la estructura y estilos hasta la validación y exportación. Si prefieres que nuestro equipo lo implemente como parte de un proyecto más amplio, no dudes en contactarnos para recibir asesoramiento personalizado y soluciones profesionales en desarrollo, seguridad y cloud.