# How center text in an embedded SVG?

**URL:** <https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562>\
**Category:** General Discussion\
**Tags:** ignition80\
**Created:** [March 23, 2022, 9:22pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562 "2022-03-23T21:22:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 23, 2022, 9:22pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/1 "2022-03-23T21:22:01Z")

</div>

(This is for a perspective in 8.1.15)

So I am experimenting with with custom SVGs. I created a simple button face plate that looks like this:

![Screen Shot 2022-03-23 at 3.19.11 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4b4d33e182be1cec6f0c66796a7420560d8438ba.png)

Each line of text is a separate text element.

The contents of the SVG are:

```auto
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 284 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="BasePlate">
        <circle id="Circle" cx="141.732" cy="368.504" r="141.732" />
        <rect id="Outline" x="0" y="-0" width="283.465" height="368.504" />
        <rect id="Inset" x="14.173" y="14.173" width="255.118" height="192.756" style="fill:#fff;" />
    </g>
    <g id="Text">
        <text id="Text1" x="17.523px" y="51.69px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text2" x="17.523px" y="85.29px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text3" x="17.523px" y="119.13px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text4" x="17.523px" y="152.73px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
        <text id="Text5" x="17.523px" y="186.33px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum xx</text>
    </g>
</svg>

```

I dragged this image into a perspective view and successfully linked parameters to the text elements.

But within Ignition I wanted to format the text as centered. So I drilled down to the contents of the SVG and applied a center format like so:

![Screen Shot 2022-03-23 at 3.12.39 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52efa1467b70786cfff358ca278988e097ebb716.png)

But the text remains left justified:

![Screen Shot 2022-03-23 at 3.15.27 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84284d731f0dc5a04d40f8c93bb32f681a58e04d.png)

Is it possible to do what I want, and justify the text from within Ignition, or can I only do this by applying some sort of justification directly in the SVG (and if so, how)?

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 23, 2022, 9:39pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/2 "2022-03-23T21:39:48Z")

</div>

Hey @peter,

Maybe this is what you’re looking for? Let me know if this works or not: [text-anchor - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 23, 2022, 9:54pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/3 "2022-03-23T21:54:43Z")

</div>

I can see how that works by changing where the X/Y coords are with respect to the text. I’m guessing that is probably the best I can do within the SVG itself.

I just found find this: [How to place and center text in an SVG rectangle](https://stackoverflow.com/q/5546346/31326) and that starts to get way too complicated for me!

Of course I just discovered that my SVG editor of choice (Affinity Designer) doesn’t support “text-anchor” … 🤬. So every time I want to edit my master SVG project I’ll have to manually manipulate the text-anchor of the exported SVG (and yes I know about Inkscape)

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 23, 2022, 10:43pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/4 "2022-03-23T22:43:51Z")

</div>

Hi @ayu I’m taking back my solution check. It looks like Perspective doesn’t respect the “text-anchor”.

Here is a subset of my new SVG file

`<text id="Text1" x="141.732px" y="51.69px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>`

The x coordinate is set to be the middle of the image.

And here is what the file looks like dragged into a Perspective view:

![Screen Shot 2022-03-23 at 4.40.14 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1ef198a8b3b1cba1ff4032855ceddc98b6486f5f.png)

So you can see the text has been located to the middle of the image, but it is still left aligned.

But if I open the image directly in my browser I see this:

![Screen Shot 2022-03-23 at 4.42.29 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6606ecb1a7e2010aaf36cb05d0fada60596a29f.png)

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 23, 2022, 10:53pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/5 "2022-03-23T22:53:16Z")

</div>

Hey @peter,

Yea that look’s odd. Looks like this may be a potential bug in Perspective. Would you mind posting your test SVG so I can take a look at how the attributes are being applied?

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 23, 2022, 11:00pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/6 "2022-03-23T23:00:19Z")

</div>

Here is the latest image.

```auto
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 284 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="BasePlate">
        <circle id="Circle" cx="141.732" cy="368.504" r="141.732" />
        <rect id="Outline" x="0" y="-0" width="283.465" height="368.504" />
        <rect id="Inset" x="14.173" y="14.173" width="255.118" height="192.756" style="fill:#fff;" />
    </g>
    <g id="Text">
        <text id="Text1" x="141.732px" y="51.69px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>
        <text id="Text2" x="141.732px" y="85.29px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren</text>
        <text id="Text3" x="141.732px" y="119.13px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
        <text id="Text4" x="141.732px" y="152.73px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
        <text id="Text5" x="141.732px" y="186.33px" text-anchor="middle" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:36px;">Loren Ipsum</text>
    </g>
</svg>

```

