add demo: inline svg

examples/svg-inline/.eleventy.js

@@ -0,0 +1,65 @@
+const transformDomPlugin = require('eleventy-plugin-transformdom');
+
+const staticConfig = {
+  dir: {
+    input: ".",
+    output: "_site",
+    // relative to input:
+    includes: "_includes",
+    data: "_data",
+  },
+};
+
+function getSvgInlineTransformer() {
+  const srcRoot = staticConfig?.dir?.input || '.'; // global
+  const fs = require('fs');
+  // https://stackoverflow.com/a/54579530/10440128
+  const getAllAttributes = el => (el.getAttributeNames()
+    .reduce((obj, name) => ({ ...obj, [name]: el.getAttribute(name) }), {}));
+  const domTransformer = {
+    selector: 'svg[src]', // <svg src="path/to/file.svg">
+    transform: ({ elements, document }) => {
+      for (const element of elements) {
+        const attributes = getAllAttributes(element);
+        console.dir({ svg_src_attributes: attributes });
+        const srcPath = srcRoot + '/' + attributes.src;
+        delete attributes.src;
+        attributes['data-srcpath'] = srcPath;
+        // read svg file + remove xml header
+        const srcText = fs.readFileSync(srcPath, 'utf8').replace(/<\?xml.*?\?>/, '');
+        const elementTemp = document.createElement('div');
+        elementTemp.innerHTML = srcText;
+        const elementNew = elementTemp.querySelector('svg');
+        const { width, height } = attributes;
+        if (width || height) {
+          elementNew.removeAttribute('width');
+          elementNew.removeAttribute('height');
+          if (width) elementNew.setAttribute('width', width);
+          if (height) elementNew.setAttribute('height', height);
+          delete attributes.width;
+          delete attributes.height;
+        }
+        if (attributes.class) {
+          const c1 = elementNew.getAttribute('class');
+          const c2 = attributes.class;
+          elementNew.setAttribute('class', (c1 ? `${c1} ${c2}` : c2));
+          delete attributes.class;
+        }
+        for (const [key, val] of Object.entries(attributes)) {
+          elementNew.setAttribute(key, val);
+        }
+        element.replaceWith(elementNew);
+      }
+    },
+  };
+  return domTransformer;
+}
+
+module.exports = function (eleventyConfig) {
+
+  const domTransformers = [];
+  domTransformers.push(getSvgInlineTransformer());
+  eleventyConfig.addPlugin(transformDomPlugin, domTransformers);
+
+  return staticConfig;
+};

examples/svg-inline/index.md

@@ -0,0 +1,37 @@
+# SVG inline demo
+
+This is a demo of
+[eleventy-plugin-transformdom](https://github.com/liamfiddler/eleventy-plugin-transformdom)
+which inlines SVG images.
+
+input:
+
+<textarea disabled cols="50" rows="6">
+<svg
+  src="example.svg"
+  width="400"
+  style="border: solid 1px black"
+/>
+</textarea>
+
+result:
+
+<svg
+  src="example.svg"
+  width="400"
+  style="border: solid 1px black"
+/>
+
+expected result source:
+
+<textarea disabled cols="50" rows="10">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 150 30"
+  width="400"
+  style="border: solid 1px black"
+  data-srcpath="./example.svg"
+>
+<text x="5" y="20">hello from SVG</text>
+</svg>
+</textarea>

examples/svg-inline/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "eleventy-plugin-transformdom-examples-svg-inline",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "eleventy --serve",
+    "build": "eleventy"
+  },
+  "author": "@liamfiddler",
+  "license": "MIT",
+  "devDependencies": {
+    "@11ty/eleventy": "^0.11.0",
+    "eleventy-plugin-transformdom": "../../"
+  }
+}