feat: preserve id and class attributes

[JacobLinCool]

This pull request introduces the preservation of className and id attributes by adding a g group container. This enhancement increases the flexibility and customization of generated SVGs for downstream tasks, such as applying CSS animations.

Should resolve #629

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satori-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 13, 2024 1:00pm

[erxclau]

Hey @JacobLinCool! I think this is a good idea but am wondering if this is generating the expected output.

I tried out the branch playground with this example (here):

<div
  style={{
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    fontSize: 32,
    fontWeight: 600,
  }}
>
  <div style={{ marginTop: 40 }} id="hello" className="world">Hello, World</div>
</div>

I am seeing the following output:

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <g>
    <mask id="satori_om-id">
      <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
    </mask>
    <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
  </g>
  <g class="world" id="hello">
    <mask id="satori_om-id-0">
      <rect x="304" y="201" width="193" height="38" fill="#fff"></rect>
    </mask>
  </g>
  <text x="304" y="232" width="80.04545454545455" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">Hello</text><text x="384.04545454545456" y="232" width="9.693181818181818" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">,</text><text x="393.7386363636364" y="232" width="7.420454545454546" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black"> </text>
  <text x="401.15909090909093" y="232" width="93.01136363636364" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">World</text>
</svg>

Is this the expected output? I imagined that the <g class="world" id="hello"> would be surrounding the text elements like this:

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <g>
    <mask id="satori_om-id">
      <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
    </mask>
    <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
  </g>
  <g>
    <mask id="satori_om-id-0">
      <rect x="304" y="201" width="193" height="38" fill="#fff"></rect>
    </mask>
  </g>
  <g class="world" id="hello">
    <text x="304" y="232" width="80.04545454545455" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">Hello</text><text x="384.04545454545456" y="232" width="9.693181818181818" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">,</text><text x="393.7386363636364" y="232" width="7.420454545454546" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black"> </text>
    <text x="401.15909090909093" y="232" width="93.01136363636364" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">World</text>
  </g>
</svg>

Also wondering if there is no ID or class name defined, if it'd be better to drop the g like this:

<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <mask id="satori_om-id">
    <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
  </mask>
  <rect x="0" y="0" width="800" height="400" fill="#fff"></rect>
  <mask id="satori_om-id-0">
    <rect x="304" y="201" width="193" height="38" fill="#fff"></rect>
  </mask>
  <g class="world" id="hello">
    <text x="304" y="232" width="80.04545454545455" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">Hello</text><text x="384.04545454545456" y="232" width="9.693181818181818" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">,</text><text x="393.7386363636364" y="232" width="7.420454545454546" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black"> </text>
    <text x="401.15909090909093" y="232" width="93.01136363636364" height="38.72727272727273" font-weight="600" font-style="normal" font-size="32" font-family="serif" fill="black">World</text>
  </g>
</svg>