0

I wasn't certain if I should try asking on Serverfault or not, but I'll see if there are programing solutions first.

The "use" svg file in the following code does not cache on a Firefox 68esr browser:

<svg class="smallwhiteicon"><use href="sprites/solid.svg#comments"></use></svg>

I've confirmed that:

  • All the other files cache properly
  • The eTag for each file doesn't change upon page reload
  • There's an "Expires" header for all files on the page
  • I've restarted the Apache httpd server instance several times
  • I've tried messing around with the file being cached server side with MMapFile
  • Checked and double checked that SVGs are given expires headers

Is there a different programming approach I should take to resolve the caching issue?

I'm trying to optimize for speed, using about 5 different SVGs on the page.

I'm also trying to avoid using font files if possible (like the answers in this question state).

enter image description here enter image description here enter image description here

dark_st3alth
  • 183
  • 1
  • 8

1 Answers1

0

While not the best answer I can give to my own question, this solution is probably the best I can hope for.

I changed the <svg> tag to a <img> and pointed to the svg I wanted:

<img class="svgfilter" src="svgs/solid/comments.svg">

While the file still doesn't cache (somehow?) at least it is small enough that it wouldn't really matter:

enter image description here

Since I also wanted to change the color from black (as font awesome SVGs come like that) to white:

.svgfilter {
    width: 1em;
    height: 1em;
    margin-bottom: -2px;
    filter: invert(100%);
}
dark_st3alth
  • 183
  • 1
  • 8