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. 

[defaultga15xisrp4bq]

Hi Anubhav,

we are encountering the same problem for our application.

For correct positioning of dynamic right-aligned or center-aligned text, we need the position of the anchor point.

 But Illustrator does not export it.

Our ask is that the anchor point is exported to SVG using the text-anchor attribute.

You can read about it here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

Can we get a confirmation that this is on the backlog?

[Anubhav M]

Hello @defaultga15xisrp4bq,

Thanks for sharing the details. Kindly allow me some time to check this with the team.

Thanks,
Anubhav

[defaultga15xisrp4bq]

Thank you @Anubhav M! Looking forward to your answer!

[Nanagnammo]

Are there any news about this?

[Anshul_Saini]

Hi all,

Thank you for checking in! The product team is aware of this request to include the text-anchor attribute for SVG exports in Adobe Illustrator. While it’s a valuable feature, implementing it is quite complex.

That said, it’s in the pipeline for consideration, but we don’t have an ETA at this time. We understand how important this feature is for your workflows, where dynamic content and precise alignment are critical, and we’ll keep striving to improve visibility on this.

In the meantime, you can post this request on our UserVoice platform, where users can share feature ideas and vote on them. Feel free to share the link here once you’ve posted so others in the community can upvote it as well. The more traction it gets, the higher the priority it will receive from the team.

We appreciate your patience and collaboration in improving Illustrator.

Best regards,

Anshul Saini

[defaultga15xisrp4bq]

Hi Anshul, thanks for the tip.

I noticed that a request for supporting the text-anchor attribute already exists on UserVoice.

So anyone who like this to happen, can go in and vote there.

https://illustrator.uservoice.com/forums/333657-illustrator-desktop-feature-requests/suggestions/377...

[__JMW__]

That ticket is for SVG import.

I need it for SVG export.

[Anshul_Saini]

Since this feature is not currently available in Illustrator, I encourage you to visit our UserVoice platform to submit a feature request for SVG export with the text-anchor attribute. Sharing it there allows the community to upvote the request, helping prioritize it for future updates.

Here’s the link to the UserVoice platform: UserVoice platform. Once you’ve created your request, feel free to share the link here, and others in the community can upvote it as well.

We really appreciate your feedback and patience as we work to improve Illustrator. Let me know if you need help with anything else!

Best,

Anshul Saini

[daniel_7877]

I'm getting around this Illustrator limitation by using a batch processing script. I'm using NodeJS anyway for the project, so scripting in JS. ChatGPT can write the code to your specifications. Put the script in the folder with all your SVGs, run it, and all text elements will be updated with a text-align attribute set to start, middle, or end depending on your choice. My project uses different text alignments in different places. I think append the layer name for text objects in Illustrator with _L for start (left), _M for middle, and _R for end (right) so the script can use the id to set the text-align on all of them correctly.

[daniel_7877]

So I got this solution implemented, and I have a few notes for anyone else wanting to try it.

1.  First, it works great! It's a bit of a hassle to set up, but after that it can fix all kinds of things that Illustrator botches on the export (I kind of wonder why the Adobe engineers don't just build in a utility script like this on export to fix all these issues instead of trying to fix their exporter, which sounds like a difficult thing.) It was worth the time it took to set it up because now I can count on SVG files being correct and suitable for my project without manually fixing each one of them every time I export. (Ex. Illustrator tries making blending mode an SVG presentation attribute, which it isn't, so the script fixes this too by changing it to an inline CSS style instead).
2.  I didn't use _ underscores in the suffixes because Illustrator doesn't like those and changes them to gibberish. I use - hyphens instead.
3.  Illustrator compensates for not supporting text-anchor attribute by moving the text to where it should have been, so the positioning is screwed up after the text-anchor is added to the SVG (a line of text that's supposed to align right would put the text anchor at the start of the text instead of at the end). I account for this in Illustrator as well before exporting. As soon as I get any middle or right text where it should be, I left align it before exporting. The script then puts the correct alignment on the text by using the -R, -M, or -L suffix. (Actually, no need to use the -L suffix because that's the default anyway.)

[daniel_7877]

Okay, one more note. I didn't make this a batch process script like I planned at the start. Instead I made it a droplet so I can just do one SVG at a time by dragging the Illustrator exported SVG into the droplet. When the script runs, it replaces the Illustrator SVG with the fixed SVG.

[defaultga15xisrp4bq]

Thank you for the suggestion. I created a new feature request here: https://illustrator.uservoice.com/forums/333657-illustrator-desktop-feature-requests/suggestions/492...

[__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.