Satori: HTML/ CSS to SVG Converter
Enlightened library to convert HTML and CSS to SVG
Satori is a great tool for developers looking to convert their HTML and CSS to SVG. One of the best features of Satori is that it supports the JSX syntax, which makes it very simple and straightforward to use. Not only that, but it also takes care of many important tasks under the hood such as layout calculation, font, typography, and more to generate an SVG that matches the exact same HTML and CSS in a browser.
It's important to note that Satori only accepts JSX elements that are pure and stateless. While you can use a subset of HTML elements (see section below) or custom React components, React APIs such as useState, useEffect, and dangerouslySetInnerHTML are not supported by Satori.
If you don't have JSX transpiler enabled, you can simply pass React-elements-like objects that have type, props.children, and props.style (and other properties too) directly to Satori.
While Satori supports a limited subset of HTML and CSS features due to its special use cases, it generally only implements static and visible elements and properties. For example, the <input> HTML element and the cursor CSS property are not considered by Satori. Additionally, you can't use <style> tags or external resources via <link> or <script>.
It's also essential to keep in mind that Satori does not guarantee that the SVG output will 100% match the browser-rendered HTML output since Satori implements its own layout engine based on the SVG 1.1 spec. Nonetheless, Satori is a powerful tool that can greatly simplify the process of converting HTML and CSS to SVG and is definitely worth checking out for developers looking for an efficient way to do so.
License
- MPL-2.0 License.
Resources
vercel
