Specifying Text Alignment Within SVG Exports

Forum|Forum|2 years ago
January 31, 2024
2 replies
3954 views

To avoid confusion, I thought I'd separate out this issue from my previous post about clean SVG text exports.

I'd like my center-aligned text to export from Illustrator to SVG like this:

<text id="example_id" x="329" y="403" text-anchor="middle">Example Text</text>

Unfortunately Illustrator always seems to export it like this:

<text id="example_id" transform="translate(301 403)"><tspan x="0" y="0">Example Text</tspan></text>

So, regardless of whether you've set your text to be left-aligned, center-aligned or right-aligned, Adobe Illustrator always calculates and exports it as left-aligned text that is visually in the correct place.

However we are using the SVGs as part of a UI and we are dynamically changing some text elements to arbitrary user-defined strings - so we need replacement text to be centered too.

Currently I am doing this by manually editing the files to include text-anchor="middle" within the text specification (and changing the X offset accordingly through trial-and-error), but ideally I'd like to find some way to coerce Illustrator to specify text-anchor="middle" for me.

Any ideas?

_

__JMW__Author

Known Participant

In the absence of any relevant replies, is this impossible?

Doug A Roberts

Community Expert

SaveAs and ExportAs both appear to code this the same way, so I'd guess 'yes'.

If your SVG specification is crucial to your workflow, have you tried Inkscape?

Anubhav M

Community Manager

Hello @__JMW__,

Thanks for reaching out. I tried replicating this behavior with a new Illustrator document with 3 text boxes with the center, left, and right alignments and exported it as an SVG. The alignment did turn out correctly in the exported file when viewing it on a browser (Google Chrome).

Also, Illustrator seems to not use the text-anchor attribute. Instead, the positioning and alignment of text in SVG are handled by the x and y attributes in the <text> element, which specifies the starting point of the text baseline.

Would you mind sharing some more details, like the exact version of the OS/Illustrator and sample Ai and SVG files with which you're having trouble, along with a screen recording of the problem, so I can check this with the product team?

Looking forward to hearing from you.

Thanks,

Anubhav