![]() ![]() 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. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |