https://takamatsu-orne.jp/theme/orne/assets/js/desvg.js

1(function() {
2    "use strict";
3
4    var desvg = function(selector, removeInlineCss) {
5        removeInlineCss = removeInlineCss || false;
6
7        var images,
8            imagesLength,
9            sortImages = {},
10
11            // load svg file
12            loadSvg = function (imgURL, replaceImages) {
13                // set up the AJAX request
14                var xhr = new XMLHttpRequest();
15                xhr.open('GET', imgURL, true);
16
17                xhr.onload = function() {
18                    var xml,
19                        svg,
20                        paths,
21                        replaceImagesLength;
22
23                    // get the response in XML format
24                    xml = xhr.responseXML;
25                    replaceImagesLength = replaceImages.length;
26
27                    // bail if no XML
28                    if (!xml) {
29                        return;
30                    }
31
32                    // this will be the <svg />
33                    svg = xml.documentElement;
34
35                    // get all the SVG paths
36                    paths = svg.querySelectorAll('path');
37
38                    if (removeInlineCss) {
39                        // if `removeInlineCss` is true then remove the style attributes from the SVG paths
40                        for (var i = 0; i < paths.length; i++) {
41                            paths[i].removeAttribute('style');
42                        }
43                    }
44                    svg.removeAttribute('xmlns:a');
45
46                    while(replaceImagesLength--) {
47                        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
48                    }
49                };
50
51                xhr.send();
52            },
53
54            // replace the original <img /> with the new <svg />
55            replaceImgWithSvg = function (img, svg) {
56                var imgID = img.id,
57                    imgClasses = img.getAttribute('class');
58
59                if (imgID) {
60                    // re-assign the ID attribute from the <img />
61                    svg.id = imgID;
62                }
63
64                if (imgClasses) {
65                    // re-assign the class attribute from the <img />
66                    svg.setAttribute('class', imgClasses + ' replaced-svg');
67                }
68
69                img.parentNode.replaceChild(svg, img);
70            };
71
72
73
74        // grab all the elements from the document matching the passed in selector
75        images = document.querySelectorAll(selector);
76        imagesLength = images.length;
77
78        // sort images array by image url
79        while (imagesLength--) {
80            var _img = images[imagesLength],
81              _imgURL;
82
83            if (_img.getAttribute('data-src')) {
84              _imgURL = _img.getAttribute('data-src')
85            } else {
86              _imgURL = _img.getAttribute('src')
87            }
88
89            if (sortImages[_imgURL]) {
90                sortImages[_imgURL].push(_img);
91            } else {
92                sortImages[_imgURL] = [_img];
93            }
94        }
95
96        // loops over the matched urls
97        for (var key in sortImages) {
98            if (sortImages.hasOwnProperty(key)) {
99                loadSvg(key, sortImages[key]);
100            }
101        }
102
103    };
104
105    window.deSVG = desvg;
106})();
107