Recently I have tried to use more and more SVG in web projects, because they are more flexible to use in responsive web projects. The most common file formats that are used in SharePoint as a site logo are GIF, JPEG or PNG. I wondered if Sharepoint SVG supports as a site logo, I tried it out and it worked charmingly.
By using SVG you get a great new opportunity to use in SharePoint projects without modifying the master page.
What is SVG?
SVG is a graphic markup for the web defined by the w3C. SVG allows to create complex graphics by just by using code. The browser interprets the code and renders beautiful graphics and illustrations.
The fact that it is not a binary file format like JPEG, GIF or PNG makes it more efficient and easy to use in responsive design projects. It works independent of screen size and pixel density.
The web nowadays is full of SVG used for icons, fonts and all kinds of illustrations. SVG can be styled with CSS and animated trough CSS3 animations. For more information on animated SVG take a look at some amazing in depth information on A Guide to SVG Animations (SMIL)
Add SVG as a site logo
Enough about this file format, let’s get the hands dirty with SVG in SharePoint. I choose a hipster logo to be used.
This SVG Logo can be simply uploaded to SharePoint via the standard SharePoint dialog.
Once this has been done Sharepoint scale the logo correctly and display this SVG as a site logo. What I’ve out is that the dialog the logo doesn’t scale the SVG always right, but as wrong as the logo might look in the site logo dialog it looks correct at the right place.
Why SVG?
As mentioned before, every responsive web design should make more use of SVG because it saves a lot of headache. Scalable vector graphics always look good and sharp independent of the device and resolution you are looking at the logo.
The last thing to mention. Don’t try this with IE8 because it only supports IE 9 and higher. To see the full browser coverage take a look at can I use / svg
.