MobileRead Forums - View Single Post

ptmkenny · 06-12-2018, 04:43 AM

Ok, after much more testing, I identified the problem.

Thanks to RbnJrg for the sample code which pointed me in the right direction.

When you use an <img> tag for SVGs and set the height and width, this problem does not occur. However, if you leave the height and width blank and then attempt to set the height/width of the SVG to "~em" using CSS, then the Kindle app may squish the SVG to nothing.

So there are two potential ways to fix this:
1) Set the height and width (which prevents the SVGs from automatically resizing when the user increases/decreases the text size)
2) Put the SVG in an <img> tag inside a <div> like this:

Code:

<div class="speechbubble>
  <div class="speechicon"><img src="media/svg/mysvg.svg" alt="mysvg" /></div>
  <p class="speechtext">My text here.</p>
</div>

Then, in the CSS, set the height/width of the SVG by targeting the <div> container (div.speechicon in this example), not the <img> tag (targeting the <img> tag is fine for normal HTML/iBooks, but will break on Kindle).

I now have this working (SVGs resize properly when the user increases/decreases the text size) on Paperwhite, iOS, and Windows and Mac apps. There are a few visual problems based on the fact that iOS vs. Windows/Mac vs. Paperwhite handle line-height and margins differently, but it's much better than before. Many thanks!

06-12-2018, 04:43 AM	#14
ptmkenny Member Posts: 12 Karma: 10 Join Date: May 2018 Device: Kindle Paperwhite	Mostly working solution Ok, after much more testing, I identified the problem. Thanks to RbnJrg for the sample code which pointed me in the right direction. When you use an <img> tag for SVGs and set the height and width, this problem does not occur. However, if you leave the height and width blank and then attempt to set the height/width of the SVG to "~em" using CSS, then the Kindle app may squish the SVG to nothing. So there are two potential ways to fix this: 1) Set the height and width (which prevents the SVGs from automatically resizing when the user increases/decreases the text size) 2) Put the SVG in an <img> tag inside a <div> like this: Code: <div class="speechbubble> <div class="speechicon"><img src="media/svg/mysvg.svg" alt="mysvg" /></div> <p class="speechtext">My text here.</p> </div> Then, in the CSS, set the height/width of the SVG by targeting the <div> container (div.speechicon in this example), not the <img> tag (targeting the <img> tag is fine for normal HTML/iBooks, but will break on Kindle). I now have this working (SVGs resize properly when the user increases/decreases the text size) on Paperwhite, iOS, and Windows and Mac apps. There are a few visual problems based on the fact that iOS vs. Windows/Mac vs. Paperwhite handle line-height and margins differently, but it's much better than before. Many thanks!