Streaming live at 10am (PST)

Problem with svg file in the rich text element

Kindly ask for help

I’d like to put a image in the rich text. For some unknown reason the svg file cannot be wider than 266px. Why? The png file is ok.

file: https://preview.webflow.com/preview/shered?utm_medium=preview_link&utm_source=designer&utm_content=shered&preview=3d3a7b3d7a887d2e65e7f57ff0fa621e&mode=preview

SVG documents size don’t matter too much (it does but SVG are often meant to be resized on the fly) but they carry a size information nevertheless. Yours has a given width of 256px.

The RT element is set not to enlarge images passed their given size. That’s why your SVG don’t enlarge passed this size. Your PNG however has a nominal size of 550.

Fix: go back to your vector software, make a bigger artboard for your document, and export it as SVG again.

Hi @vincent and thanks for the replay.

Why do I have to make a larger document when I have the right size set in the current one, i.e. 550px

1 Like

Ok, so whatI said is probably right but I didn’t notice the SVG viewbox size bug.

I tested on my side and all the SVG I import into Webflow are set to 150px height and the appropriate width. If the SVG document is bigger, if it’s smaller, Webflow will set it to 150px height and the ViewBox values are ignored.

@cyberdave what do we do with this? Maybe it’s like this since the beginning of times but as I probably never used SVG inside of RT, I never noticed it. As far as I understand, at the moment, a SVG dragged into Webflow never get its native size, it’s enlarged to width:100% by default. Drag a PNG and it will sit in the viewport at its native size.

As SVG can be designed pixel perfect, shouldn’t they keep their native size by default when added?

image

image

I’ve put 3 SVG with various dimensions, higher or lower than 150, for testing, here:
https://sbx.webflow.io/svg-png-size

I’m still looking for help…

Thank you for every suggestion how I can insert bigger svg file into the rich text element

I can easily insert the bigger file with astroworld merchandise. You also try this is very helpful.