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

%3CLINGO-SUB%20id%3D%22lingo-sub-558934%22%20slang%3D%22en-US%22%3EScalable%20Vector%20Graphics%20(SVG)%20in%20SharePoint%20Online%20communication%20sites%20-%20Weird%20resizing%20behavior%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-558934%22%20slang%3D%22en-US%22%3E%3CP%3EHas%20anyone%20used%20SVG%20images%20on%20pages%20in%20modern%20communication%20sites%20yet%3F%20I%20was%20curious%20if%20people%20were%20seeing%20problems%20like%20we%20are...%20SVG%20images%20placed%20on%20the%20pages%20will%20resize%20with%20unexpected%20results%2C%20they%20resize%20to%20be%20small%20when%20we%20would%20expect%20they%20would%20fit%20to%20the%20container%20they%20were%20placed%20into.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-558934%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-977032%22%20slang%3D%22en-US%22%3ERe%3A%20Scalable%20Vector%20Graphics%20(SVG)%20in%20SharePoint%20Online%20communication%20sites%20-%20Weird%20resizing%20behavio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-977032%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F228093%22%20target%3D%22_blank%22%3E%40Timothy%20Balk%3C%2FA%3E%26nbsp%3B-%20they%20used%20to%20work%20fine%2C%20we%20added%20a%20number%20of%20SVGs%20for%20our%20internal%20training%20site%20to%20be%20used%20for%20Quick%20Links%20images%2C%20but%20as%20of%20a%20couple%20of%20months%20ago%20they%20do%20not%20render%20correctly%20and%20currently%20resemble%208-bit%20sprites%20circa%201986.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EKinda%20glad%20to%20hear%20it's%20not%20just%20us.%26nbsp%3B%20Time%20to%20log%20a%20ticket.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-995187%22%20slang%3D%22en-US%22%3ERe%3A%20Scalable%20Vector%20Graphics%20(SVG)%20in%20SharePoint%20Online%20communication%20sites%20-%20Weird%20resizing%20behavio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-995187%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F439719%22%20target%3D%22_blank%22%3E%40OiDatsMyLeg%3C%2FA%3E%26nbsp%3BI%20am%20having%20SVG%20issues%2C%20too%20...%20and%20they're%20not%20...%20they're%20weird.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20add%20and%20update%20the%20site%20images%20for%20hub%20pages%20to%20SVG%20on%20*some*%20hub%20sites%2C%20but%20then%20others%20just%20*keep*%20resetting%20back%20to%20the%20dumb%20colour%20and%20letter%20combo.%20It's%20infuriating.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPermissions%20all%20set%20the%20same.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EEDIT%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3ENope%20...%20it's%20just%20now%20started%20stripping%20SVG%20site%20images%20on%20*all*%20hub%20sites.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChecking%20non-hub%20sites%20presently.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1016845%22%20slang%3D%22en-US%22%3ERe%3A%20Scalable%20Vector%20Graphics%20(SVG)%20in%20SharePoint%20Online%20communication%20sites%20-%20Weird%20resizing%20behavio%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1016845%22%20slang%3D%22en-US%22%3E%3CP%3ESo%20I've%20found%20a%20'semi'%20work%20around%20...%20which%20is%20going%20in%20to%20the%20%3CFONT%20face%3D%22courier%20new%2Ccourier%22%3E%2F_layouts%2F15%2Fprjsetng.aspx%3C%2FFONT%3E%20page%20(available%20on%20%3CSTRONG%3Eall%3C%2FSTRONG%3E%20site%20collections%2C%20even%20if%20it's%20not%20listed)%20and%20adding%20a%20square%20svg%20there.%20This%20works%20for%20parent%20hub%20sites%20%3CEM%3E%3CSTRONG%3Eall%3C%2FSTRONG%3E%20the%20time%3C%2FEM%3E%20(use%20a%20long%20one)%2C%20and%20the%20collections%20beneath%20it%26nbsp%3B%3CEM%3Esoooommmmmeeeetiiiimes%3C%2FEM%3E%20(go%20square).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20...%20yeah%20...%20it%20takes%20for%20*some*%20of%20them%20...%20but%20it%20still%20gets%20overridden%20by%20the%20absolutely%20stupid%20'letter'%20image%20(2%20letters%20from%20the%20site%20name)%20on%20some%20others.%20I'm%20not%20seeing%20a%20clear%20pattern%20here.%20Plus%2C%20that%20letter%20image%20is%20dog%20awful%20when%20you%20have%20the%20squared%20image%20on%20your%20main%20hub%20site.%20It%20just%20looks%20like%20amateur%20hour.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20somewhat%20silly%2C%20and%20the%20inability%20to%20use%20it%20on%20SP%20pages%20at%20all%20is%20ridiculous%20(it%20puts%20a%20white%20background%20on%20every%20SVG%20%3Aweary_face%3A).%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

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.

5 Replies

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

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

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:).

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

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.