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.

Tally
  • 2,273
  • 2
  • 24
  • 55

4 Answers4

2

Able to load the SVG and see rendering after it is loaded. However, after that, the loaded SVG file will not be rendered and result in a blank space instead. Inspection of the page code shows that they use the tag to load the logo and this will not work.

https://stackoverflow.com/questions/10737166/chrome-not-rendering-svg-referenced-via-img-element

The reason for the issue is that the height and width flags are not set in the tag.

For instance setting this works

I was able to fix the issue by:

  1. Open SVG in text editor (e.g. Notepad)
  2. Include in the first SVG header code Width="80" Height="80" (perhaps can play with optimizing the size)
  3. Save file and upload. IT WORKS!

So the first tag of my SVG looks like this

<svg height="80" width="80" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.60458 114.60458">
GMCB
  • 121
  • 4
  • If the svg upload worked, but no svg icon is shown, this is the solution. In case the svg was saved by Adobe Illustrator, then the "responsive" option removes the height weight attributes, so keep it unchecked: https://graphicdesign.stackexchange.com/a/154492 – marcus Dec 19 '23 at 19:12
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

Sandro
  • 181
  • 4
  • 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 '21 at 09:59
1

Svgs work fine, you just have to define a width and height.

Jooks
  • 11
  • 1
0

My experience has shown me that an .svg file can be 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.

Tally
  • 2,273
  • 2
  • 24
  • 55