How to Use SVG in Eleventy
Eleventy's flexible, template-agnostic architecture means SVG handling adapts to whichever templating language your project uses.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG via Eleventy Shortcodes
A custom Eleventy shortcode (defined once in `.eleventy.js`) can read an SVG file from disk and inline its markup wherever the shortcode is called in any template — Nunjucks, Liquid, or Markdown — giving a consistent, DRY way to include icons across an 11ty project regardless of templating language.
- Custom shortcodes inline SVG markup consistently across template languages
- Defined once in .eleventy.js, usable everywhere in the project
- Avoids duplicating SVG markup across many individual template files
Generating an Icon Sprite at Build Time
For larger icon sets, an Eleventy build-time script (or plugin like `eleventy-plugin-svg-sprite`) combines individual SVG files into one sprite with `<symbol>` elements, referenced via `<use>` throughout the site — a single cached request serving every icon, generated fresh on each static build.
- Build-time sprite generation combines icons into one cached file
- eleventy-plugin-svg-sprite (or similar) automates this at build time
- The sprite regenerates automatically whenever the static site rebuilds
Frequently Asked Questions
How do I write a basic SVG-inlining shortcode in Eleventy?
In .eleventy.js, add eleventyConfig.addShortcode('svg', filename => fs.readFileSync(path.join('src/icons', filename), 'utf8')), then call {% svg "logo.svg" %} (Nunjucks) or the equivalent syntax in your templating language.
Does Eleventy's output need any special SVG optimization step?
Not by default — but adding SVGO as a build step (either standalone or via a plugin) before the shortcode reads the file ensures the inlined markup is clean and optimized in the final static output.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG