xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

SVG namespace & preview bug

error

This XML file does not appear to have any style information associated with it. The document tree is shown below.

bad xml close tag

Ok

---

solution & svg namespace

<?xml version="1.0" encoding="UTF-8"?>
<svg width="976px" height="471px" viewBox="0 0 976 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

responsive viewbox

    svgAutoConvert(svgStr) {
      const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
      // const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000">`;
      const xml = /<?xml[sS]*?>/i;
      let result = ``;
      result = svgStr.replace(xml,``);
      let index = result.indexOf(`>`);
      result = result.substr(index + 1);
      result = viewport + result;
      // log(`new result`, result);
      return result;
    },
    svgAutoScale(svgStr) {
      let result = ``;
      // 匹配任意字符 (s*Ss*)* 或 [sS]* ???
      const reg  = /[sS]*^<svg(s*Ss*)*>$/i;
      result = svgStr.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);
      log(`result`, result);
      return result;
    },

auto Svg Download

const autoSvgDownload = (filename = `live-map.svg`) =>{
  const svg = document.querySelector(`svg`);
  const html = svg.parentElement.innerHTML;
  // xml namespace, support browser open preview
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
${html}`;
  console.log(`xml`, xml);
  console.log(`encodeURIComponent(xml)`, encodeURIComponent(xml));
  const element = document.createElement('a');
  element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

---

demos

https://cdn.xgqfrms.xyz/svg/namespace/poly.svg

https://cdn.xgqfrms.xyz/svg/namespace/poly-bug.svg

---