As you can see the x coord of the text is same as the cx coord of the circle.

Given that my editor of choice doesn’t support creating the text-anchor, I may take the less painful path and just slap the text into the view from within Perspective.

---

<div class="post-metadata">

**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\
**Post date:** [March 23, 2022, 11:15pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/7 "2022-03-23T23:15:27Z")

</div>

Hey @peter,

It looks like the text-anchor attribute doesn’t get applied during import or when adding the property value manually. I will file a ticket for this bug. This is a bit tedious but as a workaround you can add the attribute `textAnchor: middle` to the style object of the text element like so:

 ![textAnchor](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/0797c43a131cc24fee2c024c06e6eb625a54834b.png)

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 23, 2022, 11:17pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/8 "2022-03-23T23:17:49Z")

</div>

Thanks for that! And I’ll add another notch to my bug count!

---

<div class="post-metadata">

**Author:** ![michael2](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@michael2](https://forum.inductiveautomation.com/u/michael2)\
**Post date:** [March 24, 2022, 5:45am UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/9 "2022-03-24T05:45:31Z")

</div>

We should get a badge to track our bug count.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 24, 2022, 11:13am UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/10 "2022-03-24T11:13:38Z")

</div>

> [@peter](#):
>
> `text-anchor="middle" style=`

Well text-anchor is a style but is not inside the style string.  
i think if you move it in there than the designer will recognize it.

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [March 24, 2022, 12:59pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/11 "2022-03-24T12:59:20Z")

</div>

My understanding is that [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) is an attribute, but that [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) is a style.

And in hindsight I may actually be wanting to use text-align. I’ll have to test that today.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 24, 2022, 1:07pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/12 "2022-03-24T13:07:32Z")

</div>

Ah hm, yes they are both an svg attribute and style, seems igntion only will recognize it as a style.(probably)  
And im guessing most svg editors will put it as an attribute ☹

text-align wont work in svg

> [@peter](#):
>
> I’ll have to test that today.

you already tested that yesterday xp

> [@peter](#):
>
> But within Ignition I wanted to format the text as centered. So I drilled down to the contents of the SVG and applied a center format like so:
> 
> ![Screen Shot 2022-03-23 at 3.12.39 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52efa1467b70786cfff358ca278988e097ebb716.png)
> 
> But the text remains left justified:

---

<div class="post-metadata">

**Author:** ![tonyuptonOC](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tonyuptonOC](https://forum.inductiveautomation.com/u/tonyuptonOC)\
**Post date:** [June 24, 2022, 1:50pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/13 "2022-06-24T13:50:05Z")

</div>

I’m glad to find this workaround to center text, but is there a bug fix in the works to apply the textAnchor attribute in an embedded SVG? I am using 8.1.18 and still have this issue.

---

<div class="post-metadata">

**Author:** ![ReyC](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/reyc/32/49461_2.png) [@ReyC](https://forum.inductiveautomation.com/u/ReyC)\
**Post date:** [November 8, 2024, 2:36pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/14 "2024-11-08T14:36:00Z")

</div>

Has that issue been properly solved ?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [November 8, 2024, 3:31pm UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/15 "2024-11-08T15:31:21Z")

</div>

I am currently using 8.1.35 and both the style `textAnchor` and the SVG attribute `text-anchor` are honored in the way that I would expect.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 16, 2025, 6:05am UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/16 "2025-05-16T06:05:44Z")

</div>

> [@michael2](#):
>
> We should get a badge to track our bug count.

Bit old, but I second this; I've raised 265 or so bug reports 😄 albeirt most of those were for 8.0.x

+212 feature requests, while we're here, excluding individual feature requests for the Power Chart... counting those it'd be like 2012 😬

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 19, 2025, 4:49am UTC](https://forum.inductiveautomation.com/t/how-center-text-in-an-embedded-svg/57562/17 "2025-05-19T04:49:37Z")

</div>

Also, I've found (v8.1.47) that when embedding text (from Plan SVGs exported from Inkscape), that text is included into an element "text" group which contains "t-span" sub-elements. I can't get text to be _positioned_ correctly unless I delete the whole sub-elements folder that includes the t-span(s), and then add a "text" prop to the parent and set the text. Then the text appears in the same location as saved in the Inkscape 😕

Seems like a bug in the embed SVG logic