SVG links not working on live site

Site URL: https://www.redmondfunding.com/

For some reason the SVG links for this website aren't showing up on the live site but showing on the editor. It's the arrows on the right side of the accordion.
 

on this page: https://redmond-funding-group.squarespace.com/loan-programs
pw: redmond

I just need another set of eyes on this. I think that it might be because I'm using a :after pseudo class but why would that be a problem?

I'm not seeing any arrows. Please post the CSS for your effect. Also where is the code installed? Custom CSS? Page header code injection for the page?

Hi @creedon ! Thanks for responding.

I have uploaded the files in a separate page (thats not linked) so I can use the URL in the CSS:

Heres all the CSS for this accordion section on this page (specifically .tab-label::after) :

// Loan Programs Section
.programs__row input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Layout */
.programs__row {
  display:flex;
}

.programs__row .programs__col {
  flex:1;
}

.programs__row .programs__col:last-child {
  margin-left: 1em;
}

/* Accordion styles */
.tabs {
  overflow: hidden;
}
.tab {
  width: 100%;
  border-bottom: 1px solid white;
  overflow: hidden;
}

.tab:first-child{
    border-top: 1px solid white;
}

    .tab-label {
      display: flex;
      justify-content: space-between;
      padding: 2.5rem;
      cursor: pointer;
      align-items: center;
       transition: all .35s ease;
    }

    /* Icon */
    .tab-label::after {
      content: url(/s/dropdown-arrow.svg);
      width: 3em;
      height: 3em;
      text-align: center;
      transition: all .35s ease;
      vertical-align: middle;
    }

    .tab-content {
      background: #0071BE;
      color: white;
      max-height: 0;
      padding: 0 2.5em;
      transition: all .35s ease;
    }
    .tab-close {
      display: flex;
      justify-content: flex-end;
      padding: 1em;
      font-size: 0.75em;
      cursor: pointer;
    }


 /* :checked */
input:checked ~ .tab-content {
  //background: blue;
    max-height: 200vh;
    padding: 2em 2.5em;
  }

input:checked ~ .tab-label {
   //background: white;
}

input:checked + .tab-label::after {
  transform: rotate(90deg);
}


.tab-content .tab-button a{
  display: block;
}

UPDATE: I'm having issues linking ALL my SVG images, not just on this page. I feel like it might be a 7.1 template issue? Since I can't upload and SVG image to an image block or in the CSS File Manager, I must upload it on a separate page and use the link to the image. I've done this several times before in the past but for some reason on this website it isn't working. I've reached out to SqSp Help Email to see if they can shed any light on the issue of a link to a file in the file manager not working.

Here is an error I'm seeing when I try to load the svg.

It appears that only some files types are allowed to be served via the method you've used.

Which seems odd to me as svg is popular and SS uses svg themselves. Why prevent users from uploading/storing/downloading these files anywhere in SS, SS?

Hello @dearnaomichan,

Thanks for posting your question!

This issue is currently an expected behavior. 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. 

Feel free to leave a comment if you have any additional questions!

I have a paid account and my custom css to svg image files are still not showing outside of the Custom CSS tab

Ok,  so SS does not make this easy so here's the solution:
After uploading your .svg file as a link, you will get the dynamic path:

/s/image.svg

Note that this dynamic version WILL NOT WORK:
background-image: url("/s/image.svg");

Paste this after your url:

https://exampledomain.com/s/image.svg

This will redirect to a very long file path.
Copy that new url and use it in your custom CSS as the path:

background-image: url("https://static1.squarespace.com/static/60cbad31bb9e2415f759b216/t/60d1116d41b3160fdcad630f/1624314221425/image.svg");

You should be able to use this version as well, but keep in mind if your url changes or is in beta:

background-image: url("https://exampledomain.com/s/image.svg");

Really. All of this for a common file type like .svg 🙄

A long over due update, all my SVGs started working after we purchased a subscription and were not in the trial period anymore! 

Has anyone found a way around this because it's, quite frankly, rather ridiculous.

I've quite a few sites that we use SVG waves for and are hoping not to do long winded code-injection based ones every time.

@KwameAndCo

Ok I have a working solution to this problem, depending on your situation and skill level.

I created a seperate trial site using 7.0 and developer mode. Uploaded the SVG assets to the assets folder.

Then went back to my 7.1 site and replaced all the svg links in my css with the new urls from the developer site. You also have to put ?password=?YOURPASSWORD on the end of the link files for them to work since the 7.0 site is also in trial mode.

The workaround is pretty quick to implement and worth it for me, because otherwise I can't show the client any progress on the site because all the SVG's would be missing.

On 11/22/2021 at 3:45 AM, houghtoncreative said:

The workaround is pretty quick to implement and worth it for me, because otherwise I can't show the client any progress on the site because all the SVG's would be missing.

Clever... But a bi of a nightmare if you have quite a lot and need to track them all!

Especially if they're not all via the Custom CSS menu

On 11/25/2021 at 5:16 AM, KwameAndCo said:

Clever... But a bi of a nightmare if you have quite a lot and need to track them all!

Especially if they're not all via the Custom CSS menu

Yeah that could be harder. Do you use some sort of code editor like Atom? I put all my links in there, and then used a find and replace to automatically fix all the links. Rather than doing them one by one. I'll do the reverse once the site is live.

12 hours ago, houghtoncreative said:

Yeah that could be harder. Do you use some sort of code editor like Atom? I put all my links in there, and then used a find and replace to automatically fix all the links. Rather than doing them one by one. I'll do the reverse once the site is live.

Oooh that sounds good. Got a referral link or anything?

I recently discovered that half of my SVG problems come down to this one fault:

In other words, file uploads (for SVGs, among other types) can only be utilised with CSS when the website has been paid for. Which to be honest, is ridiculous. I use SVGs to replace the logo, social icons, accordion icons, add elements to buttons, etc...I think it's pretty standard for web at this point?! Does anyone have a way of getting SVGs to load when a site is in trial mode? 😂

Currently I host it from an external server. And after I have upgraded the site, I will upload to SS and change the url afterwards.

More specifically, I have a test site in WordPress, I upload files to that website and get svg file url. 😆