SVG component does not represent text correctly

Ignition
1

Hello,

I have the following lines of code for the text:

<g>
      <text x="15.65" y="26.6" fill="#FFFFFF" font-family="Helvetica" 
font-weight="bold" text-anchor="middle" font-size="8px" 
style="fill: light-dark(rgb(255, 255, 255), rgb(18, 18, 18));">C2-A7</text>
    </g>

Everything perfect, but the font weight in Ignition Perspective is not bold and I have to add it manually in the Perspective Property Editor.

Is there a way to fix that or it is just rendering issues?

Thanks in advance.

2

I guess that I am confused, is this text that is generated as part of a larger SVG?

My recomendation would be to use a class name so that you can use a style sheet to apply the style rather than using a hard coded style as you are.

3

How is it importing into the perspective view? Is it adding the font weight prop somewhere or is that just missing altogether? It might just be that this prop is being ignored by the import logic. Svg text itself is a bit hit and miss, especially with alignment like centring it

1 Like
4

I have been told that AI is good for fixing code, so I decided to try it. It took three tries with Google Gemini, having to explain very clearly that this image was to be embedded in Ignition Perspective and let it know the issue between tries. Gemini learns much quicker that I do, for sure.

On the third try Gemini finally decided that altering the font-weight was the solution. +1 to @nminchin who noticed this. Looks like you are smarter than AI. Your job is safe. :slightly_smiling_face:

Gemini also stated that your original fill="#FFFFFF" was redundant, didn't think the 'light-dark' style would work, and "Helvetica" could be a problematic font.

I also had Gemini add in the Perspective built-in theme colors...that seemed to work.

Normal:

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <text 
    x="20" 
    y="25" 
    text-anchor="middle" 
    style="font-family: Arial, sans-serif; font-size: 8px; font-weight: 400; fill: var(--qual-6);">
    C2-A7
  </text>
</svg>

Bold:

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <text 
    x="20" 
    y="25" 
    text-anchor="middle" 
    style="font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; fill: var(--qual-6);">
    C2-A7
  </text>
</svg>
5

The issue is that, in OP's svg snippet, the font-weight is defined as an svg attribute rather than as an inline style attribute within the SVG style. I’m thinking that perhaps the SVG import logic doesn’t recognise the SVG attribute and is looking for the font weight defined within the style value instead.

This apparently is a valid css function, although it should probably be avoided and a css colour variable used instead which can then be defined in custom css themes. Then, if you have a light and dark theme, it can be explicitly defined in both