Skip to content

Embed SVG documents in your Middleman views and style them with CSS

License

Notifications You must be signed in to change notification settings

cantierecreativo/middleman-svg

Repository files navigation

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.

About

Embed SVG documents in your Middleman views and style them with CSS

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published