Search code examples
csssvgpowerappsviewbox

How to size text in an SVG element

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:

enter image description here

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

enter image description here

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

Solution

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