data-src-svg.js

'use strict'

const svgsToLoad = document.querySelectorAll('svg[data-src]')

const loadSVGs = Array.from(svgsToLoad).map(svg => {
  fetch(svg.getAttribute('data-src'))
  .then(response => response.text())
  .then(svgCode => {
    const svgDoc = new DOMParser().parseFromString(svgCode, 'image/svg+xml')
    const newSVG = svgDoc.documentElement
    for (const attr of Array.from(svg.attributes))
      newSVG.setAttribute(attr.name, attr.value)
    svg.parentNode.replaceChild(newSVG, svg)
  })
})

Promise.all(loadSVGs).then(val => {
  const stretchSVGs = document.querySelectorAll('svg.stretch:not([preserveAspectRatio])')
  Array.from(stretchSVGs).map(svg => {
    if (!svg.hasAttribute('viewBox')) {
      const w = svg.getAttribute('width')
      const h = svg.getAttribute('height')
      svg.setAttribute('viewBox', `0 0 ${w} ${h}`)
    }
    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
  })
})