Support <text> in <svg>

[shuding]

Right now we require all <text> to be converted as paths, if you render a <svg> node inside. That is mainly because I guess most of these use cases (putting a SVG node inside) is for rendering some static things such as logos, and we should try to not manipulate that (like rendering it with a wrong font).

However in some rare use cases you might want a <svg> to be rendered, which contains dynamic <text> nodes. Maybe a good solution is to have an option to support converting it as <path>s. ~Not difficult to implement, just need to design it carefully.~

Edit: Adding some notes here -

• When converting <text> to <path> the coordinates need to be carefully considered. Some props can be directly attached to the path.
• text-anchor and dominant-baseline
• textLength and lengthAdjust support
• tspan
• Font props (family, weight, size, etc.)

[lunaisnotaboy]

Please, please, please implement this. I've been wanting to use the <text> elements for a dynamic meta tag generator I'm working on for Kitsu, and we need to be able to just use plain text to make it easier to debug and work on.

[shuding]

What is your use case @lunaisnotaboy? Why putting text inside <div> isn’t an option for you?

[lunaisnotaboy]

@shuding We're using an SVG template we made and we're wanting to embed text and images in there (e.g. series title, rating, year + season, banner + poster, etc.), so we don't want to use regular HTML styling if we have to.

[shuding]

If that is the case, I suggest you migrate to a HTML template (even if we have support) because you get proper text wrapping, and it will be much easier to maintain as well.

[uguareschi]

This will be so useful for me!, I'am using because I make the text to arch and the only way now is to use a path for the the text.

<path id="curve1" d="M 124, 128 m -105, 0 a 105,105 0 1,1 218,0 a 105,105 0 1,0 -218,0" fill="black" /> <text fill={"white"}> <textPath xlinkHref="#curve1" className="translate-y-[-1px] fill-white font-sans text-[15.3px]" textAnchor="middle" startOffset="25%" > {nameUpdated?.length > 15 ? "" :YOU${"'"}VE MET${" "}} <tspan> {nameUpdated ? nameUpdated.substring(0, 26) : "YOUR NAME"} </tspan> </textPath> </text>

[lunaisnotaboy]

If that is the case, I suggest you migrate to a HTML template (even if we have support) because you get proper text wrapping, and it will be much easier to maintain as well.

We want manipulate the text in a way that we can only do in SVG, so we can't migrate at this time.

[shuding]

<textPath> is a good case! We will need to find another solution for it though.

manipulate the text in a way that we can only do in SVG

@lunaisnotaboy can you be more specific with an example? I can't think of a case other than textPath that can't be achieved with CSS.

[romellogoodman]

I am hoping to use Satori to export some D3 charts that use

[shuding]

For SVG charts <text> makes sense, yep!

[romellogoodman]

@shuding sweet, is there maybe a timeline on when this might be included in an upcoming release? Want to update my team if so

[shuding]

Sorry @romellogoodman we don't have a timeline for this one as it's not a trivial change and I don't have a clear solution yet.

[thisispete]

just jumping on with a +1 vote for this feature 😁

[shuding]

I marked this feature to the 1.0 milestone and started to actively think about it - totally understood how critical and how powerful this feature is 👍

[lunaisnotaboy]

Thank you so much!!!

[yisibl]

Looking forward to seeing this being landed too, as we will likely to rely on this feature to solve https://github.com/vercel/satori/issues/186 👍

The PRs for resvg-js#217 have been merged, and I'll be releasing a new version as soon as I've written the documentation.

[peterfritz]

Hi, I have another use case for this. As currently WebkitTextStroke (-webkit-text-stroke) isn't supported, a <text> element could be used to achieve the same effect.

Example in the Vercel OG Image Playground (only works in HTML (Native) tab).

[wizardlabsxyz]

Im still having an issue with getting tags in SVG to render. Was this fixed?

[devmanbr]

please prioritize this!! 🥺 we have a use case where <textPath> is used. for us, this implementation is essential.

@shuding, I know there is a lot to resolve and implement, but this is something widely needed and there are several people interested. Whatever you can do will help.