So, why add the extra steps to load a SVG file from somewhere else? There are two major reasons: That’s what svg-loader is ultimately doing. Just copy and paste the SVG code in the HTML. Inlining is the simplest way to use SVGs.

Let’s examine them by answering the common questions. But there’s a good case for using SVGs this way. This approach may feel unorthodox because it introduces a JavaScript dependency and there are already multiple ways to use SVGs, including inline and from external sources. No extra code is needed.ĭynamically-added elements and change in attributes are also handled automatically, which ensures that it works with all web frameworks. However, svg-loader is easier to use as we only have to include the library somewhere in your code (either via a tag, or in the JavaScript bundle). Even for the first load, the performance is comparable to using tags. The library also caches the files locally, making the subsequent much faster. To use the library, the only thing I have to ensure is that files being served have appropriate CORS headers for XHRs to succeed. The fill attribute overrides fill of the original SVG file. I used data-src to set the URL of SVG file. Instead of creating a different file for every variation, I can have one file and customize the fill color: Simply put, it fetches the SVG files via XHR and loads them as inline elements, allowing you to customize the properties like fill and stroke, just like inline SVGs.įor example, I have a logo on my side-project, SVGBox.

To address this, I have created a library called svg-loader. You wouldn’t want to do something like this, would you? If we had a way to customize fill color of our logo above, we could pass any arbitrary color to render all the variations.

Even the colors in the main logo are slightly different. But in many cases, you have 2-3 variations of the same logo. That’s fine if your logo is going to look the same everywhere. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format’s customization powers.įor instance, let’s say you want to use your website’s logo stored as web-logo.svg. SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file.

Slack icon svg