Atualizações de Markdown SVG

Comecei a construir minha ferramenta markdown-svg-renderer em maio, mas desde então adicionei recursos suficientes que vale a pena falar aqui novamente.

Ele evoluiu para minha ferramenta ideal para compartilhar transcrições Markdown que incluem documentos SVG. Dada a minha tendência para desenhar pelicanos andando de bicicleta, este é um problema que eu precisava resolver!

A ferramenta é muito simples. Navegue até markdown-svg-renderer em seu navegador e cole algum Markdown para vê-lo renderizado… ou salve esse Markdown em um URL compatível com CORS ou GitHub Gist e cole um URL nesse documento.

A opção de URL fornecerá uma página que pode ser marcada, por exemplo https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657 – que cria o URL para este Gist.

Se você visitar o Gist, verá SVG bruto:

Na ferramenta renderizada que se parece com isto:

Como você pode ver, aquele bloco SVG no Markdown foi transformado em um SVG renderizado (neste caso animado) além de várias guias.

As guias são a parte realmente divertida. As guias PNG e JPEG renderizam SVG para esses formatos de imagem no navegador e permitem copiá-los ou baixá-los – útil para compartilhar em plataformas que não suportam SVG diretamente.

A guia MP4 é nova hoje – ela examina o SVG para ver se ele contém alguma animação, tenta adivinhar quanto tempo o vídeo em loop deve durar, então renderiza um monte de quadros da animação e carrega mais de 30 MB de ffmpeg.wasm para que possa compilar esses quadros em um vídeo MP4 usando todo o poder do FFMPEG compilado para WebAssembly e executado no navegador.

Ser capaz de transformar um SVG animado em MP4 novamente facilita o compartilhamento em plataformas que não suportam animação SVG nativamente. É um truque legal!