Um SVG é tudo de que você precisa

• SVG é um formato de gráficos vetoriais simples, baseado em XML, compatível com quase todas as plataformas e capaz de incorporar scripts para criar visualizações interativas
• Uma ferramenta de visualização em SVG criada no passado para pesquisa de redes miceliais ainda funciona perfeitamente em navegadores modernos, mesmo após 20 anos, comprovando a durabilidade do formato
• Com apenas um arquivo SVG autossuficiente, é possível fazer carregamento de dados, processamento, visualização e interação inteiramente no lado do cliente
• Em conexão com o conceito dos “quatro Ps” de Anil (Permanence, Provenance, Permission, Placement), o texto destaca a persistência do SVG, sua compatibilidade com controle de versão, a separação de permissões e sua expressividade espacial
• Com o aumento da capacidade de processamento dos navegadores modernos, abriu-se a possibilidade de implementar todo o pipeline de análise de dados dentro de um SVG, o que o torna uma ferramenta importante para ampliar o compartilhamento de pesquisas e a reprodutibilidade

---

O potencial do SVG e o ideal da publicação científica

• SVG é um gráfico vetorial em formato XML simples, exibido com nitidez em qualquer dispositivo e capaz de incorporar scripts para criar conteúdo interativo
  • Ele tem recursos poderosos que a maioria das pessoas não percebe, e que poderiam ser usados de forma mais ativa
• O texto apresenta o ideal de que artigos científicos deveriam oferecer um ambiente interativo completo que apoiasse a exploração de dados e a reprodução de experimentos
  • Alguns experimentos são difíceis de reproduzir imediatamente por restrições de custo e tempo, mas isso é plenamente viável em artigos da área de ciência da computação

Redescoberta de uma ferramenta de visualização em SVG de 20 anos atrás

• Durante o período de pós-doutorado no Departamento de Ciências Vegetais de Cambridge, foi criada uma ferramenta de visualização baseada em SVG para o estudo da sinergia em redes miceliais
  • Ela foi projetada para permitir a exploração de dados de redes miceliais cultivadas em placas de Petri reais
• Ao executar esse SVG novamente recentemente, constatou-se que um código da época em que exigia Firefox 1.5 ou o plug-in Adobe SVG ainda funciona perfeitamente em navegadores modernos
  • Esse é um exemplo da compatibilidade e estabilidade de longo prazo do formato SVG

Estrutura de um SVG totalmente autossuficiente

• Com um único arquivo SVG, é possível realizar carregamento de dados, processamento, visualização e interação
  • Os dados podem ser obtidos de um repositório externo com versionamento ou incorporados diretamente no próprio arquivo
  • Todo o processamento roda no navegador do lado do cliente, sem necessidade de lógica no servidor
  • É fácil distribuir e compartilhar em um servidor web estático

Conexão com os “quatro Ps” de Anil

• Permanence: um SVG pode receber um DOI como um artigo ou conjunto de dados, e o fato de arquivos criados há 20 anos ainda funcionarem comprova isso
• Provenance: como o SVG é baseado em texto, ele é compatível com sistemas de controle de versão como Git, e a mesma estratégia pode ser aplicada quando usa dados externos
• Permission: como os dados e a lógica de processamento estão separados, pode-se aplicar o mesmo modelo de permissões usado para dados comuns
• Placement: o SVG possui uma expressão espacial intrínseca, o que facilita, por exemplo, a criação de visualizações em mapas-múndi

Mais poder computacional no navegador e novas possibilidades

• O SVG criado 20 anos atrás era uma ferramenta de visualização simples, mas, com o aumento da capacidade de processamento dos navegadores modernos, agora é possível implementar todo o pipeline de análise de dados dentro do SVG
  • Isso pode ser processado com operações leves o suficiente para nem fazer o ventilador do notebook girar

O SVG no ecossistema de compartilhamento de pesquisa

• Junto com Jupyter notebooks, Marimo botebooks, a combinação slipshow/x-ocaml, Forester e projetos de notebook pessoal
  • O SVG passa a ser mais uma ferramenta para facilitar o compartilhamento e a recombinação de resultados de pesquisa
• Essas ferramentas fazem parte de esforços contínuos para construir um ambiente de pesquisa colaborativo e reprodutível

[GN⁺]

Comentários do Hacker News

• O tema principal é visualização, mas no passado cheguei a criar um software de coreografia para dança
  Renderizei toda a UI em SVG, e funcionou surpreendentemente bem
  O projeto se chama StageKeep e originalmente foi feito com React Three Fiber, depois refatorado para SVG
  Fui inspirado pelo conceito de Signed Distance Function e gostei da ideia de uma função atômica que recebe entrada e produz SVG
  • Houve uma época em que SVG chamava atenção como substituto do Flash
    Com SVG + CSS + JavaScript dava para implementar quase tudo que se fazia com Flash, mas não existiam ferramentas de autoria tão boas quanto as do Flash
    No fim, o Flash desapareceu, e nada ocupou completamente o seu lugar
  • No rodapé do site está escrito “Start free tiral”, então provavelmente é um erro de digitação de “trial” :)
  • Como diretor de palco, trabalho com coreografia, e seria muito legal poder planejar previamente a movimentação em cena com uma ferramenta assim
  • Projeto realmente incrível. Fico curioso se também seria possível ter um recurso de extração automática de coreografia de vídeo com IA
    Por exemplo, algo como analisar e importar coreografias de vídeos do Project21 ou do Avantgardey
  • Fico curioso se você também dança pessoalmente
