Skip to main content
_
__JMW__
Known Participant
January 31, 2024
Question

Specifying Text Alignment Within SVG Exports

  • January 31, 2024
  • 2 replies
  • 3970 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?

    2 replies

    _
    __JMW__Author
    Known Participant
    February 8, 2024

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

    Doug A Roberts
    Community Expert
    Doug A RobertsCommunity Expert
    Community Expert
    February 26, 2024

    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.

    Anubhav M
    Community Manager
    Anubhav MCommunity Manager
    Community Manager
    January 31, 2024

    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

    G
    great-bear
    Inspiring
    February 1, 2024

    Hi Anubhav,

     

    Please reread my post slowly, thank-you. 

    _
    __JMW__Author
    Known Participant
    February 1, 2024

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices