Resize SVG in markdown

I’m trying to resize an image in my markdown column however the image only is displayed in the original size and if I try the Github resize format “=wxh” it doesn’t work:

'![]({} =40x40)'.format(app.get_asset_url('green_scoop.svg'))


To get around this I convert my images to png in a specific size, however is better to have these images in SVG.



How can I achieve this with SVGs?

Hi @OtavioAcc

I learned how to do this from this blog:
See the section on Use CSS And Special URL Parameters.

You can add a URL paramater:


Then adjust the size in the .css file:

img[src*="#thumbnail"] {

Worked for me!


Work perfectly for me!! Thank you a lot.

1 Like

Hi @AnnMarieW
Thanks to @raptorbrad I have learnt how to resize an image in markdown to the current width of the visible container:
img[src*=“#thumbnail”] {
width: 100%;
Now I’d like to “merge” both approaches and have the following logic: final size = min(actual image width, visible container width), which would prevent the image from being stretched beyond its normal size, thus avoid display artifacts.
Is there a way to do this logi in the css ?

I have tried the below which looks better though the image is still wider than the original
img[src*=“#article”] {
width: 100%;
max-width: min-content;

Hi @bsauvage
Try adding:

    height: auto;   

Hello! Somehow this doesn’t to change anything further than just adding the max-width argument.

Hi @bsauvage,

This worked for me… Try running this minimal example. If you change the screen size the text and the image scale.

css file in assets folder:

img[src*="#article"] {

from dash import Dash, dcc

app = Dash(__name__)

blog = """

# About This Image
Galaxy cluster SMACS 0723 is a technicolor landscape when viewed in mid-infrared light by NASA’s James Webb Space Telescope. Compared to Webb’s near-infrared image at right, the galaxies and stars are awash in new colors.



if __name__ == "__main__":

Thanks @AnnMarieW
So if I put the dcc.Markdown inside a dbc.Col(dbc.Row(…)) it doesn’t work (height:auto has no effect), and I need to use instead:
img[src*=“#article”] {
width: 100%;
max-width: min-content;

Then, I am still observing some stretching when the file is a png instead of a gif, in Chrome.
Does that make any sense?

No… can you make a minimal example that I can run?

Actually: it works as expected, the issue was with my system (Windows+Chrome) scaling/HDR settings/zoom settings!!!
So, problem solved! Thanks