Welcome to bridgetown-inline-svg 👋

SVG optimizer and inliner for Bridgetown

• Installation
  • Optional configuration options
• Usage
  • Optimizations
• Author
• Contributing
• Show your support
• 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", "~> 0.0.1"
end

Optional configuration options

Optimization is opt-in and can be enabled by adding this to your bridgetown.config.yml

svg:
  optimize: true

Usage

Use the Liquid tag in your pages :

{% svg /path/to/square.svg width=24 foo="bar" %}

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

<svg width=24 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 : You will generally want to set the width/height of your SVG or a style attribute, but anything can be passed through.

Paths with a space should be quoted :

{% svg "/path/to/foo bar.svg" %}
# or :
{% svg '/path/to/foo bar.svg' %}

Otherwise anything after the first space will be considered an attribute.

Liquid variables will be interpreted if enclosed in double brackets :

{% assign size=40 %}
{% svg "/path/to/{{site.foo-name}}.svg" width="{{size}}" %}

height is automatically set to match width if omitted. It can't be left unset because IE11 won't use the viewport attribute to calculate the image's aspect ratio.

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

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

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

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.

Author

👤 Andrew Mason

• Website: https://www.andrewm.codes
• Twitter: @andrewmcodes
• Github: @andrewmason

Contributing

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

Show your support

Give a ⭐️ if this project helped you!

Acknowledgement

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

License

Copyright © 2017-2020 Sebastien Dumetz Copyright © 2020 Andrew Mason

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.