When I use
<html>
<body>
<p>
<img style="float:right" src="image1.svg">
</p>
<p>
<img style="float:right" src="image2.svg">
</p>
<p>
text...
</p>
</body>
</html>
with image1.svg containing
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
viewBox="0 0 200 200"
version="1.1">
<g>
<path d="M 10 10 L 190 10 L 100 190 z"
fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>
and image2.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
viewBox="0 0 200 200"
version="1.1">
<g>
<path d="M 10 10 L 190 10 L 190 190 L 10 190 z"
fill="cyan" stroke="blue" stroke-width="3" />
</g>
</svg>
the two SVG images are placed side-by-side despite the </p><p>. Replacing these with </br> does not help. How do I force the two images to be placed above one another? Needless to say, I would like to avoid building a composition of the two images.
If you really want to have them floated individually, you want to add
clear: right;to the style for both of them.If you’re happy to float them both together, then wrap their enclosing paragraphs in a single DIV and float that to the right.