When I use float:left, it crushes my SVGs vertically in Kindle Previewer and the macOS Kindle app.
Here is my HTML:
Here is my CSS:
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)?
Here is my HTML:
Code:
<p class="speechbubble chat-octopus"><span class="speechicon"><img src="../Images/file4.svg" alt="タコ"/></span>私たち</p>Code:
p.speechbubble img {
width: 2em;
height: 2em;
margin: 0em;
}
span.speechicon {
float: left;
}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)?