• Fiz um resumo das desvantagens do SVG
  • Não há quebra de linha em texto
  • Não dá para embutir glifos de fonte — se o usuário não tiver a fonte, pode não conseguir ler
  • A versão suportada e os recursos variam entre navegadores
  • Como pode incluir JS ou recursos externos, é difícil visualizá-lo em ambientes isolados por segurança
    Uma solução é manter duas versões: o SVG original para Inkscape e um SVG para distribuição com o texto convertido em curvas
  • Há muitos outros problemas também
    A renderização varia entre navegadores, então é difícil obter resultados consistentes, e SVGs complexos sofrem bastante com vazamento de memória e queda de desempenho de renderização
    Fora o Inkscape, quase não há editores decentes para Linux
    Mesmo assim, continuo usando SVG por falta de alternativa, mas tento mantê-lo o mais simples possível
  • Ao embutir HTML com <foreignObject>, passa a ser possível fazer quebra de linha de texto
    No SVG 2, isso deve ser resolvido com a propriedade inline-size
    Embutir fontes já é possível com o elemento <font> ou incluindo WOFF como data URI
    Mas partes como linha de base do texto e controle de escala ainda são uma especificação incompleta
    Documentação relacionada: SVG2 InlineSizeProperty, SVG11 Fonts
  • No Safari, é possível embutir fontes codificadas em base64 com @font-face dentro de <style>
    Mas isso aumenta muito o tamanho do arquivo, então não é recomendado
  • Converter o texto em curvas gera o problema de não ser selecionável
    No Safari, a seleção funciona com elementos <text>, então de todo modo não existe solução perfeita
• Gosto da visão de artigos científicos virem junto com um ambiente interativo, permitindo que o leitor manipule os dados e reproduza os experimentos
  O blog Illustrated Evo2 da NVIDIA também foi marcante
  • Isso me lembrou o artigo CloudSpecs publicado por colegas
    Todas as figuras estão ligadas a um site e podem ser reproduzidas no navegador com DuckDB + WebR + ggplot
    Exemplo: demo da Figure 1
  • Reexecutar experimentos no navegador provavelmente só é viável em pesquisa baseada em modelagem
    Ainda assim, a ideia de permitir explorar os dados por diferentes perspectivas é interessante
  • Não existe um formato muito adequado para usar no lugar de SVG
    PDF tem recursos interativos limitados, e tanto Word quanto PDF são fracos para incorporar multimídia
  • Já teria muito valor se ao menos desse para inserir GIFs ou vídeos
  • SVG leva tempo para renderizações complexas, então não combina muito bem com interatividade
    Se só forem necessários gráficos vetoriais, PostScript também pode ser uma alternativa
• Ao renovar o projeto “Spurious Correlations” há dois anos, criei um gerador de gráficos SVG em Python por conta própria
  Não gostei das ferramentas de gráficos em JS/PHP que existiam (pCharts, HighCharts etc.), então implementei a minha, e acabou funcionando melhor do que eu esperava
  Dá para gerar SVG limpo só com matemática, com a vantagem extra de escalabilidade infinita
  • Se estiver procurando um framework JS para gráficos, recomendo Observable Plot
    É uma ferramenta feita pelo criador do D3, concisa e com ótima usabilidade de API
    Não tem animação, mas é mais que suficiente para gráficos de artigos
  • É uma pena que o Postscript não tenha se popularizado mais
    Em outra linha do tempo, talvez o padrão tivesse virado Postscript em vez de HTML ou SVG
  • Graças ao site, usei isso no primeiro dia de aula de estatística como exemplo de correlação espúria
  • Acho que a indústria precisa abandonar o medo de que “se você fizer por conta própria, vai dar errado”
• O primeiro artigo do Distill, Augmented RNNs, foi marcante
  É um exemplo de interação mínima com D3.js sobre SVG, e foi a primeira vez que vi o estilo do Shan Carter e pensei que queria entrar para a equipe dele
• Há 15 anos, fiz um controlador de churrasqueira com 4 sensores de temperatura e um algoritmo de controle PID
  Por meio de um servidor HTTP embutido, exibia gráficos de temperatura e mostradores numa interface web baseada em SVG, e funcionava bem junto com JS
  • Projeto muito legal. Fico curioso se você chegou a gravar algum vídeo dele funcionando
• Como autor do texto, o ponto que quero enfatizar ao revisá-lo agora é que um SVG de 20 anos atrás ainda funciona
  A maioria dos outros códigos que escrevi naquela época precisa de correção, mas o SVG permanece igual
  • No começo era difícil usar SVG por causa da baixa compatibilidade entre navegadores
    Hoje, porém, até SVGs de 20 anos atrás funcionam sem problemas na maioria dos navegadores
• Gosto de SVG, mas o problema de desempenho continua existindo
  Se houver mais de 100 elementos DOM, como em QR codes ou mapas complexos, ele fica lento, e animações também são mais lentas do que com canvas ou Lottie
  • Já embuti um motor de xadrez dentro de um SVG de tabuleiro para fazê-lo jogar sozinho
    Link do projeto
    Em uma instalação artística de um amigo, projetamos dezenas desses SVGs de xadrez ao mesmo tempo, e o limite que o navegador aguentava era bem baixo
  • Eu também fiz um visualizador de mapas com SVG+JS para usar em um jogo, mas quando a densidade de objetos aumentava ficava lento demais, então no fim troquei para canvas
    No entanto, nesse processo perdi parte dos recursos que o SVG oferecia
• Fico curioso se existe algum formato leve parecido com SVG para 3D
  Ao visualizar modelos CAD, estou procurando uma forma de refletir apenas alterações parciais sem exportar o arquivo .step inteiro
• No passado, ao criar o manual de montagem do Shapeoko v2 CNC, usei SVG para que, quando o usuário clicasse em uma peça, a peça correspondente no desenho fosse destacada
  Link de exemplo
  Foi feito no Inkscape e funcionava direto no navegador
  • Implementação muito legal