Skip to main content
Known Participant
Jan 31, 2024 1:36 PM UTC
Question

Specifying Text Alignment Within SVG Exports

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?

18 replies

__JMW__Author
Known Participant
Feb 8, 2024 12:46 PM UTC

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

Translate
Doug A Roberts
Community Expert
Community Expert
Feb 9, 2024 3:10 PM UTC

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?

Translate
Anubhav M
Community Manager
Community Manager
Jan 31, 2024 7:41 PM UTC

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

Translate
Inspiring
Feb 1, 2024 11:54 AM UTC

Hi Anubhav,

 

Please reread my post slowly, thank-you. 

Translate
__JMW__Author
Known Participant
Feb 1, 2024 12:43 PM UTC

(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. 

Translate