An Eleventy plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.
The eleventy-plugin-svg-contents is an exciting tool for developers using Eleventy who want to seamlessly integrate SVG files into their templates. This plugin allows you to retrieve the entire contents of an SVG file, making it straightforward to embed SVG graphics right within your project. Its simplicity and power lie in the ability to use familiar templating languages such as Nunjucks, Liquid, or Handlebars, ensuring that the integration feels natural and efficient.
This plugin not only enhances the visual appeal of your site through SVGs but also offers flexibility in customization. With options to style SVGs directly through class attributes and the ability to select specific SVG elements, this plugin stands out as a must-have for any Eleventy-powered project.
Easy Installation: Simply install via npm and add it to your Eleventy config file to get started within minutes.
Versatile Templating Support: Compatible with popular templating engines like Nunjucks, Liquid, and Handlebars for seamless integration.
Class Customization: Append a class to your SVG with the easy-to-use class option, allowing for streamlined styling.
Element Selection: Utilize an optional second argument to choose specific SVG elements using class, ID, or other selector strings.
Secure Rendering: Ensure your SVGs render correctly by using a safe filter in Nunjucks, allowing for full HTML compliance.
Content Grabbing: The svgContents filter grabs XML from an SVG file and instantly prepares it for embedding in your templates.
Future Enhancement: The planned stripTitle filter aims to remove SVG titles, improving SEO performance by preventing any potential issues related to duplicate titles.
