[FIXED] How to display two SVG images on the same line in Jupyter notebook

Issue

I need to display a few svgs in the Jupyter notebook. I use the following library to get svgs.

import chess
from IPython.display import display
display(chess.Piece.from_symbol("R")), display(chess.Piece.from_symbol("P"))

and get something like this:

The problem is that both pieces are on the different lines. I need all of them to be on the same line. I also tried to group them together in html-string <div style="display: inline">one_piece</div><div style="display: inline">other_piece</div> but this has not improved it.

Any way to place both svgs on the same line?

Solution

Your second approach using html can work. Without any code from your side, I don't know for sure why it didn't. The DIVs may have wrapped to the next line because the SVGs were too wide.

Here's a working example. Note the CSS used to avoid wrapping.

Code:

from IPython.core.display import display, HTML
from chess import svg, Piece
piece_size = 150
piece_R_svg = svg.piece(Piece.from_symbol("R"), size=piece_size)
piece_P_svg = svg.piece(Piece.from_symbol("P"), size=piece_size)
no_wrap_div = '<div style="white-space: nowrap">{}{}</div>'
display(HTML(no_wrap_div.format(piece_R_svg, piece_P_svg)))

Raw output (run the snippet to see what you get in the notebook):

<div style="white-space: nowrap">
<svg height="150" version="1.1" viewBox="0 0 45 45" width="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="white rook" fill="#fff" fill-rule="evenodd" id="white-rook" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M9 39h27v-3H9v3zM12 36v-4h21v4H12zM11 14V9h4v2h5V9h5v2h5V9h4v5" stroke-linecap="butt"></path><path d="M34 14l-3 3H14l-3-3"></path><path d="M31 17v12.5H14V17" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M31 29.5l1.5 2.5h-20l1.5-2.5"></path><path d="M11 14h23" fill="none" stroke-linejoin="miter"></path></g></svg>
<svg height="150" version="1.1" viewBox="0 0 45 45" width="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g class="white pawn" id="white-pawn"><path d="M22 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38-1.95 1.12-3.28 3.21-3.28 5.62 0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" fill="#fff" stroke="#000" stroke-linecap="round" stroke-width="1.5"></path></g></svg>
</div>

Alternatives:

• Combine the SVGs directly into a single SVG and get around html.
• Change the css for the output class in the notebook. This would allow separate calls to display but would affect all output cells in the notbook.

Answered By - Jan