Inline Svg Lazy Loader

Inline Svg Lazy Loader is a small weight JS library for improving performance of inline svg images.

Plugin use The Intersection Observer API to detect what svg is currently in viewport and after fetch it from link in data-src.

It takes an <img> with special class name and attributes and swap it on an inline <svg>. In this case you have possibility to change the styles of it with CSS/JS, manipulate hover/focus states, use CSS variables etc.

How to use

Download and Include in HTML

In dist folder you can find minified version of plugin. Download it and include in your HTML file or connect it via CDN. After, create new instance. Use tag with special class name js-lazy-inline-svg and attributes.

<script type="module" src="../dist/inline-svg-lazy-loader.min.js"></script>

OR

<script type="module" src="https://unpkg.com/[email protected]/dist/inline-svg-lazy-loader.min.js"></script>

<script type="module">
    const _ = new window.InlineSvgLazyLoader();
</script>

<img
        class="js-lazy-inline-svg"
        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxyZWN0IGZpbGw9IiNiM2IzYjMiIGhlaWdodD0iMTA1IiBpZD0icmVjdDI5ODciIHdpZHRoPSIxMDUiIHg9Ii0yIiB5PSItMiIvPgogICAgPHBhdGggZD0ibS0xLjE3LDEwMi4xN2wxMDMuMzQsLTEwMy4zNCIgZmlsbD0iI2ZmZmZmZiIgaWQ9InBhdGgzMDAxIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNy44OSIvPgogICAgPHBhdGggZD0ibS0xLjE3LC0xLjE3bDEwMy4zNCwxMDMuMzQiIGZpbGw9IiNmZmZmZmYiIGlkPSJwYXRoMzAwMyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjcuODkiLz4KICAgIDxyZWN0IGZpbGw9IiNiM2IzYjMiIGhlaWdodD0iMTMuNDMiIGlkPSJyZWN0Mzc3MyIgd2lkdGg9Ijc5LjMiIHg9IjExLjA4IiB5PSI0My45Ii8+CiAgICA8ZyBmaWxsPSIjZmZmZmZmIiBpZD0idGV4dDI5ODkiPgogICAgIDxwYXRoIGQ9Im0xNi40OCw0OC44M2MwLDAuNTcgLTAuMTUsMS4wNiAtMC40NCwxLjQ1Yy0wLjMsMC40IC0wLjcyLDAuNjggLTEuMjcsMC44M2MtMC4zMSwwLjA5IC0wLjg3LDAuMTMgLTEuNjksMC4xM2wwLDMuNThsLTEuNjEsMGwwLC04LjQ1bDEuNywwYzAuNzQsMCAxLjI5LDAuMDUgMS42NiwwLjE1YzAuNTgsMC4xNiAxLjAyLDAuNDYgMS4zMSwwLjkzYzAuMjQsMC4zOCAwLjM1LDAuODQgMC4zNSwxLjM3em0tMS41NSwwYzAsLTAuMzIgLTAuMTMsLTAuNTYgLTAuMzgsLTAuNzFjLTAuMTksLTAuMTEgLTAuNTMsLTAuMTcgLTEuMDIsLTAuMTdsLTAuNDYsMGwwLDEuNzNsMC41MSwwYzAuNjQsMCAxLjA0LC0wLjEzIDEuMjEsLTAuMzdjMC4wOSwtMC4xMyAwLjEzLC0wLjI5IDAuMTMsLTAuNDdsMC4wMSwweiIgaWQ9InBhdGgzNzc2Ii8+CiAgICAgPHBhdGggZD0ibTIyLjAxLDU0LjgzbC0zLjk1LDBsMCwtOC40NWwxLjYxLDBsMCw2LjkxbDIuMzQsMGwwLDEuNTNsMCwwLjAxeiIgaWQ9InBhdGgzNzc4Ii8+CiAgICAgPHBhdGggZD0ibTMwLjY4LDU0LjgzbC0xLjY3LDBsLTAuNjYsLTEuNzRsLTMuNDQsMGwtMC42OSwxLjc0bC0xLjY3LDBsMy4yNiwtOC40NWwxLjYzLDBsMy4yNSw4LjQ1em0tMi45NCwtMy4zMWwtMS4xMiwtMi45bC0xLjEyLDIuOWwyLjI0LDB6IiBpZD0icGF0aDM3ODAiLz4KICAgICA8cGF0aCBkPSJtMzkuNjksNDcuODdsLTEuMTIsMS4wN2MtMC43NywtMC44IC0xLjYzLC0xLjIxIC0yLjU4LC0xLjIxYy0wLjgxLDAgLTEuNDksMC4yOCAtMi4wNSwwLjgzYy0wLjU1LDAuNTUgLTAuODIsMS4yMyAtMC44MiwyLjA0YzAsMS4xNiAwLjQ3LDIgMS40MSwyLjUzYzAuNDUsMC4yNSAwLjk1LDAuMzcgMS40OSwwLjM3YzAuNTEsMCAwLjk5LC0wLjExIDEuNDEsLTAuMzJjMC4zNSwtMC4xOSAwLjczLC0wLjQ4IDEuMTUsLTAuODlsMS4wOSwxLjEzYy0wLjU4LDAuNTYgLTEuMTQsMC45NyAtMS42NiwxLjIyYy0wLjU4LDAuMjYgLTEuMjUsMC40IC0yLjAxLDAuNGMtMS4zMSwwIC0yLjM5LC0wLjQxIC0zLjIyLC0xLjI0Yy0wLjg0LC0wLjgzIC0xLjI1LC0xLjkgLTEuMjUsLTMuMjFjMCwtMS43MiAwLjc0LC0yLjk5IDIuMjEsLTMuODJjMC43MSwtMC40IDEuNDcsLTAuNTkgMi4yOSwtMC41OWMxLjQ4LDAgMi43MSwwLjU2IDMuNjgsMS43bC0wLjAxLC0wLjAxeiIgaWQ9InBhdGgzNzgyIi8+CiAgICAgPHBhdGggZD0ibTQ1LjcxLDU0LjgzbC00LjYxLDBsMCwtOC40NWw0LjYxLDBsMCwxLjU3bC0zLjAyLDBsMCwxLjUybDMuMDIsMGwwLDEuNTVsLTMuMDIsMGwwLDIuMjJsMy4wMiwwbDAsMS41OGwwLDAuMDF6IiBpZD0icGF0aDM3ODQiLz4KICAgICA8cGF0aCBkPSJtNTMuMjgsNTQuODNsLTEuNjIsMGwwLC0zLjdsLTIuODIsMGwwLDMuN2wtMS42MywwbDAsLTguNDVsMS42MywwbDAsMy4xOWwyLjgyLDBsMCwtMy4xOWwxLjYyLDBsMCw4LjQ1eiIgaWQ9InBhdGgzNzg2Ii8+CiAgICAgPHBhdGggZD0ibTYzLjU2LDUwLjYzYzAsMS4yMyAtMC40MiwyLjI3IC0xLjI2LDMuMTNjLTAuODQsMC44NSAtMS44NywxLjI4IC0zLjEsMS4yOGMtMS4yNCwwIC0yLjI5LC0wLjQzIC0zLjE0LC0xLjI4Yy0wLjg1LC0wLjg2IC0xLjI3LC0xLjkxIC0xLjI3LC0zLjE2YzAsLTAuOCAwLjE5LC0xLjU0IDAuNTgsLTIuMjJjMC4zOSwtMC42OCAwLjkzLC0xLjIyIDEuNjIsLTEuNjJjMC42OCwtMC40IDEuNDIsLTAuNTkgMi4yMSwtMC41OWMxLjIzLDAgMi4yNiwwLjQ0IDMuMTEsMS4zMWMwLjg0LDAuODcgMS4yNiwxLjkyIDEuMjYsMy4xNGwwLDAuMDF6bS0xLjYxLC0wLjAxYzAsLTAuOCAtMC4yNiwtMS40NyAtMC43OSwtMi4wM2MtMC41NCwtMC41NiAtMS4yLC0wLjg1IC0xLjk5LC0wLjg1Yy0wLjgxLDAgLTEuNDgsMC4yOCAtMiwwLjg1Yy0wLjUxLDAuNTUgLTAuNzcsMS4yMyAtMC43NywyLjA1YzAsMC45NCAwLjMzLDEuNjcgMSwyLjIxYzAuNTIsMC40MyAxLjEyLDAuNjQgMS43OSwwLjY0YzAuNzgsMCAxLjQ0LC0wLjI4IDEuOTcsLTAuODVjMC41MSwtMC41NSAwLjc4LC0xLjIyIDAuNzgsLTIuMDJ6IiBpZD0icGF0aDM3ODgiLz4KICAgICA8cGF0aCBkPSJtNjkuMDIsNTQuODNsLTMuOTUsMGwwLC04LjQ1bDEuNjEsMGwwLDYuOTFsMi4zNCwwbDAsMS41M2wwLDAuMDF6IiBpZD0icGF0aDM3OTAiLz4KICAgICA8cGF0aCBkPSJtNzYuOTUsNTAuNzJjMCwxLjMzIC0wLjQxLDIuMzggLTEuMjIsMy4xNWMtMC40NiwwLjQzIC0xLjAxLDAuNzEgLTEuNjYsMC44NWMtMC4zNywwLjA3IC0xLjAxLDAuMTEgLTEuOSwwLjExbC0xLjkzLDBsMCwtOC40NWwxLjkxLDBjMS4wNiwwIDEuODYsMC4xMSAyLjQzLDAuMzNjMC43NCwwLjI5IDEuMzMsMC44MyAxLjc4LDEuNjFjMC4zOSwwLjY4IDAuNTgsMS40OCAwLjU4LDIuNGwwLjAxLDB6bS0xLjYyLC0wLjA0YzAsLTEuODQgLTAuOTcsLTIuNzUgLTIuOTIsLTIuNzVsLTAuNTUsMGwwLDUuMzJsMC43NCwwYzAuNjMsMCAxLjA5LC0wLjA1IDEuNCwtMC4xN2MwLjQzLC0wLjE2IDAuNzcsLTAuNDcgMS4wMSwtMC45M2MwLjIxLC0wLjQgMC4zMiwtMC44OSAwLjMyLC0xLjQ3bC0wLjAxLDB6IiBpZD0icGF0aDM3OTIiLz4KICAgICA8cGF0aCBkPSJtODMuMSw1NC44M2wtNC42MSwwbDAsLTguNDVsNC42MSwwbDAsMS41N2wtMy4wMiwwbDAsMS41MmwzLjAyLDBsMCwxLjU1bC0zLjAyLDBsMCwyLjIybDMuMDIsMGwwLDEuNThsMCwwLjAxeiIgaWQ9InBhdGgzNzk0Ii8+CiAgICAgPHBhdGggZD0ibTkwLjEyLDU0LjgzbC0xLjc2LDBsLTEuOSwtMy41OGwtMC4xNSwwbDAsMy41OGwtMS42MSwwbDAsLTguNDVsMS43MSwwYzAuNzUsMCAxLjMsMC4wNSAxLjY2LDAuMTRjMC41NywwLjE1IDEsMC40NiAxLjMsMC45NGMwLjI0LDAuMzggMC4zNiwwLjg1IDAuMzYsMS4zN2MwLDEuMTEgLTAuNTQsMS44NSAtMS42LDIuMjRsMiwzLjc2em0tMS45NiwtNi4wMWMwLC0wLjM4IC0wLjE4LC0wLjY0IC0wLjUyLC0wLjc3Yy0wLjE2LC0wLjA1IC0wLjQ2LC0wLjA4IC0wLjg4LC0wLjA4bC0wLjQ0LDBsMCwxLjczbDAuNSwwYzAuNDIsMCAwLjczLC0wLjA0IDAuOTIsLTAuMTNjMC4yOSwtMC4xMyAwLjQzLC0wLjM4IDAuNDMsLTAuNzRsMC4wMSwweiIgaWQ9InBhdGgzNzk2Ii8+CiAgICA8L2c+Cjwvc3ZnPgo="
        data-src="./icons/camera.svg"
        width="100"
        height="100"
        alt
