🚨 Archived

This gem has been replaced by ayushn21/bridgetown-svg-inliner and has now been archived since it will not be receiving any future updates as Bridgetown v1.0.0 approaches, which will not be compatible with this gem.

Upgrade to ayushn21/bridgetown-svg-inliner which has a MIT License and works with the latest versions of Bridgetown.

bridgetown-inline-svg

Installation

Run this command to add this plugin to your site's Gemfile:

bundle add bridgetown-inline-svg -g bridgetown_plugins

Or add the following to your Gemfile:

group :bridgetown_plugins do
  gem "bridgetown-inline-svg", "~> 1.1.0"
end

Optional Configuration

# bridgetown.config.yml

svg:
  # Whether to optimize the SVG files with svg_optimizer.
  #
  # Type: Boolean
  # Optional: true
  # Default: false
  optimize: true

Usage

This plugin provides the svg Liquid tag to your site.

Use the tag in your pages, collections, and components by passing the tag the name of a file:

{% svg path/to/my.svg %}

Note: The .svg file extension is required.

Attributes

Set attributes like you would in HTML:

{% svg assets/svg/square.svg width=24 class="text-indigo-600" foo="bar" %}

Bridgetown will include the SVG file in your output HTML like this:

<svg width="24" height="24" class="text-indigo-600" foo="bar" version="1.1" id="square" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24" >
  <rect width="20" height="20" x="2" y="2" />
</svg>

Note: Anything can be passed through, but we'd recommend setting valid attributes.

Height and Width

height is automatically set to match width if omitted, and vice versa. Height cannot be left unset because IE11 won't use the viewport attribute to calculate the image's aspect ratio.

Paths

Paths with a space should be quoted with single or double quotes:

{% svg "/path/to/my asset.svg" %}

If the path is not in quotes, anything after the first space will be considered an attribute.

Relative paths and absolute paths will both be interpreted from Bridgetown's src directory:

{% svg "/path/to/my.svg" %}
{% svg "path/to/my.svg" %}

Should resolve to /your/site/src/path/to/my.svg.

Variables

Liquid variables will be interpolated if enclosed in double brackets:

{% assign svg_name="my" %}
{% assign size=40 %}
{% svg "/path/to/{{svg_name}}.svg" width="{{size}}" %}

This is helpful inside of Liquid components!

Optimizations

Processing is done to remove useless data when enabled in the Bridgetown config:

metadata
comments
unused groups
Other filters from svg_optimizer
default size

If any important data gets removed, or the output SVG looks different from input, it's a bug. Please file an issue to this repository describing your problem.

It does not perform any input validation on attributes. They will be appended as-is to the root node.

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can take a look at the contributing guide.

Acknowledgement

This project was initially forked from jekyll-inline-svg.

License

The following code is a derivative work of the code from the jekyll-inline-svg project, which is licensed GPLv3. This code therefore is also licensed under the terms of the GNU Public License, verison 3.

andrewmcodes/bridgetown-inline-svg