eleventy-plugin-svg-embed

A plugin for 11ty that, through a shortcut, allows you to include an SVG image either as an embed or as a file

Installation

Available on npm:

npm install @saiballo/eleventy-plugin-svg-embed --save

Add the plugin to your eleventy.config.js:

const svgImg = require("@saiballo/eleventy-plugin-svg-embed");

module.exports =  function(eleventyConfig) {

	eleventyConfig.addPlugin(svgImg);
};

Options Parameters

You can add an options object to the plugin configuration. Below is the complete list of available parameters.

module.exports =  function(eleventyConfig) {

	eleventyConfig.addPlugin(svgImg, {
		"includeExt": false,
		"embed": true,
		"defaultSize": 100
	});
};

Parameters

// set this to true if you want to include file extension is shortcut code
"includeExt": false,

// true | false. if set to "true", the code will be embedded in the page; otherwise, the img src tag will be used
"embed":  true

// default size of image if you don't use a css class or declare sizes
"defaultSize": 100

Usage

In your template you can add a shortcut (example is for Nunjucks);

{% svgImg "path/to/your/image/logo" %}

For every image you can add some data (i.e. accessibility)

{% svgImg "path/to/your/image/logo", "css-class another-css-class", {embed: true, title: "svg title", desc: "svg desc", size:[500,500], stroke: "grey", fill: [["#ff0000", "#999"], ["#19450E", "#333"]], "stroke-width": [[2,1]] }  %}

As you can see you can add css class list as second parameter of the shortcut.

The third parameter is a object with which you can customize some data and colors too (all keys are optionals):

• embed: overwrite the embed option in plugin config
• title: for accessibility purposes you can provide a title
• desc: for accessibility purposes you can provide a desc
• size: an array for width and height of the image (or you can provide only one dimension for both. i.e. [100])
• stroke: you can provide one value (named or hex code) or an array. In the first case, all the "stroke" attributes found in the paths will be replaced. In the second case, the first value of each array will be searched in the "stroke" attributes and replaced with the second value of the same array.
• fill: you can provide one value (named or hex code) or an array. In the first case, all the "fill" attributes found in the paths will be replaced. In the second case, the first value of each array will be searched in the "fill" attributes and replaced with the second value of the same array.
• stroke-width: you can provide one value or an array. In the first case, all the "stroke-width" attributes found in the paths will be replaced. In the second case, the first value of each array will be searched in the "stroke-width" attributes and replaced with the second value of the same array.

Changelog

1.0.1

• Added support for the color attributes stroke, fill, and stroke-width

Team ARMADA 429

• Lorenzo "Saibal" Forti

License