Specifying Text Alignment Within SVG Exports

[__JMW__]

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?

[Anubhav M]

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

[great-bear]

Hi Anubhav,

Please reread my post slowly, thank-you. 

[__JMW__]

(sorry - that was posted from another device with my old account on)

To be clear Anubhav, my issue is that the SVG is used in a UI that dynamically changes the text items and expects them to be as center-aligned as was specified in the illustrator original. 

[__JMW__]

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

[Doug A Roberts]

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?

[Doug A Roberts]

In case you're still interested, I've been advised that Illustrator's text engine's "text anchor" implementation is not fully compatible with the text-anchor definition of SVG, but implementing it is in the backlog.