bridgetown-inline-svg

Installation
Optional Configuration
Demo
Usage
Contributing
Acknowledgement
License

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

Demo

bridgetown-inline-svg-starter

This starter can be used to reproduce issues as well as provide an example of the plugin's usage.

Usage

This plugin provides the svg Liquid tag to your site.

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

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

Note: The .svg file extension is required.

Attributes

Set attributes just like you would in HTML.

For example:

{% 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 only setting valid attributes.

Height and Width

height is automatically set to match width if omitted, and vice versa. Height specifically can't 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. So both:

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

Should resolve to /your/site/src/path/to/my.svg and are equivalent.

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 especially helpful inside of Liquid components!

Optimizations

Some processing is done to remove useless data when enabled:

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 also 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.