0

I'm SP Admin for SP Online, a colleague who's a graphic designer has given me some .svg files to use as site icons. I'm not very familiar with this file format, but understand that they render differently compared to something like a .png or .jpg file. I've used them successfully in SP 2013.

The advantage of using .svg files is that they would render per device, so if logging into Sharepoint on a tablet or mobile phone, the file would render accordingly to the available screen size. Has anyone had experience of using an .svg file as a site icon?

Hub Site Settings

Via the Hub Site Settings menu I can choose a Hub Site Navigation Logo:

pic of hub site navigation logo, showing that a .svg file can be uploaded here

In this screenshot you see that the .svg. file I can upload shows in File Explorer as a 'MS Edge HTML document', it is an .svg file though. I can upload this file and the picture does render (though it looks tiny).

html format

Change the Look

However, via the Change the Look menu/Header/Site Logo or Site Logo Thumbnail (see pic below),

enter image description here

  • I have no option to upload the same .svg picture file (the same one that shows as being an MS Edge HTML document). The only files I see as being available via the File Explorer dialogue are other .jpg and .png files.

It seems inconsistent to me that the .svg file can be used in the Site Hub menu, but not in the Change the Look menu. Does anyone else have the same experience as me and is there a workaround?

Update 1 (in response to Sandro)

There's a different behaviour in the two menus; the 'Edit Hub Site Settings' menu shows the .svg file (which it chooses to display as MS Edge HTML document). Yet in the 'Change the Look' menu it does not show .svg files without switching to see 'All Files' - as per Sandro's answer.

pic of hub site settings - defaults to 'Image Files' yet still shows the edge html / .svg file

I've saved the .svg as the Site Icon (to be displayed to the left of the site name), but it is not rendered (see 1st picture below). Although when looking at the code in Developer Mode in Chrome, it does recognise the picture and it displays it too when I hover over the part of the code!

Seems like a bug - in picture 2 below, it shows that

logoImg-54

has rendered size: 0 x 0 pixels

I've not made any manual changes to the code, this is all out of the box. I guess it's not such a big deal, it just means that I can't use .svg files for the site logo.

Picture 1 enter image description here

Picture 2 - hovering over in the code. enter image description here

Research

Link to a Microsoft forum, question on .svg files.

An old question from our beloved very own SP SE, but it's a bit old and is concerned with SP 2013 rather than SP Online.

1

I can use svg files using the Change the look on my test tenant. Is the option to select All files not available in the select file dialogue on your environment?

enter image description here

1
  • Ah, yes this option is there, thank you. This caught me out as the menu behaviour is different; I've added 'Update 1' to my question. Even though I could select the correct .svg file and save it, it will not display the file, instead it collapses that section of the page and shows a blank space.
    – Tally
    Jun 18 at 9:59
0

My experience has shown me that an .svg file can saved as the Site Logo, but it will not be rendered - see my question under the heading 'Update 1' for details.

I tested this in Chrome and Edge.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.