How to replace logo with SVG 7.1?

I have tried adding the code I usually use to replace a PNG logo with an SVG  but the header is blank and no logo appears. I have checked the name of the SVG link and that the file has uploaded properly. The code seems to just hide the png logo and not reveal the SVG. Can someone please help?

/* Hide the normal logo */
.header-title-logo img {
  visibility: hidden;
}

/* Set background image to be the SVG logo */
.header-title-logo a {
  background: url("/s/SDLOGOblack.svg") no-repeat left center;
  background-size: contain;
}

Hello there!

I tried testing the code on my own site, which is a 7.0 website. The CSS selectors vary only slightly (".header-branding-logo...") but I was still able to replicate the problem. Try these different possible solutions.

1) Use the full url for the background image SVG.

2) Upload a transparent .png file for the logo and use your code to overlay the .svg.

For me, the code you shared effectively removes the logo "block/container" entirely. If you were to add the visibility option back, you might see your SVG.

3) Try adding the full code with selectors instead of "...no-repeat left center".

.header-title-logo a {
    background-image: url(https://example/svg/file/blah/blah.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

You mentioned you've used this code before and that it works. Sometimes Squarespace is picky about which selectors you can use for different sections, pages, or elements. 

If none of these work, could you please share a url and visitor password so I can take a closer look. 

Thank you Jen! Hope these help.

You might find this article illuminating.

How to Scale SVG.

I am using the following code on mebelis.fr (password: showmethewebsite) to replace the mobile logo with it's SVG equivalent and it insists to not work! 

  .header-mobile-logo img {
      display: none;
    }
  .header-mobile-logo a {
      display: block;
      background-image: url('https://static1.squarespace.com/static/603f50b8fe2e7a54bdb63f55/t/6093f8885c959f28c150e42a/1620310152539/mebelis-LOGO-black.svg') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: left center;
      width: auto !important;
      height: 48px !important;
      max-height: 60px !important;
      border: solid 1px red;
  }

Any help here would be much appreciated...

14 minutes ago, helloVlad said:

I am using the following code on mebelis.fr (password: showmethewebsite) to replace the mobile logo with it's SVG equivalent and it insists to not work! 

  .header-mobile-logo img {
      display: none;
    }
  .header-mobile-logo a {
      display: block;
      background-image: url('https://static1.squarespace.com/static/603f50b8fe2e7a54bdb63f55/t/6093f8885c959f28c150e42a/1620310152539/mebelis-LOGO-black.svg') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: left center;
      width: auto !important;
      height: 48px !important;
      max-height: 60px !important;
      border: solid 1px red;
  }

Any help here would be much appreciated...

the svg url doesn't work. You can check. I see white blank

@tuanphan I can see. Very strange as that is the correct URL..?

https://mebelis.fr/_files (same password)

1 hour ago, helloVlad said:

@tuanphan I can see. Very strange as that is the correct URL..?

 

https://mebelis.fr/_files (same password)

Hi. How did you get svg url?

@tuanphan I click on the link. I'm seeing the same thing you are. Now I'm hosting the SVG on a different SQS site and it works. Serious glich

On 5/24/2021 at 7:23 PM, helloVlad said:

@tuanphan I click on the link. I'm seeing the same thing you are. Now I'm hosting the SVG on a different SQS site and it works. Serious glich

Can you share link to this site?

@tuanphan why?

Did anyone solve this? Having the same issues above with it not appearing. My code is the usual and I've done this plenty times but for some reason on a new build 7.1 its not working... (have also tried /s/bavs-inverted-logo.svg as url to no avail.)

/* SVG Logo */
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/6076e0876d2b4b1c79bc6dee/t/60ab7290fe96d458d9ee98d2/1621848720713/Bavs-inverted-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
/* END SVG Logo */

I think I may have found the answer to this... my site is still in trial mode before launch and this is an expected behaviour. Squarespace hd posted elsewhere saying due to recent changes, any sites in Trial Mode will not have external access to uploaded files. Once a site is upgraded to a paid plan, file access will work as normal. 

Seems bizarre though as it works in Safari...

The code you provided hides the PNG logo but doesn't display the SVG. Have you tried using the full URL for the SVG image in the background? Also, consider using a transparent PNG logo overlaid with the SVG.

On 2/29/2024 at 3:22 PM, BharatanaJ said:

The code you provided hides the PNG logo but doesn't display the SVG. Have you tried using the full URL for the SVG image in the background? Also, consider using a transparent PNG logo overlaid with the SVG.

BTW, troubleshooting CSS can be tricky, but don't worry, we'll figure it out! Have you double-checked the code to ensure everything is correctly linked and formatted? Sometimes a small typo can cause big issues.

Additionally, have you considered using an ai vector generator to convert your logo to SVG format? It could help ensure compatibility and streamline the process. Keep experimenting, and feel free to share more details if you need further assistance."