こんにちは、むろです。

最近ようやく業務で SVG を扱えるようになってきたので SVG をSprite化してくれる svgeez というgemを使ってみました。次に使うときに忘れないようにメモ。

svgを用意する

svgeezはsvgo(svgの不要な部分をいい感じに削除したりなんだりで軽くしてくれるやつです)を使ったbuildもしてくれるみたい(なんというジェントル)なので、 SVGはイラレから何も考えずに吐き出したものを使ってみます。

ちなみに今回わたしが用意したのは f:id:murokaco:20160704133751p:plain こんな感じのやつです。

SVGの中身はこちら。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="140px" height="140px" viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve">
<polygon style="fill:#7BD3FF;stroke:#00537C;stroke-width:10;stroke-miterlimit:10;" points="112.076,103.874 78.432,95.029 
    52.073,117.729 50.089,82.999 20.354,64.944 52.771,52.325 60.754,18.466 82.773,45.397 117.441,42.526 98.632,71.79 "/>
</svg>

人様の前に出すには恥ずかしい内容(特にid="レイヤー_1")なのは目を伏せて。

gemをいれる

Gemfileに以下を記述します

gem 'svgeez'

このあと黒い画面でbundle install をターン！

SVGSpriteをBuildしてみる

assets配下に先ほど作ったSVGをおきます。 (今回わたしはapp/assets/images/icons/ にSVGを置いて、 app/assets/images/icons.svg にSpriteを作ってみます)

黒い画面で下記のコマンドをターン！

bundle exec svgeez build --source app/assets/images/icons  --destination app/assets/images/icons.svg --with-svgo

すると、app/assets/images/icons.svg にSpriteが生成されます。やったね！

実際に表示してみる

body内に下記を記述する

= raw Rails.application.assets.find_asset('icons.svg')

※slimで書いてます。

SVGを表示したいところに下記を記述する

svg
  use xlink:href="#icons-star"

どんなやつができるのか

<svg id="icons" style="display: none;" version="1.1"><symbol id="icons-star" viewBox="0 0 140 140">
<polygon style="fill:#7BD3FF;stroke:#00537C;stroke-width:10;stroke-miterlimit:10;" points="112.076,103.874 78.432,95.029 
    52.073,117.729 50.089,82.999 20.354,64.944 52.771,52.325 60.754,18.466 82.773,45.397 117.441,42.526 98.632,71.79 "/>
</symbol></svg>

こんなんでした。見られてだいぶ恥ずかしい部分(xml宣言とかイラレがgenerateしてるとかidがレイヤー_1とか)がごっそり消えててありがたやーーー( ˘ω˘)人

気をつける点

書き忘れてたけど、Railsです。
symbolに謎のprefixがつく(今回のは icons- )

ぐらいです。以上です。

追記

質問で、

= raw Rails.application.assets.find_asset('icons.svg')

は何を吐き出すのかと聞かれたのですが、確認したらインラインsvgでした(objectやimageタグではない)。 asachun、ご質問ありがとーーー( ˘ω˘)人

ムログ

SVG Sprite を svgeez で