Eleventy and SmartSVG™

Install Eleventy following the instructions at 11ty.dev.

mkdir smartSVG
cd smartSVG
npm init -y
npm install --save-dev @11ty/eleventy

Eleventy and Inline SVG

Eleventy's default Markdown engine (markdown-it) passes raw HTML straight through, so no extra configuration is required. Simply copy the SmartSVG™ as inline into your markdown file.

---
layout: base.njk
title: In-line in Markdown
---
# SVG as Include in HTML.

<svg
....
</svg>

Put the markdown file anywhere in your project (e.g. the project root) and serve the page with

npx @11ty/eleventy --serve

As an example copy the example file equivalent.md into your smartSVG directory and serve the page. Direct your browser to [http://localhost:8080/equivalent/] and observe the embedded smart SVG.

Alternatively have a look at the page here.

SmartSVG™ as Asset

Rather than inlining the markup, you can also serve the SmartSVG™ as a plain file. Unlike Hugo or Zola, Eleventy doesn't copy arbitrary files to the output by default — only recognized templates get processed — so add a passthrough copy for smart.svg in .eleventy.js:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("smart.svg");
};

Then reference it with standard Markdown image syntax:

![Equivalent](/smart.svg)

This is simpler than the inline version, but note two differences. The <title> inside the SVG is no longer exposed to assistive technology once the browser treats it as an opaque image, so give the Markdown image its own descriptive text as shown above. And any @media (max-width: ...) breakpoint inside the SVG now tracks the rendered size of the <img> element itself rather than the page's viewport, since a linked SVG image gets its own independent viewport. The prefers-color-scheme and forced-colors handling keep working exactly as before, since that logic lives entirely inside the SVG file itself.