Edited at

業務用SVGの使いかた

More than 3 years have passed since last update.


SVGを使う意味


1. Retinaでの画面のクオリティを上げるため

画像をしこたま用意して、Retinaで出し分けする方が低コストですが、

ファイル数が肥大化して管理が煩雑になります。


2. 動くUIをつくる

そもそも、UIのコンポーネントにPNG画像が使われている方が違和感だという思想が芽生えてきました。

Hoverで色が変わったり形が変わるUIComponentを作るために、imgdiv(background-image)を使う時代は終わらせましょう。


使い方

SVGの良さを活かすなら、inlineで埋め込む以外の選択肢はありません。

DOM感覚でいじれるのでみんなだいすきな$attrしましょう。


書き出し方

Illustratorだったら、普通に保存形式でSVGを選べば大丈夫です。

viewboxを原点からにしたかったら、新規ファイルから作らないとダメです。

イラレのだめなところは、SVG書き出し設定があんまり細かいところまで出来ないところです。

XML宣言まで指定されちゃうんで、jsから動的に動かそうとしたら、svgo噛ませるか、手動でXML宣言消さないとちゃんと動いてくれません。

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 19.0.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="280px" height="40px" viewBox="-339 261 280 40" style="enable-background:new -339 261 280 40;" xml:space="preserve">
~
</svg>

svgo噛ませたら

<svg xmlns="http://www.w3.org/2000/svg" width="280px" height="40px" viewBox="-339 261 280 40">

こう削ってくれます

sketchだったらsketch-toolからのsvgoかませれば自動化できます。らくちんちん。


埋め込み方


  • jadeだったら@include hoge.svg

  • 非同期だったら、$.get("hoge.svg",cb_append)

  • バリバリ使いたかったら、Snap.svg.js (Snapはrequireできないので注意)

  • 慣れてきたら直書き


注意点

widthとheightは指定してあげたほうが安全かもです。

Android2.0系では両方指定しないと勝手に伸縮された経験があります。つらい。


手書き

<svg xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="10" height="10"/>
<circle cx="10" cy="10" r="10"/>
</svg>

htmlを手書きできるひとだったら、これくらい造作も無いのではと思います。

さらっとHTMLの中にコレを書けるとニュージェネ感出てくると思います。

classとかつけちゃってCSSあてちゃってください。

hoverとかtransitionとかあてちゃって、イケてるComponent作ってください。


IE8対策

IE7は割りとガン無視されてきてる昨今ですが、8は最低限対応しろという視線を感じています。

こればっかりはしょーがないので、PNG画像をつくらないといけないですが、どうせなら楽したいですよね。

SVGEXPORT - (phantom使ってcanvasつかってってかんじっぽいです。あんまりよくなさそう。どうせならnode canvasつかえよーっていう)

imagemagick - 王道

鍵はサイズ指定になってきそう。

ここらへんは試してません(まて)

動きなどを担保する必要性がないならば、テキストで代替させるくらいの度量は必要な気がします。

ハンバーガーボタンMENU という表記にする。とか・・・(IE8使う層には適切なUI設計です!<棒)