SVG logo appears only when Custom CSS is open

Hey all, 

The logo was looking jagged in both PNG and JPEG files, regardless of style. So I found a way to replace the PNG with an SVG in these forums. The logo shows as long as I have Custom CSS open, but as soon as I exit and refresh the page, it disappears.

This is the code I'm using: 

.header-title-logo img {
visibility: hidden;
}
.header-title-logo a {
background-image: url(**/s/Logo.svg**);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

The URL is generated via Squarespace when I upload the file as a link. If anyone knows what I may be doing wrong, please let me know, thank you! 

Hi. Try using full url

eg. https://beaverhero.com/s/logo.svg

On 12/5/2020 at 7:30 AM, tuanphan said:

Hi. Try using full url

eg. https://beaverhero.com/s/logo.svg

Hey Tuan, I'm having the same issue on my site.

https://roadrunner-echidna-9e76.squarespace.com/semicustom

PW: ephemora2k22

I'm using a definition in place of the URL: earlier in my code I had defined @red-arrow-svg as '/s/Ephemora-Arrow.svg' and it worked only when the Custom CSS panel was open. I tried a few options:

• Redefining @red-arrow-svg as the whole URL: SVG doesn't appear on the live site nor with the CSS window open
• Not using a definition at all and just using the shorthand URL (starting with "/s/"): SVG doesn't appear on the live site nor with the CSS window open
• Not using a definition at all and just using the whole URL: SVG doesn't appear on the live site nor with the CSS window open

So, the only way I can get the SVG to appear, but then only when the Custom CSS window is open, is as I originally had the code, as seen below (using the @red-arrow-svg defined as the shorthand URL):

//List auto-layout//
.user-items-list-simple .list-item-content__title {
  font-family: trade-gothic-next;
  font-style: italic;
  text-transform: none;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] {
  background-color: @lavender;
}
//List link styling
section[data-section-id="6336cf19602266514b1dba78"] {
  .user-items-list-simple .list-item-content__description a {
    font-family:vintage-deco;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-style: normal;
    color: @red !important;
    text-decoration: none;
    &:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 0;
      margin-left: -1.8em;
      margin-bottom: -8px;
      transition: all 300ms ease-out;
    }
    &:hover:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 1;
      margin-left: 10px;
      margin-bottom: -8px;
    }
  }
}
//end List auto layout//

On 10/25/2022 at 8:31 PM, knockout said:

Hey Tuan, I'm having the same issue on my site.

https://roadrunner-echidna-9e76.squarespace.com/semicustom

PW: ephemora2k22

I'm using a definition in place of the URL: earlier in my code I had defined @red-arrow-svg as '/s/Ephemora-Arrow.svg' and it worked only when the Custom CSS panel was open. I tried a few options:

• Redefining @red-arrow-svg as the whole URL: SVG doesn't appear on the live site nor with the CSS window open
• Not using a definition at all and just using the shorthand URL (starting with "/s/"): SVG doesn't appear on the live site nor with the CSS window open
• Not using a definition at all and just using the whole URL: SVG doesn't appear on the live site nor with the CSS window open

So, the only way I can get the SVG to appear, but then only when the Custom CSS window is open, is as I originally had the code, as seen below (using the @red-arrow-svg defined as the shorthand URL):

//List auto-layout//
.user-items-list-simple .list-item-content__title {
  font-family: trade-gothic-next;
  font-style: italic;
  text-transform: none;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] {
  background-color: @lavender;
}
//List link styling
section[data-section-id="6336cf19602266514b1dba78"] {
  .user-items-list-simple .list-item-content__description a {
    font-family:vintage-deco;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-style: normal;
    color: @red !important;
    text-decoration: none;
    &:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 0;
      margin-left: -1.8em;
      margin-bottom: -8px;
      transition: all 300ms ease-out;
    }
    &:hover:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 1;
      margin-left: 10px;
      margin-bottom: -8px;
    }
  }
}
//end List auto layout//

 

Hi,

/s/ won't work on CSS box. It will work on Code Block, Page Header, Code Injection only

You need to use full url, something like this: https://abcxyz.squarespace.com/s/yourfilename.svg

Next, if your site is trial, sometime uploaded files won't work