Tips for optimizing SVG icon caching on an external CDN without encountering flash of missing icons

Question

Tips for optimizing SVG icon caching on an external CDN without encountering flash of missing icons

I've mastered the process of getting SVG icons to load on my website, but I am facing a challenge in meeting all the criteria listed below:

Need to be able to use SVG icons in CSS
Avoid any flash of missing icons (FOMI)
Minimize the initial page size
Ensure cached SVGs
Ability to utilize a CDN
Must support fill: currentColor for consistent text color matching, similar to icon-fonts
Bonus: Implement Pixel-aligning the SVGs for sharp appearance

To meet criteria 1, 2, 3, and 4, we can use an external sprite map as shown below:

<svg viewBox="0 0 100 100">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="/assets/sprite-4faa5ef477.svg#icon-asterisk-50af6"></use>
</svg>

However, due to the ongoing CORS issue with browsers (read more here), using a CDN is currently not possible.

We could potentially address this by implementing patches for support on external domains. Yet, this solution may not benefit CSS since it primarily monitors the DOM. Additionally, it triggers numerous failed requests to inaccessible files, one for each icon on the webpage.

If we intend to leverage a CDN, alternative methods such as inline SVG insertion (increasing page size without caching) or AJAX loading (leading to FOMI) can be considered.

Hence, are there any viable solutions that fulfill all 5 7 requirements?

In essence, I aspire for SVGs to offer the same convenience as icon-fonts; otherwise, the transition seems futile. While SVGs allow for varied colors and enhanced accessibility, achieving an optimal aesthetic and efficient loading has proven challenging.

html css ajax performance svg

Answer 1

Answer №1

My solution involves loading an SVG in an image element and utilizing it as an "old-school" image sprite, which appears to meet all the specified criteria. The only drawback is the potential loss of being able to modify specific sections of the SVG using CSS. However, this limitation does not seem to be a constraint in this case, and it is still possible to customize the entire icon, as demonstrated in my sample. I have even provided a fiddle and included a code snippet for reference.

In order to replicate a CDN setup, I created an SVG file and uploaded it to an image hosting service. If that service is no longer available in the future, I apologize to readers. The SVG file contains all icons grouped together (currently a black square, circle, and triangle). Unlike SVG sprite maps, the icons are embedded within the SVG itself rather than in the defs section. Combining multiple SVGs into one should be relatively straightforward, although I haven't explored tools to automate this process.

.icon {
  display: inline-block;
  vertical-align: top;
  width: 30px; /* adjust as needed */
  height: 30px;
  background-image: url('http://imgh.us/icons_36.svg');
  
  border: 1px solid #000; /* for visual aid */
}

/* sizes */
.icon.large {
  width: 50px;
  height: 50px;
  background-size: 150px auto;
}

/* positioning */
.icon.circle { background-position: -30px 0; }
.icon.large.circle { background-position: -50px 0; }
.icon.triangle { background-position: -60px 0; }
.icon.large.triangle { background-position: -100px 0; }

/* styles */
.icon.info {
  filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%);
}
.icon.highlight {
  filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%);
}

<span class="icon square"></span>
<span class="icon circle"></span>
<span class="icon triangle"></span>
<span class="icon circle highlight"></span>
<span class="icon triangle large info"></span>

Answer 2

My solution involves loading an SVG in an image element and utilizing it as an "old-school" image sprite, which appears to meet all the specified criteria. The only drawback is the potential loss of being able to modify specific sections of the SVG using CSS. However, this limitation does not seem to be a constraint in this case, and it is still possible to customize the entire icon, as demonstrated in my sample. I have even provided a fiddle and included a code snippet for reference.

In order to replicate a CDN setup, I created an SVG file and uploaded it to an image hosting service. If that service is no longer available in the future, I apologize to readers. The SVG file contains all icons grouped together (currently a black square, circle, and triangle). Unlike SVG sprite maps, the icons are embedded within the SVG itself rather than in the defs section. Combining multiple SVGs into one should be relatively straightforward, although I haven't explored tools to automate this process.

.icon {
  display: inline-block;
  vertical-align: top;
  width: 30px; /* adjust as needed */
  height: 30px;
  background-image: url('http://imgh.us/icons_36.svg');
  
  border: 1px solid #000; /* for visual aid */
}

/* sizes */
.icon.large {
  width: 50px;
  height: 50px;
  background-size: 150px auto;
}

/* positioning */
.icon.circle { background-position: -30px 0; }
.icon.large.circle { background-position: -50px 0; }
.icon.triangle { background-position: -60px 0; }
.icon.large.triangle { background-position: -100px 0; }

/* styles */
.icon.info {
  filter: invert(100%) sepia(100%) saturate(50000%) hue-rotate(90deg) brightness(70%);
}
.icon.highlight {
  filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(30deg) brightness(50%);
}

<span class="icon square"></span>
<span class="icon circle"></span>
<span class="icon triangle"></span>
<span class="icon circle highlight"></span>
<span class="icon triangle large info"></span>

Answer 3

Answer №2

To handle this situation, my recommendation is to implement data uris, as they enjoy excellent support from browsers. Tools like Grunticon or their online service Grumpicon can be helpful in this process.

This approach will generate 2 css files and 1 js, which can easily integrate with your Content Delivery Network (CDN).

The final output offers great flexibility and options for customization.

Answer 4

To handle this situation, my recommendation is to implement data uris, as they enjoy excellent support from browsers. Tools like Grunticon or their online service Grumpicon can be helpful in this process.

This approach will generate 2 css files and 1 js, which can easily integrate with your Content Delivery Network (CDN).

