XF 2.1 An SVG logo does not appear

[Stuart Wright]

If I choose an SVG file for the site logo, it doesn't appear because its rendered size is 0 x 0 pixels. This is Chrome on Windows.
If I use a PNG file, it's fine.
To make the SVG work, I have to add this to extra.less :

.p-header-logo
{
    &.p-header-logo--image
    {
        img
        {
            height: 34px;
        }
    }
}

Apologies if this isn't a bug or it's something specific to the AVForums XF2 sandbox.

 

[Chris D]

This sounds familiar and it may actually be related to the SVG itself.

For example if you removed the CSS and set the logo to https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg you should find that the logo will display normally (albeit slightly large as our default max-height is 200px).



I'm no SVG expert, but if I had to hazard a guess, I think the SVG needs to be exported with an explicit width/height. The current SVG starts with:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 265.8 50" style="enable-background:new 0 0 265.8 50;" xml:space="preserve">

But if you set it to:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 265.8 50" style="enable-background:new 0 0 265.8 50;" xml:space="preserve" width="1440" height="458">

Then it seems to work similarly to the car sample above:



Either way, you'll still need some custom CSS to style it how you want it.

 

[Stuart Wright]

Thanks Chris

 

[Stuart Wright]

Actually there is an Responsive option when saving an SVG in Illustrator. If that is ticked, it doesn't save the width or height attributes. Otherwise it does. If they are saved, CSS set width or height overrides them. So that poses the question as to whether it's best to save the explicit width and height in the SVG or not.

 

[Arty]

Don't use code exported from Illustrator. It is full of useless junk that will cause all kinds of errors.

Run it through SVGO. This should clean up that code: https://jakearchibald.github.io/svgomg/

 

[Stuart Wright]

Don't use code exported from Illustrator. It is full of useless junk that will cause all kinds of errors.

Run it through SVGO. This should clean up that code: https://jakearchibald.github.io/svgomg/

That's really good - thanks for the tip.

 

[Solari]

I've found if you set the size of the logo in the XF style basic logo options, it will show. It didn't until I did this.

Ray