Scalable Vector Graphics (SVG) in SharePoint Online communication sites - Weird resizing behavior

[Timothy Balk]

Has anyone used SVG images on pages in modern communication sites yet? I was curious if people were seeing problems like we are... SVG images placed on the pages will resize with unexpected results, they resize to be small when we would expect they would fit to the container they were placed into.

[#2]

@Timothy Balk - they used to work fine, we added a number of SVGs for our internal training site to be used for Quick Links images, but as of a couple of months ago they do not render correctly and currently resemble 8-bit sprites circa 1986.

Kinda glad to hear it's not just us.  Time to log a ticket.

[#3]

@OiDatsMyLeg I am having SVG issues, too ... and they're not ... they're weird.

I can add and update the site images for hub pages to SVG on *some* hub sites, but then others just *keep* resetting back to the dumb colour and letter combo. It's infuriating.

Permissions all set the same.

EDIT

Nope ... it's just now started stripping SVG site images on *all* hub sites.

Checking non-hub sites presently.

[#4]

So I've found a 'semi' work around ... which is going in to the /_layouts/15/prjsetng.aspx page (available on all site collections, even if it's not listed) and adding a square svg there. This works for parent hub sites all the time (use a long one), and the collections beneath it soooommmmmeeeetiiiimes (go square).

So ... yeah ... it takes for *some* of them ... but it still gets overridden by the absolutely stupid 'letter' image (2 letters from the site name) on some others. I'm not seeing a clear pattern here. Plus, that letter image is dog awful when you have the squared image on your main hub site. It just looks like amateur hour.

This is somewhat silly, and the inability to use it on SP pages at all is ridiculous (it puts a white background on every SVG :weary_face:).

[#5]

@Timothy Balk  I have tried using svg's for icons on quick link web parts (I wanted to create icons that resembled the standard MS icons). However, Sharepoint took several minutes to render the image, usually just giving up in the process. The very aggravating part was that every time I tried to upload another image, it would display the "recent images," including the offending svg file. The result is that sharepoint locked up for several minutes every time I tried to upload another image until I realized the problem. This occured in both Chrome and Edge. My take is that while MS Powerpoint can handle an svg, Sharepoint cannot. 

[#6]

Wow, I have not looked at this in a while. I'm going to revisit this and try it out again in various pieces to see what happens. That really bums me out that it's also degraded to the point that the SPO page experiences slow rendering.

[#7]

Any updates after your revisit? @Timothy Balk 

[#8]

No update. Our internal communications department has adapted and isn't using SVGs in any of the SPO content they produce.

[#9]

Hi,@Timothy Balk and @AAuras ... it should be much better now. ( this is the same Eliot as before! :grinning_face_with_sweat:)

I had actually forgotten my useful settings hack (so I'll reaffirm that back into my toolbox) but out of the box SVGs can work a lot better on sites.
 

You may still just get some finicky nonsense when dealing with sites that are *in* a hub ... I think ... but hopefully even those are OK now.

[#10]

I'll have to give it another shot. Completely, unrelated... I had to swap out our branding images in the M365 settings and noticed the SVG experience was working there. That made me think that I needed to circle back to this again.

Thanks for the heads-up!

[#11]

No probs, @Timothy Balk.

Yes, 100% for sure in the Branding section of Admin SVG should be used because anything else is going to be painful.

Also, if it helps, I've been doing a fair bit of SVG stuff lately, and you can actually create 'dark mode sensitive' SVGs by including a small amount of CSS to adhere to @media queries.