Problems with adding svg images in posts

Netlify CMS
1

Hello,
I am writting about a widget available in CMS that is responsible for adding images. I have a problem with the svg format, but other formats such as png, jpg work correctly. According to the documentation (https://www.netlifycms.org/docs/widgets/image/) svg should also be supported, but when such format is added in the article content its width is less than 50% of the content width (on a desktop). Other extensions are displayed on 100% width of the content and this is the result we want to achieve with svg.
I add a screenshot comparing png and svg display.

What can we do to make the svg also displayed at 100% width of the content?
I would appreciate your feedback.

image
image1033×681 117 KB

2

It looks like SVG is supported, since the image has been uploaded and it is appearing.

Styling wise how the image displays on your site is up to the code that builds your html and your CSS.

In this case that item may be coming out as an svg element and it’s possible you have styling that only targets img elements.

That’s all a wild guess though, if you link to the site it could be checked.

2 Likes
3

Hi Nathan,

thanks for the quick reply. This would make sense if we had different sets of rules per image types but that’s not the case. All of the images are implemented through the standard image widget in the Netlify CMS with no additional manipulation.

Currently we have a workaround which provides width: 100vh for img tags and helps us to retain the width we need. Me and Gumisia were actually wondering if anyone had similar problems with svg images. From our perspective the image widget should behave the same way no matter the image type.

4

SVGs usually behave differently due to their viewbox attribute. As Nathan has posted above, this has more to do with your site’s code than Netlify CMS because it is doing nothing except storing and retrieving content from your Git repo.

2 Likes
5

From our perspective the image widget should behave the same way no matter the image type.

To clarify: It does behave exactly the same. Like @hrishikesh said: in both cases it outputs data and that’s about its only job. You need to update your front-end css to style the svg images, just like you did with your image tag:

img, svg {
  width: 100%;
}
2 Likes
6

Allright, we’ll do that :slight_smile: Thanks for all the answers and your help, we really appreciate it!

1 Like