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.

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