[ptmkenny]

When I use float:left, it crushes my SVGs vertically in Kindle Previewer and the macOS Kindle app.

Here is my HTML:

<p class="speechbubble chat-octopus"><span class="speechicon"><img src="../Images/file4.svg" alt="タコ"/></span>私たち</p>

Here is my CSS:

p.speechbubble img {
  width: 2em;
  height: 2em;
  margin: 0em;
}

span.speechicon {
  float: left;
}

Here is what this looks like:


And this is what it looks like if I remove float: left:



When I use float:left with a JPG instead of an SVG, the JPG is fine (it is not vertically crushed like the SVG is).

Is there a way to float SVGs without crushing them? Or do I need to convert them to PNG or JPG (I'm trying to avoid this because A) I scale the images at several points in the text and B) the transparency breaks sometimes when using PNG)?