Satori es una gran herramienta para desarrolladores que buscan convertir su HTML y CSS a SVG. Una de las mejores características de Satori es que admite la sintaxis JSX, lo que lo hace muy sencillo y directo de usar. No solo eso, sino que también se encarga de muchas tareas importantes internas, como el cálculo del diseño, la fuente, la tipografía y más para generar un SVG que coincida exactamente con el mismo HTML y CSS en un navegador.
Es importante tener en cuenta que Satori sólo acepta elementos JSX que sean puros y sin estado. Si bien puede utilizar un subconjunto de elementos HTML (consulte la sección a continuación) o componentes personalizados de React, las API de React como useState, useEffecty dangerouslySetInnerHTML no son apoyados por Satori.
Si no tiene habilitado el transpilador JSX, simplemente puede pasar Objetos similares a elementos de reacción eso tiene type, props.childreny props.style (y otras propiedades también) directamente a Satori.
Si bien Satori admite un subconjunto limitado de funciones HTML y CSS debido a sus casos de uso especiales, generalmente solo implementa elementos y propiedades estáticos y visibles. Por ejemplo, el <input> elemento HTML y el cursor Satori no considera las propiedades CSS. Además, no puedes usar <style> etiquetas o recursos externos a través de <link> o <script>.
También es esencial tener en cuenta que Satori no garantiza que la salida SVG coincida al 100% con la salida HTML renderizada por el navegador, ya que Satori implementa su propio motor de diseño basado en el Especificaciones SVG 1.1. No obstante, Satori es una herramienta poderosa que puede simplificar enormemente el proceso de conversión de HTML y CSS a SVG y definitivamente vale la pena echarle un vistazo a los desarrolladores que buscan una forma eficiente de hacerlo.
Licencia
- Licencia MPL-2.0.
Recursos
Etiquetas
Marcos de biblioteca JavaScript JSX React Next.js TypeScript Vercel Vue