How to size text in an SVG element

Question

I am trying to put text inside SVG so we can use custom fonts in PowerApps

Sp I have an image with the below definition in the Image property (I've cut out the Base 64 font definition of about 1000 lines:

"data:image/svg+xml," & // You need to include this data uri to indicate that the code herein is an SVG image
 EncodeUrl(
    "<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
  <style>
    @font-face {
    font-family: 'BHF Beats';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
    font-weight: bold;
    font-style: normal;
}

    .BHFBeats { font: 128px BHF Beats;fill: white }
  </style>

  <text x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>"
)

with those settings this is what I can see (in PowerApps Studio:

but what I am trying to achieve is similar to what we can get using a simple Label control as below:

so what I want is the text to be the right size, and start at the far-left, and show all the text

I've tried many different settings for font size, view-box size but cannot get it right...

Where am I going wrong?

More info: The label control in the second image has a height of 50 and a width if 823

score 2 · Answer 1 · answered Feb 25 '20 at 18:24

I would calculate the size of the text using javascript like so:

let font_size = 128;

// while the text length is bigger than needed 
  while(txt.getComputedTextLength() > 1291 - 21 ){//1291 is the width of the svg canvas taken fron the viewBox. 21 is the offset of the text as in `x="21"`
    //reduce the font size
    font_size -=.25;
    //reset the font size 
    txt.style.fontSize = font_size+"px";
  }

svg {
  border: 1px solid #ccc;
}

body {
  background: black;
}

<svg viewBox='0 0 1291 338' xmlns='http://www.w3.org/2000/svg'>
  <style>
    @font-face {
    font-family: 'BHF Beats';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAFHUAA8AAAAA21AAAFFyAAEAAAAAAAAAAAAAAAAAA
{TL:DR}
4q/Jed/AdY8h4kAAHjaY2BgYGQAgqtL1DlA9LU2kwwYDQA7fwWaAAA=) format('woff');
    font-weight: bold;
    font-style: normal;
}

    .BHFBeats { font: 128px BHF Beats;fill: white }
  </style>

  <text id="txt" x='21' y='180' class='BHFBeats'>ExpenSys Claimant Setup Administration Module</text>
</svg>

thanks for your detailed answer but unfortunately we cannot use JavaScript in PowerApps (sucks I know) — Our Man in Bananas, Feb 25 '20 at 18:29

Paul LeBeau · Accepted Answer · 2020-02-26T13:07:38.723

2

Try adding a preserveAspectRatio attribute to your SVG.

<svg preserveAspectRatio="xMinYMid meet" ...

It will ensure the contents of your SVG always start at the left end of the parent container.

Update

For example. With and without the preserveAspectRatio attribute.

div {
  width: 100%;
  height:100px;
  background-color: red;
}

svg {
   width: 100%;
   height: 100%;
}

<div>

  <svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg">
    <style>
      .BHFBeats { font: 128px "BHF Beats";fill: white }
    </style>

    <text x="21" y="180" class="BHFBeats">ExpenSys Claimant Setup Administration Module</text>
  </svg>

</div>


<br/><br/>


<div>

  <svg viewBox="0 0 1291 338" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
    <style>
      .BHFBeats { font-size: 128px; fill: white }
    </style>

    <text x="21" y="180" class="BHFBeats">ExpenSys Claimant Setup Administration Module</text>
  </svg>

</div>

edited Feb 26 '20 at 13:07

answered Feb 25 '20 at 20:23

Paul LeBeau

97,474
9
154
181

@PaulLebau: Thanks, how do we set the `xMinYMid`? – Our Man in Bananas Feb 26 '20 at 11:38
Sorry. There was a typo in my example attribute. I've fixed it now and added an example. – Paul LeBeau Feb 26 '20 at 13:08
Thanks Paul, I removed the `ViewBox` attribute, added the `preserveAspectRatio` and it now works... – Our Man in Bananas Feb 26 '20 at 13:54
1

`preserveAspectRatio` attribute only applies to SVGs that have a `viewBox`. If the SVG meets your needs without the viewBox, then you can safely remove the `preserveAspectRatio` also. – Paul LeBeau Feb 26 '20 at 14:01

How to size text in an SVG element

2 Answers2