Intercambio Fluido de SVG en la Web

Silvia Pastor

Hoy se anuncia la compatibilidad en Microsoft Edge y navegadores basados en Chromium con archivos SVG en la API de Portapapeles Asíncrona. Esto significa que copiar y pegar datos SVG en cualquier aplicación, ya sea nativa o web, ahora es posible.

Las imágenes SVG son una excelente opción para renderizar gráficos y visuales de alta calidad en la web. Son eficientes en términos de espacio y la calidad de la imagen no se ve afectada al redimensionarla. Sin embargo, al manejar formatos de imagen SVG en aplicaciones, la historia es un poco diferente.

Las aplicaciones nativas diseñadas para soportar archivos SVG funcionan con ellos sin problemas. Por ejemplo, se puede copiar un archivo SVG desde el explorador de Windows y pegarlo en Microsoft PowerPoint, o viceversa. No obstante, en la web, la API DataTransfer legacy, utilizada para obtener los datos almacenados en el portapapeles, no tiene soporte incorporado para archivos de tipo MIME SVG. Esto dificulta que las aplicaciones web soporten copiar o pegar contenido SVG.

Este ha sido un problema recurrente tanto para los usuarios como para los desarrolladores web durante mucho tiempo:
– Los usuarios han tenido que crear soluciones alternativas para sortear esta limitación, por ejemplo, usando DevTools para copiar el contenido bruto de SVG.
– Para permitir que los usuarios peguen contenido SVG en aplicaciones web, los desarrolladores web usualmente crean analizadores especiales para interpretar los datos SVG brutos que se pegan en sus aplicaciones. Estos analizadores, a menudo, detectan datos SVG brutos, y luego suben el contenido SVG como archivos en un servidor y los muestran a los usuarios utilizando elementos , lo que desafortunadamente renderiza el SVG como una imagen estática.
– Para permitir que los usuarios exporten contenido SVG desde aplicaciones web, los desarrolladores se ven obligados a crear interfaces para que los usuarios exporten su contenido SVG y lo guarden localmente en sus dispositivos.

Las más recientes métodos de lectura y escritura de la API de Portapapeles (también conocida como API de Portapapeles Asíncrona) son una gran mejora sobre la forma antigua de manejar eventos del portapapeles. Y ahora, a partir de Microsoft Edge 124, esos métodos soportan completamente el formato SVG también. Esto significa que las aplicaciones web que usan la API de Portapapeles Asíncrona ahora pueden participar en operaciones de portapapeles entre web y nativa, nativa y web, y web y web que involucren contenido SVG.

Aquí hay un breve video que muestra la función en acción (puedes acceder a la página de demostración aquí).

El equipo ha trabajado en actualizar la especificación de la API del Portapapeles en el W3C y contribuyó con el código al proyecto de código abierto Chromium, haciéndolo disponible para otros navegadores basados en Chromium.

Esperamos que el soporte para SVG sea útil para tus escenarios avanzados de aplicaciones. Si necesitas experiencias de copiar/pegar aún más flexibles en tus aplicaciones, ten en cuenta que recientemente también se añadió soporte para formatos personalizados web, así como soporte para leer contenido HTML sin sanitizar en la API de Portapapeles Asíncrona.

Como siempre, nos encantaría recibir tus comentarios. Si tienes opiniones sobre la API, por favor comunícate en el repositorio de especificaciones de la API de Portapapeles, y si notas algún problema en Edge, por favor envía tus comentarios desde el navegador, yendo a Configuración y más (…) > Ayuda y comentarios > Enviar comentarios.

Scroll al inicio