Middleman::Svg

Installation

Add this line to your application's Gemfile:

gem 'middleman-svg'

And then execute:

$ bundle install

Add this line to your config.rb:

activate :inline_svg

Usage

Styling a SVG document with CSS for use on the web is most reliably achieved by adding classes to the document and embedding it inline in the HTML. This gem adds a Middleman helper method (inline_svg) that reads an SVG document, applies a CSS class attribute to the root of the document and then embeds it into a view.

inline_svg "file.svg", class: "some-class"

Options

key	description
id	set a ID attribute on the SVG
class	set a CSS class attribute on the SVG
style	set a CSS style attribute on the SVG
data	add data attributes to the SVG (supply as a hash)
size	set width and height attributes on the SVG Can also be set using height and/or width attributes, which take precedence over size Supplied as "{Width} * {Height}" or "{Number}", so "30px*45px" becomes width="30px" and height="45px", and "50%" becomes width="50%" and height="50%"
title	add a <title> node inside the top level of the SVG document
desc	add a <desc> node inside the top level of the SVG document
nocomment	remove comment tags from the SVG document
preserve_aspect_ratio	adds a preserveAspectRatio attribute to the SVG
aria	adds common accessibility attributes to the SVG
aria_hidden	adds the aria-hidden=true attribute to the SVG

Example:

inline_svg(
  "some-document.svg",
  id: 'some-id',
  class: 'some-class',
  data: {some: "value"},
  size: '30% * 20%',
  title: 'Some Title',
  desc: 'Some description',
  nocomment: true,
  no_defs: true,
  preserve_aspect_ratio: 'xMaxYMax meet',
  aria: true,
  aria_hidden: true
)

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/cantierecreativo/middleman-svg. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.