Generates unencoded attribute values #291
Description
Bug report
Description / Observed Behavior
Satori generates attribute values from inline CSS without encoding some characters (particularly " and <) (in certain cases?).
This makes SVG parsers (browsers, resvg) crash on the file.
Expected Behavior
Encode (at least) " and < in attribute values.
Likely also & for character references (&).
Reproduction
const svg = await satori(
<div
style={{
backgroundImage:
'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>\')'
}}
/>,
{width: 1200, height: 628, fonts}
)Yields:
<svg width="1200" height="628" viewBox="0 0 1200 628" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="satori_biid_0" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse" x="0" y="0"><image x="0" y="0" preserveAspectRatio="none" href="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>"/></pattern></defs><rect x="0" y="0" width="0" height="0" fill="url(#satori_biid_0)"/></svg>Note particularly the href:
href="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><circle cx="2" cy="2" r=".5"/></svg>"Additional Context
latest
Here’s some code on how I serialize XML: https://github.com/syntax-tree/xast-util-to-xml. Not sure what’s being used here. If it’s a custom AST like structure, perhaps xast might help!