Resize SVG in markdown

Dash Python
1

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'))

image

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

'![]({})'.format(app.get_asset_url('green_scoop.png'))

image

How can I achieve this with SVGs?

2

Hi @OtavioAcc

I learned how to do this from this blog: https://www.xaprb.com/blog/how-to-style-images-with-markdown/
See the section on Use CSS And Special URL Parameters.

You can add a URL paramater:

'![]({})'.format(app.get_asset_url('green_scoop.svg#thumbnail'))

Then adjust the size in the .css file:

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}

Worked for me!

2 Likes
3

Work perfectly for me!! Thank you a lot.

1 Like
4

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 ?
Thanks!

5

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;
}

6

Hi @bsauvage
Try adding:

    height: auto;
7

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

8

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"] {
   width:100%;
   height:auto;
}


from dash import Dash, dcc

app = Dash(__name__)

blog = """
![webb_deep](https://user-images.githubusercontent.com/72614349/180828477-600d77a1-08c9-47a2-bb3e-89f1a3630355.gif#article)

# 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.

"""

app.layout=dcc.Markdown(blog)

if __name__ == "__main__":
    app.run_server(debug=True)

image
image494×784 94.5 KB

9

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?

10

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

11

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