The final output offers great flexibility and options for customization.

Answer 5

Answer №3

I was facing a similar issue and came up with an unconventional solution that may not fully meet the FOMI requirement. It's actually a clever hack that helped me out of a tough spot. Essentially, this script replaces every img element in the DOM that includes an svg with inline SVG, allowing for customization of styles.

// This script swaps img tags with svg tags if they contain an svg source
// Enables direct manipulation of SVGs in the DOM
// 💡 Returns a Promise to execute tasks after fetching SVGs

let fetchSVGs = () => {

// Retrieves the SRCs of all SVGs
let parentImgs = Array.from(document.querySelectorAll('img')).map((img) => {
    if(img.src.endsWith('.svg')) {
        return img
    }
});

let promises = [];
parentImgs.forEach((img) => {
    promises.push(
        fetch(img.src).then((response) => {
            // Error handling
            if (response.status !== 200) {
                console.log('Looks like there was a problem. Status Code: ' +
                    response.status);
                return;
            }
            // Saves the SVG
            return response.text();
        })
    )
});

// All fetch() calls have been made
return Promise
    .all(promises)
    .then((texts)=> {
        texts.forEach((text, i) => {
            let img = parentImgs[i];

            let div = document.createElement('div');
            div.innerHTML = text;
            img.parentNode.appendChild(div);
            let svg = div.firstChild;
            img.parentNode.appendChild(svg);

            // Makes the SVG inherit the class from its parent
            svg.classList = img.className;

            // Removes unnecessary elements
            div.remove();
            img.parentNode.removeChild(img);

        })
    })
    .catch((error) => {
        console.log(error);
    })
};

On another note, I discovered a neat trick on Twitter today https://twitter.com/chriscoyier/status/1124064712067624960 where applying this CSS to a div allowed me to create a customizable svg icon that can be stored in a CDN

.icon-mask {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: red;
   -webkit-mask: url(https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/codepen.svg);
   -webkit-mask-size: cover;
}

Keep in mind that browser support for this technique is not yet universal.

I hope this information proves helpful to someone! 😄

Answer 6

I was facing a similar issue and came up with an unconventional solution that may not fully meet the FOMI requirement. It's actually a clever hack that helped me out of a tough spot. Essentially, this script replaces every img element in the DOM that includes an svg with inline SVG, allowing for customization of styles.

// This script swaps img tags with svg tags if they contain an svg source
// Enables direct manipulation of SVGs in the DOM
// 💡 Returns a Promise to execute tasks after fetching SVGs

let fetchSVGs = () => {

// Retrieves the SRCs of all SVGs
let parentImgs = Array.from(document.querySelectorAll('img')).map((img) => {
    if(img.src.endsWith('.svg')) {
        return img
    }
});

let promises = [];
parentImgs.forEach((img) => {
    promises.push(
        fetch(img.src).then((response) => {
            // Error handling
            if (response.status !== 200) {
                console.log('Looks like there was a problem. Status Code: ' +
                    response.status);
                return;
            }
            // Saves the SVG
            return response.text();
        })
    )
});

// All fetch() calls have been made
return Promise
    .all(promises)
    .then((texts)=> {
        texts.forEach((text, i) => {
            let img = parentImgs[i];

            let div = document.createElement('div');
            div.innerHTML = text;
            img.parentNode.appendChild(div);
            let svg = div.firstChild;
            img.parentNode.appendChild(svg);

            // Makes the SVG inherit the class from its parent
            svg.classList = img.className;

            // Removes unnecessary elements
            div.remove();
            img.parentNode.removeChild(img);

        })
    })
    .catch((error) => {
        console.log(error);
    })
};

On another note, I discovered a neat trick on Twitter today https://twitter.com/chriscoyier/status/1124064712067624960 where applying this CSS to a div allowed me to create a customizable svg icon that can be stored in a CDN

.icon-mask {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: red;
   -webkit-mask: url(https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.0.1/codepen.svg);
   -webkit-mask-size: cover;
}

Keep in mind that browser support for this technique is not yet universal.

I hope this information proves helpful to someone! 😄

Answer 7

Answer №4

If you're looking to improve caching, give the HTML5 app cache a shot. https://www.example.com/html5_app_cache.html

Answer 8

If you're looking to improve caching, give the HTML5 app cache a shot. https://www.example.com/html5_app_cache.html

Tips for optimizing SVG icon caching on an external CDN without encountering flash of missing icons

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

using CSS to position elements that are generated dynamically

Encase every picture within a div and add a numerical label in front of it

Can you use "or" or "not" syntax with CSS input type selectors?

Ways to create a fading effect on an image without the need for an additional div

"Looking to spice up your website with a dynamic background-image

What are the best methods for extracting real-time data from Yahoo Finance streaming services?

Having issues with $_POST not retrieving values from .post

The content of XMLHttpRequest is accessible via the property response

Update the .erb code with Ajax after successfully creating the object

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

utilizing the 'v-for' directive for creating a stylish CSS grid

Guide to implementing the onchange event in JavaScript for this specific scenario

Achieving Equal Column Height and Proper Margins in Bootstrap 4: A Comprehensive Guide

Changing the size of an image in an HTML5 canvas

What is the reason for browsers changing single quotation marks to double when making an AJAX request?

Resource loading failed due to the XMLHttpRequest restriction

When making an asynchronous call, only the initial character is shown in the (HTML) listbox elements

Tips for reducing the impact on performance caused by cookie consent code

When completing a form submission, make sure to eliminate the %5B%5D from the

How do I insert a variable into my email content using PHP?