SVG#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn

pn.extension()

The SVG pane embeds a .svg image file in a panel if provided a local path, a string containing SVG markup, raw bytes or a file-like object, or will link to a remote image if provided a URL.

Parameters:#

For details on other options for customizing the component see the layout and styling how-to guides.

alt_text (str, default=None): Alt text to add to the image tag. The alt text is shown when a user cannot load or display the image.
caption (str, default=None): Optional caption displayed below the image.
embed (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.
encode (bool, default=True): Whether to base64 encode the SVG. Encoded SVGs scale with the pane but links inside the SVG will not work, while disabling encoding preserves links but prevents image scaling.
fixed_aspect (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.
link_url (str, default=None): A link URL to make the image clickable and link to some other website.
object (str or object): The SVG to display. Can be a string or pathlib.Path pointing to a local or remote file, a string containing SVG markup, raw bytes, a file-like object, or an object with a _repr_svg_ method.
target (str, default=’_blank’): Where to open the document linked in link_url, e.g. '_blank' or '_self'.

The SVG pane can be pointed at any local or remote .svg file. If given a URL starting with http or https, the embed parameter determines whether the image will be embedded or linked to:

pn.pane.SVG('https://panel.holoviz.org/_static/logo_stacked.svg', link_url='https://panel.holoviz.org', width=300)

We can scale the size of the image by setting a specific fixed width or height:

svg_pane = pn.pane.SVG('https://panel.holoviz.org/_static/logo_stacked.svg', width=150)
svg_pane

Like any other pane, the SVG pane can be updated by setting the object parameter:

svg_pane.object = "https://panel.holoviz.org/_static/jupyterlite.svg"

You can also use a responsive sizing_mode like 'stretch_width':

pn.pane.SVG('https://assets.holoviz.org/panel/samples/svg_sample2.svg', sizing_mode='stretch_width')

Note that by default the aspect ratio of the image is fixed, and so there may be a gap beside or below the image even in responsive sizing modes. To override this behavior set fixed_aspect=False or provide fixed width and height values.

Instead of a file or URL, the SVG pane also accepts a string containing SVG markup, which makes it easy to render SVGs generated in Python:

svg = """
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
  <rect width="200" height="100" rx="12" fill="#0072B5"/>
  <circle cx="50" cy="50" r="30" fill="#FDB71A"/>
  <text x="95" y="58" font-family="sans-serif" font-size="22" fill="white">Panel</text>
</svg>
"""

pn.pane.SVG(svg, width=200)

By default the SVG is base64 encoded and rendered in an <img> tag, which allows it to scale but disables any links embedded in the SVG itself. Setting encode=False inserts the SVG markup directly, so embedded links work but the SVG is rendered at its own size:

linked_svg = """
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="60">
  <a xlink:href="https://panel.holoviz.org" target="_blank">
    <rect width="220" height="60" rx="8" fill="#0072B5"/>
    <text x="20" y="38" font-family="sans-serif" font-size="20" fill="white">Click me</text>
  </a>
</svg>
"""

pn.pane.SVG(linked_svg, encode=False)

The caption parameter adds a caption below the image, alt_text provides a text alternative for screen readers and failed loads, and link_url makes the image a clickable link, opened in a new tab by default (see target):

pn.pane.SVG(
    'https://panel.holoviz.org/_static/logo_stacked.svg',
    width=300,
    caption='The Panel logo',
    alt_text='The Panel logo',
    link_url='https://panel.holoviz.org',
)

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).