SVG text line height displays differently within img tag

Question

I have created an SVG image which I am using within our website.

The SVG is displayed by inserting the XML into the HTML file, however, when loaded like this the SVG displayed differently compared with being displayed within an img tag.

<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />

I am just trying to reduce the line height within the following SVG:

https://jsfiddle.net/fahc2vvq/

I have to load in the XML version to edit the SVG within the website, Any ideas?

Text wrapping doesn't work great in SVG. This post might help: http://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text — Matt, May 16 '17 at 17:37
I am using the HTML method to add a p tag to the SVG, but for some reason, it is displaying with a huge gap between the lines. — George Harrington, May 16 '17 at 17:44
Just to be clear, you are happy with the font size in the inline SVG, you just want the line-height to be reduced? — Paul LeBeau, May 17 '17 at 09:44

score 1 · Accepted Answer · answered May 17 '17 at 09:58

If you want a <foreignObject> to function correctly, you need to include a <body> element.

Note: I've removed the image from this demo to make it smaller.

<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />


<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="73mm"
   height="150mm"
   viewBox="0 0 73 150"
   version="1.1"
   id="svg4523">
  <g
     id="layer1"
     transform="translate(0,-147)">

      <foreignObject
       x="15"
       y="150"
       width="40"
       height="60">
       <body>
         <p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p>
       </body>
    </foreignObject>
  </g>
</svg>

SVG text line height displays differently within img tag

1 Answers1