Download
Enlightened library to convert HTML and CSS to SVG. Satori supports the JSX syntax, which makes it very straightforward to use. Satori will render the element into a 600×400 SVG, and return the SVG string. Under the hood, it handles layout calculation, font, typography and more, to generate a SVG that matches the exact same HTML and CSS in a browser. Satori only accepts JSX elements that are pure and stateless. You can use a subset of HTML elements (see section below), or custom React components, but React APIs such as useState, useEffect, dangerouslySetInnerHTML are not supported. Satori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented. Also, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output since Satori implements its own layout engine based on the SVG 1.1 spec.
Features
- You can use <img> to embed images
- Satori uses the same Flexbox layout engine as React Native
- It supports a subset of the spec that covers most common CSS features
- Satori currently supports three font formats: TTF, OTF and WOFF
- Multiple fonts can be passed to Satori and used in fontFamily
- To render custom images for specific graphemes, you can use graphemeImages option to map the grapheme to an image source
Project Samples
