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

Specifying Text Alignment Within SVG Exports

  • 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?

    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 9, 2024

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