>

Demo →

Install via NPM

npm install inline-svg-lazy-loader

ES6 import

import InlineSvgLazyLoader from 'inline-svg-lazy-loader';

const loader = new InlineSvgLazyLoader();

If you want to change class name for initialization you can pass it as a parameter. You can also change loading class name. By default, it's js-svg-loading. You can change it via options. Also, you can use this class for adding animation for placeholder.

Example:

const loader = new InlineSvgLazyLoader('js-inline-svg', {
    loadingClass: 'js-loading'
});

HTML

<img
    class="js-lazy-inline-svg"
    src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxyZWN0IGZpbGw9IiNiM2IzYjMiIGhlaWdodD0iMTA1IiBpZD0icmVjdDI5ODciIHdpZHRoPSIxMDUiIHg9Ii0yIiB5PSItMiIvPgogICAgPHBhdGggZD0ibS0xLjE3LDEwMi4xN2wxMDMuMzQsLTEwMy4zNCIgZmlsbD0iI2ZmZmZmZiIgaWQ9InBhdGgzMDAxIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNy44OSIvPgogICAgPHBhdGggZD0ibS0xLjE3LC0xLjE3bDEwMy4zNCwxMDMuMzQiIGZpbGw9IiNmZmZmZmYiIGlkPSJwYXRoMzAwMyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjcuODkiLz4KICAgIDxyZWN0IGZpbGw9IiNiM2IzYjMiIGhlaWdodD0iMTMuNDMiIGlkPSJyZWN0Mzc3MyIgd2lkdGg9Ijc5LjMiIHg9IjExLjA4IiB5PSI0My45Ii8+CiAgICA8ZyBmaWxsPSIjZmZmZmZmIiBpZD0idGV4dDI5ODkiPgogICAgIDxwYXRoIGQ9Im0xNi40OCw0OC44M2MwLDAuNTcgLTAuMTUsMS4wNiAtMC40NCwxLjQ1Yy0wLjMsMC40IC0wLjcyLDAuNjggLTEuMjcsMC44M2MtMC4zMSwwLjA5IC0wLjg3LDAuMTMgLTEuNjksMC4xM2wwLDMuNThsLTEuNjEsMGwwLC04LjQ1bDEuNywwYzAuNzQsMCAxLjI5LDAuMDUgMS42NiwwLjE1YzAuNTgsMC4xNiAxLjAyLDAuNDYgMS4zMSwwLjkzYzAuMjQsMC4zOCAwLjM1LDAuODQgMC4zNSwxLjM3em0tMS41NSwwYzAsLTAuMzIgLTAuMTMsLTAuNTYgLTAuMzgsLTAuNzFjLTAuMTksLTAuMTEgLTAuNTMsLTAuMTcgLTEuMDIsLTAuMTdsLTAuNDYsMGwwLDEuNzNsMC41MSwwYzAuNjQsMCAxLjA0LC0wLjEzIDEuMjEsLTAuMzdjMC4wOSwtMC4xMyAwLjEzLC0wLjI5IDAuMTMsLTAuNDdsMC4wMSwweiIgaWQ9InBhdGgzNzc2Ii8+CiAgICAgPHBhdGggZD0ibTIyLjAxLDU0LjgzbC0zLjk1LDBsMCwtOC40NWwxLjYxLDBsMCw2LjkxbDIuMzQsMGwwLDEuNTNsMCwwLjAxeiIgaWQ9InBhdGgzNzc4Ii8+CiAgICAgPHBhdGggZD0ibTMwLjY4LDU0LjgzbC0xLjY3LDBsLTAuNjYsLTEuNzRsLTMuNDQsMGwtMC42OSwxLjc0bC0xLjY3LDBsMy4yNiwtOC40NWwxLjYzLDBsMy4yNSw4LjQ1em0tMi45NCwtMy4zMWwtMS4xMiwtMi45bC0xLjEyLDIuOWwyLjI0LDB6IiBpZD0icGF0aDM3ODAiLz4KICAgICA8cGF0aCBkPSJtMzkuNjksNDcuODdsLTEuMTIsMS4wN2MtMC43NywtMC44IC0xLjYzLC0xLjIxIC0yLjU4LC0xLjIxYy0wLjgxLDAgLTEuNDksMC4yOCAtMi4wNSwwLjgzYy0wLjU1LDAuNTUgLTAuODIsMS4yMyAtMC44MiwyLjA0YzAsMS4xNiAwLjQ3LDIgMS40MSwyLjUzYzAuNDUsMC4yNSAwLjk1LDAuMzcgMS40OSwwLjM3YzAuNTEsMCAwLjk5LC0wLjExIDEuNDEsLTAuMzJjMC4zNSwtMC4xOSAwLjczLC0wLjQ4IDEuMTUsLTAuODlsMS4wOSwxLjEzYy0wLjU4LDAuNTYgLTEuMTQsMC45NyAtMS42NiwxLjIyYy0wLjU4LDAuMjYgLTEuMjUsMC40IC0yLjAxLDAuNGMtMS4zMSwwIC0yLjM5LC0wLjQxIC0zLjIyLC0xLjI0Yy0wLjg0LC0wLjgzIC0xLjI1LC0xLjkgLTEuMjUsLTMuMjFjMCwtMS43MiAwLjc0LC0yLjk5IDIuMjEsLTMuODJjMC43MSwtMC40IDEuNDcsLTAuNTkgMi4yOSwtMC41OWMxLjQ4LDAgMi43MSwwLjU2IDMuNjgsMS43bC0wLjAxLC0wLjAxeiIgaWQ9InBhdGgzNzgyIi8+CiAgICAgPHBhdGggZD0ibTQ1LjcxLDU0LjgzbC00LjYxLDBsMCwtOC40NWw0LjYxLDBsMCwxLjU3bC0zLjAyLDBsMCwxLjUybDMuMDIsMGwwLDEuNTVsLTMuMDIsMGwwLDIuMjJsMy4wMiwwbDAsMS41OGwwLDAuMDF6IiBpZD0icGF0aDM3ODQiLz4KICAgICA8cGF0aCBkPSJtNTMuMjgsNTQuODNsLTEuNjIsMGwwLC0zLjdsLTIuODIsMGwwLDMuN2wtMS42MywwbDAsLTguNDVsMS42MywwbDAsMy4xOWwyLjgyLDBsMCwtMy4xOWwxLjYyLDBsMCw4LjQ1eiIgaWQ9InBhdGgzNzg2Ii8+CiAgICAgPHBhdGggZD0ibTYzLjU2LDUwLjYzYzAsMS4yMyAtMC40MiwyLjI3IC0xLjI2LDMuMTNjLTAuODQsMC44NSAtMS44NywxLjI4IC0zLjEsMS4yOGMtMS4yNCwwIC0yLjI5LC0wLjQzIC0zLjE0LC0xLjI4Yy0wLjg1LC0wLjg2IC0xLjI3LC0xLjkxIC0xLjI3LC0zLjE2YzAsLTAuOCAwLjE5LC0xLjU0IDAuNTgsLTIuMjJjMC4zOSwtMC42OCAwLjkzLC0xLjIyIDEuNjIsLTEuNjJjMC42OCwtMC40IDEuNDIsLTAuNTkgMi4yMSwtMC41OWMxLjIzLDAgMi4yNiwwLjQ0IDMuMTEsMS4zMWMwLjg0LDAuODcgMS4yNiwxLjkyIDEuMjYsMy4xNGwwLDAuMDF6bS0xLjYxLC0wLjAxYzAsLTAuOCAtMC4yNiwtMS40NyAtMC43OSwtMi4wM2MtMC41NCwtMC41NiAtMS4yLC0wLjg1IC0xLjk5LC0wLjg1Yy0wLjgxLDAgLTEuNDgsMC4yOCAtMiwwLjg1Yy0wLjUxLDAuNTUgLTAuNzcsMS4yMyAtMC43NywyLjA1YzAsMC45NCAwLjMzLDEuNjcgMSwyLjIxYzAuNTIsMC40MyAxLjEyLDAuNjQgMS43OSwwLjY0YzAuNzgsMCAxLjQ0LC0wLjI4IDEuOTcsLTAuODVjMC41MSwtMC41NSAwLjc4LC0xLjIyIDAuNzgsLTIuMDJ6IiBpZD0icGF0aDM3ODgiLz4KICAgICA8cGF0aCBkPSJtNjkuMDIsNTQuODNsLTMuOTUsMGwwLC04LjQ1bDEuNjEsMGwwLDYuOTFsMi4zNCwwbDAsMS41M2wwLDAuMDF6IiBpZD0icGF0aDM3OTAiLz4KICAgICA8cGF0aCBkPSJtNzYuOTUsNTAuNzJjMCwxLjMzIC0wLjQxLDIuMzggLTEuMjIsMy4xNWMtMC40NiwwLjQzIC0xLjAxLDAuNzEgLTEuNjYsMC44NWMtMC4zNywwLjA3IC0xLjAxLDAuMTEgLTEuOSwwLjExbC0xLjkzLDBsMCwtOC40NWwxLjkxLDBjMS4wNiwwIDEuODYsMC4xMSAyLjQzLDAuMzNjMC43NCwwLjI5IDEuMzMsMC44MyAxLjc4LDEuNjFjMC4zOSwwLjY4IDAuNTgsMS40OCAwLjU4LDIuNGwwLjAxLDB6bS0xLjYyLC0wLjA0YzAsLTEuODQgLTAuOTcsLTIuNzUgLTIuOTIsLTIuNzVsLTAuNTUsMGwwLDUuMzJsMC43NCwwYzAuNjMsMCAxLjA5LC0wLjA1IDEuNCwtMC4xN2MwLjQzLC0wLjE2IDAuNzcsLTAuNDcgMS4wMSwtMC45M2MwLjIxLC0wLjQgMC4zMiwtMC44OSAwLjMyLC0xLjQ3bC0wLjAxLDB6IiBpZD0icGF0aDM3OTIiLz4KICAgICA8cGF0aCBkPSJtODMuMSw1NC44M2wtNC42MSwwbDAsLTguNDVsNC42MSwwbDAsMS41N2wtMy4wMiwwbDAsMS41MmwzLjAyLDBsMCwxLjU1bC0zLjAyLDBsMCwyLjIybDMuMDIsMGwwLDEuNThsMCwwLjAxeiIgaWQ9InBhdGgzNzk0Ii8+CiAgICAgPHBhdGggZD0ibTkwLjEyLDU0LjgzbC0xLjc2LDBsLTEuOSwtMy41OGwtMC4xNSwwbDAsMy41OGwtMS42MSwwbDAsLTguNDVsMS43MSwwYzAuNzUsMCAxLjMsMC4wNSAxLjY2LDAuMTRjMC41NywwLjE1IDEsMC40NiAxLjMsMC45NGMwLjI0LDAuMzggMC4zNiwwLjg1IDAuMzYsMS4zN2MwLDEuMTEgLTAuNTQsMS44NSAtMS42LDIuMjRsMiwzLjc2em0tMS45NiwtNi4wMWMwLC0wLjM4IC0wLjE4LC0wLjY0IC0wLjUyLC0wLjc3Yy0wLjE2LC0wLjA1IC0wLjQ2LC0wLjA4IC0wLjg4LC0wLjA4bC0wLjQ0LDBsMCwxLjczbDAuNSwwYzAuNDIsMCAwLjczLC0wLjA0IDAuOTIsLTAuMTNjMC4yOSwtMC4xMyAwLjQzLC0wLjM4IDAuNDMsLTAuNzRsMC4wMSwweiIgaWQ9InBhdGgzNzk2Ii8+CiAgICA8L2c+Cjwvc3ZnPgo="
    data-src="./icons/camera.svg"
    width="100"
    height="100"
    alt
