SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. 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. By Shubham Jain.
For instance, let’s say you want to use your website’s logo stored as web-logo.svg. You can do:
<img src="/images/logo.svg" />
That’s fine if your logo is going to look the same everywhere. But in many cases, you have 2-3 variations of the same logo.
To address this, author has created a library called svg-loader. 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.
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. But there’s a good case for using SVGs this way. Let’s examine them by answering the common questions. Follow the link for the full break down. Nice one!
[Read More]