Con solo un SVG es suficiente

• SVG es un formato de gráficos vectoriales simple basado en XML, compatible con casi todas las plataformas, y permite implementar visualizaciones interactivas integrando scripts
• La durabilidad del formato queda demostrada por una herramienta de visualización en SVG creada en una antigua investigación sobre redes miceliales, que sigue funcionando perfectamente en navegadores modernos incluso 20 años después
• Con un solo archivo SVG autosuficiente se puede realizar del lado del cliente toda la carga de datos, el procesamiento, la visualización y la interacción
• En relación con el concepto de las “cuatro P” de Anil (Permanence, Provenance, Permission, Placement), se destacan la persistencia del SVG, su compatibilidad con el control de versiones, la separación de permisos y su capacidad de representación espacial
• Gracias al aumento de la capacidad de cómputo de los navegadores modernos, se abre la posibilidad de implementar dentro de SVG todo el pipeline de análisis de datos, lo que lo convierte en una herramienta importante para compartir investigación y mejorar la reproducibilidad

---

El potencial de SVG y el ideal de la publicación científica

• SVG es un gráfico vectorial en un formato XML simple, se muestra con nitidez en cualquier dispositivo y permite crear contenido interactivo integrando scripts
  • Tiene capacidades potentes que la mayoría de los usuarios no percibe, y que podrían aprovecharse de forma más activa
• Se plantea el ideal de que un artículo científico debería ofrecer un entorno interactivo completo que permita explorar los datos y reproducir los experimentos
  • Algunos experimentos son difíciles de reproducir de inmediato por restricciones de costo y tiempo, pero en los artículos del área de ciencias de la computación esto es totalmente viable

Redescubrimiento de una herramienta de visualización SVG de hace 20 años

• Durante una etapa posdoctoral en el Departamento de Ciencias Vegetales de Cambridge, se creó una herramienta de visualización basada en SVG para una investigación sobre la sinergia en redes miceliales
  • Fue diseñada para explorar datos de redes miceliales que crecían en placas de Petri reales
• Al volver a ejecutar recientemente ese SVG, se comprobó que un código de la época en que se requería Firefox 1.5 o el plugin SVG de Adobe sigue funcionando perfectamente en navegadores modernos
  • Este es un ejemplo de la compatibilidad y estabilidad a largo plazo del formato SVG

Estructura de un SVG completamente autosuficiente

• Con un solo archivo SVG es posible encargarse de la carga de datos, el procesamiento, la visualización y la interacción
  • Los datos pueden obtenerse desde un repositorio externo con control de versiones o incluirse directamente dentro del archivo
  • Todo el procesamiento se ejecuta en el navegador del lado del cliente, y no se necesita lógica del lado del servidor
  • Puede distribuirse y compartirse fácilmente desde un servidor web estático

Relación con las “cuatro P” de Anil

• Permanence: al SVG se le puede asignar un DOI igual que a un artículo o un conjunto de datos, y el hecho de que un archivo creado hace 20 años siga funcionando lo demuestra
• Provenance: como SVG está basado en texto, es compatible con sistemas de control de versiones como Git, y al usar datos externos puede aplicarse la misma estrategia de trazabilidad
• Permission: como los datos y la lógica de procesamiento están separados, puede aplicarse el mismo modelo de permisos que a los datos comunes
• Placement: SVG tiene una representación espacial intrínseca, lo que facilita por ejemplo crear una visualización de un mapa mundial

Mayor capacidad de cómputo en el navegador y nuevas posibilidades

• El SVG creado hace 20 años era una herramienta de visualización simple, pero con la mejora de la capacidad de cómputo de los navegadores modernos, ahora es posible implementar dentro de SVG todo el pipeline de análisis de datos
  • Incluso una carga ligera, que ni siquiera hace girar el ventilador de una laptop, puede ser suficiente para procesarlo

SVG dentro del ecosistema de intercambio de investigación

• Junto con Jupyter notebooks, Marimo botebooks, la combinación slipshow/x-ocaml, Forester y proyectos personales de notebook
  • SVG se suma como una herramienta que facilita compartir y recombinar resultados de investigación
• Estas herramientas forman parte de esfuerzos continuos por construir un entorno de investigación colaborativo y reproducible

[GN⁺]

Opiniones en Hacker News

• Aunque el tema principal es la visualización, hace tiempo hice un software de coreografía de danza
  Rendericé toda la UI en SVG y funcionó sorprendentemente bien
  El proyecto se llama StageKeep y originalmente estaba hecho con React Three Fiber, pero luego lo refactoricé a SVG
  Me inspiré en el concepto de Signed Distance Function y me gustó la idea de una función atómica que recibe una entrada y genera SVG
  • Hubo una época en que SVG llamaba la atención como reemplazo de Flash
    Con SVG + CSS + JavaScript se podía implementar casi todo lo que se hacía con Flash, pero no existían herramientas de autoría tan buenas como las de Flash
    Al final Flash desapareció y nada ocupó por completo su lugar
  • Abajo del sitio dice “Start free tiral”, supongo que es un error tipográfico de “trial” :)
  • Como director escénico que trabaja con coreografía, sería increíble poder planear de antemano los desplazamientos en el escenario con una herramienta así
  • Es un proyecto realmente genial. Me pregunto si también sería posible una función para extraer automáticamente coreografía de videos con IA
    Por ejemplo, analizar e importar coreografías desde videos de Project21 o Avantgardey
  • Me da curiosidad saber si tú mismo bailas
• Hice una lista de las desventajas de SVG
  • No permite salto de línea en texto
  • No se pueden incrustar glifos de fuentes — si el usuario no tiene la fuente, no podrá leerlo
  • El soporte de versiones y funciones varía según el navegador
  • Puede incluir JS o recursos externos, así que es difícil de ver en un entorno aislado por seguridad
    Como solución, se puede mantener una versión SVG fuente para Inkscape y otra versión SVG para distribución con el texto convertido a curvas
  • También hay muchos otros problemas
    El renderizado cambia según el navegador, así que es difícil obtener resultados consistentes, y los SVG complejos sufren bastante de fugas de memoria o caídas en la velocidad de renderizado
    Fuera de Inkscape, casi no hay editores realmente utilizables en Linux
    Aun así, sigo usando SVG porque no hay alternativa, pero trato de mantenerlo lo más simple posible
  • Si incrustas HTML con <foreignObject>, sí es posible el salto de línea en texto
    En SVG 2 se supone que esto se resolverá con la propiedad inline-size
    La incrustación de fuentes ya existe mediante el elemento <font> o incluyendo WOFF como data URI
    Pero cosas como la línea base del texto o el control del escalado siguen siendo una especificación incompleta
    Documentación relacionada: SVG2 InlineSizeProperty, SVG11 Fonts
  • En Safari se pueden incrustar fuentes codificadas en base64 con @font-face dentro de <style>
    Pero no lo recomiendo porque aumenta mucho el tamaño del archivo
  • Si conviertes el texto a curvas, aparece el problema de que ya no se puede seleccionar
    En Safari sí se puede seleccionar con elementos <text>, así que en ningún caso hay una solución perfecta
• Me gusta la visión de que los artículos científicos se publiquen junto con un entorno interactivo, para que el lector pueda manipular los datos directamente y reproducir los experimentos
  También me impresionó el blog Illustrated Evo2 de NVIDIA
  • Me recordó el artículo CloudSpecs de unos colegas
    Todas las figuras están conectadas con el sitio web y se pueden reproducir en el navegador con DuckDB + WebR + ggplot
    Ejemplo: demo de la Figura 1
  • Volver a ejecutar experimentos en el navegador probablemente solo sea viable en investigación basada en modelado
    Aun así, es una idea interesante permitir explorar los datos desde distintas perspectivas
  • No hay un formato claramente mejor para usar en lugar de SVG
    PDF tiene funciones interactivas limitadas, y tanto Word como PDF son débiles para incrustar multimedia
  • Incluso poder insertar un GIF o un video ya tendría mucho valor
  • SVG tarda en renderizar cosas complejas, así que no encaja muy bien con la interactividad
    Si solo necesitas gráficos vectoriales, PostScript también podría ser una alternativa
• Hace dos años, al renovar el proyecto “Spurious Correlations”, hice mi propio generador de gráficas SVG en Python
  No me gustaban las herramientas de gráficas en JS/PHP que existían (pCharts, HighCharts, etc.), así que lo implementé yo mismo, y funcionó inesperadamente bien
  Con puras matemáticas puedes generar SVG limpios, y además tienes escalabilidad infinita
  • Si buscas un framework de gráficas en JS, recomiendo Observable Plot
    Es una herramienta creada por el autor de D3, concisa y con una API muy usable
    No tiene animaciones, pero para gráficas de artículos es más que suficiente
  • Es una lástima que Postscript no se haya usado más ampliamente
    En otra línea temporal, quizá Postscript se habría convertido en el estándar en vez de HTML o SVG
  • Gracias al sitio, lo usé el primer día de clase de estadística como ejemplo de correlación engañosa
  • Creo que la industria debería abandonar el miedo de que “si lo haces tú mismo, va a salir mal”
• Me impresionó el primer artículo de Distill, Augmented RNNs
  Fue un ejemplo de interacción mínima con D3.js sobre SVG, y al ver por primera vez el estilo de Shan Carter me dieron ganas de unirme a su equipo
• Hace 15 años hice un controlador para barbacoa que usaba 4 sensores de temperatura y un algoritmo de control PID
  A través de un servidor HTTP integrado mostraba gráficas de temperatura y perillas en una UI web basada en SVG, y funcionaba bien junto con JS
  • Es un proyecto realmente genial. Me pregunto si llegaste a grabar algún video de cómo funcionaba
• Como autor del texto, lo que quiero subrayar al editarlo esta vez es que un SVG de hace 20 años todavía sigue funcionando
  La mayoría del otro código que escribí en esa época hay que corregirlo, pero el SVG sigue igual
  • Al principio era difícil usar SVG porque la compatibilidad entre navegadores era baja,
    pero ahora incluso SVG de hace 20 años funciona sin problemas en la mayoría de los navegadores
• Me gusta SVG, pero el problema de rendimiento sigue ahí
  Si hay más de 100 elementos DOM, como en códigos QR o mapas complejos, se vuelve lento, y las animaciones también son más lentas que con canvas o Lottie
  • Una vez incrusté un motor de ajedrez dentro de un SVG de tablero para que jugara automáticamente
    Enlace del proyecto
    En una instalación artística de un amigo proyectamos decenas de SVG de ajedrez al mismo tiempo, y el límite que podía soportar el navegador era bastante bajo
  • Yo también hice un visor de mapas con SVG+JS para un juego, pero cuando aumentaba la densidad de objetos se volvía demasiado lento, así que al final lo cambié a canvas
    Aunque en el proceso perdí algunas funciones de SVG
• Me pregunto si existe un formato ligero similar a SVG para 3D
  Al visualizar modelos CAD, estoy buscando una forma de reflejar solo cambios parciales sin exportar todo el archivo .step
• Hace tiempo, al crear las instrucciones de ensamblaje de Shapeoko v2 CNC, usé SVG para que cuando el usuario hiciera clic en una pieza, la pieza correspondiente se resaltara en el plano
  Enlace de ejemplo
  Lo hice con Inkscape y funcionaba directamente en el navegador
  • Es una implementación realmente genial