>

Configuration

• class - needs for plugin initialization. You can change it.
• src - base64 encoded svg image. It will be used as a placeholder. Should have size with the same ratio as original svg image.
• data-src - path to original svg image. Svg will be loading with XHRs, so it's limited by CORS policies of the browsers. You need to use svg images which hosted on your domain or to ensure that correct Access-Control-Allow-Origin headers are sent with the file.
• width/height - real size of <img>. It will be used for set sizes of original svg image. Needs because of performance reason.
• alt - needs because it's mandatory attribute for <img> tag.

Important!

You need to use data-src attribute with src because of the performance reason. In case you use only src attribute the image will be requested twice: once for initial load and secondly for requesting the svg markup. So to prevent such behavior need to use base64 placeholder in src attribute and path to real svg in data-src.

• data-remove-attrs - list of attributes which will be removed from svg.

data-remove-attrs="xmlns:xlink,version,id"

• data-add-attrs - list of attributes which will be added to svg.

data-add-attrs="{
    role: image,
    aria-label: camera icon
}"

• data-set-svg-size - set the same width and height for <svg> as for <img>. False by default.

data-set-svg-size="true"

• data-remove-scripts - remove all <script> tags and "on" events from svg. False by default.

data-remove-scripts="true"

LICENSE

MIT