Takes a website and creates a SVG of it

html to svg.js

Element.prototype.getDirectDesc = function () {
  const descendants = Array.from(this.querySelectorAll("*"));
  const directDescendants = descendants.filter(
    (ele) =>
      ele.parentElement === this &&
      !["script", "iframe"].includes(ele.nodeName.toLowerCase())
  );
  return directDescendants;
};

function getSVG(fromEle, isChild) {
  if (isChild) {
    svg += `<g class="${fromEle.nodeName.toLowerCase()} asContainer">`;
  }
  if (fromEle.getDirectDesc().length > 0) {
    const children = fromEle.getDirectDesc();
    for (ele of children) {
      const style = getComputedStyle(ele);

      if (
        ele.getDirectDesc().length > 0 &&
        !["script", "iframe", "svg"].includes(ele.nodeName.toLowerCase())
      ) {
        getSVG(ele, true);
      } else {
        svg += getElement(ele);
      }
    }
  } else {
    svg += getElement(fromEle);
  }
  if (isChild) {
    svg += `</g>`;
  }
}

function getElement(ele) {
  const BBOX = ele.getBoundingClientRect();
  const width = parseInt(BBOX.width);
  const height = parseInt(BBOX.height);
  const left = parseInt(BBOX.left);
  const top = parseInt(BBOX.top);
  if (width === 0 || height === 0) {
    return "";
  }
  if (["img", "picture", "svg"].includes(ele.nodeName.toLowerCase())) {
    return `<image href="http://dummyimage.com/${width}x${height}" y="${top}" x="${left}" height="${height}" width="${width}" />`;
  } else {
    return `<text x="${left}" y="${top}">${ele.textContent.trim()}</text>`;
  }
}
var svg = "";
function generateSVGOfPage() {
  const { width, height } = document.body.getBoundingClientRect();
  svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`;
  getSVG(document.body);
  svg += "</svg>";
  return svg;
}

copy(generateSVGOfPage(document.body));