Share on FacebookTweet about this on TwitterShare on Google+

この記事は2015/2/11(水・祝)にD2DRAFT(Dev & Design Draft)主催で十三コワーキングを貸し切り行われた“SVG Start Meeting”で共有した情報のメモです。

開催にあたり

フロントエンドの技術の中で様々な演出が提案されるなか、レスポンシブ、レティナ対応、フラットデザインというキーワードからいろいろなサイトで採用が見られるようになったSVG。
Adobeの既存プロダクトなどへのSVGのハンドリングへの導入などを見ても、ウェブ制作の中での位置づけがより明確なものへとなってきています。
この会ではまずミーティングと称しSVGの制作ツールやハンドリングするJavaScriptも含めたライブラリー、実装に関する疑問や使いどころなどみなさんでお話できればと思います。

SVG Start Basic

まずローカルのMAMPやXAMP、既存のホスティング業者などでも以外とSVGのMIMEタイプが通っていない事が多いので最初につなづかないように.htaccessもしくはhttpd.confなどに追記しましょう。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

SVGを挿入するには、imgとして挿入、backgroundに挿入、インラインでincludeする、objectタグで挿入などの様々な手法があります。
ブラウザ対応はModernizrを使い


<svg> … </svg>
<div class=”fallback”></div>

.fallback {
display: none;
}
.no-svg .fallback {
background-image: url(logo.png);
}

のようにフォールバックする例をあげる事例が最も多く見られた。
基礎編のリンク集
http://css-tricks.com/using-svg/
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
http://www.webcreatorbox.com/tech/svg-vector/

ちなみに自動でフォールバックimageを作ってくれるらしいjQueryプラグインもあるのですが、まだ試せてません。
https://dirkgroenen.github.io/SVGMagic/

SVGのアクセスビリティに関する記事
http://www.a11yall.org/accessible-svg-practical-howto/

SVG Showcase

SVGの演出にはCSS、後に述べるsnap.svgやRaphaelなどのライブラリー,jQueryのプラグインなど様々な例があります。

css-tansition
http://ascii.jp/elem/000/000/901/901319/
http://tympanus.net/Tutorials/BorderAnimationSVG/
http://css-tricks.com/svg-line-animation-works/
http://codepen.io/lbebber/pen/LELBEo

snap.svg
http://tympanus.net/codrops/2014/12/15/elastic-svg-elements/
http://tympanus.net/Development/AnimatedSVGIcons/

jQuery plugin
http://lazylinepainter.info

SVGの記述飲みでアニメーションさせる事もできるようです。
ただオーサリングツールがないと、なかなか数字を並べてコーディングするのは生産性が問題ですね。
http://coliss.com/articles/build-websites/operation/work/svg-loaders.html
http://sample.atmarkit.jp/fux/1207/02/sample.xhtml

SVG Graphic Tool

SVGのグラフィックを作成するツールとしては、多くの制作者が使うIllustraor CCSketch、フリーのものではInkscapeなどがあります。
それ以外にもユーティリティ的に単一の機能をウェブなどで提供しているものもあります。

IllustratorやSkecthはレイヤーやオブジェクト名がそのままidとなり出力されます。IllustratorはCC2014から大幅に機能強化され、javascriptのbind、スタイルの同時書き出し、書き出し時の最適化などが可能です。

参考
http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

イラストレーターのクリッピングパスはSVGではclippathとなりmaskにはなりません。
clipptahとmaskの違いはこちら
https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Clipping_and_masking

SketchのmaskデータはきちんとSVGのmaskとして書き出されます。

ユーティリティ
http://svgcircus.com/
http://svgeneration.com/

3DソフトのBlenderなどもワイヤーフレームやフラットシェーディングした画像をSVGとして書き出すプラグインなどもあるようです。

SVG JS Library

SVGをハンドリングするJavascriptライブラリーではRaphaëlが先行し、Adobeがその後継ライブラリとしてSnap.svgをオープンソースでリリースしコードのShowcaseなどではSnap.svgを見かける事が多いように思います。
基礎的な構文はほとんど同じ書き方ができるようです。
まだ少ないですが、seen.jsのような3D表現ができるものも出てきています。

Snap.svg tutorial
http://snapsvg.io/start/
http://svg.dabbles.info/
http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml

SVG Animation Tool

SVGアニメーションをGUIで制作できるソフトウェアも、まだ発展途上ですがいくつか挙げることができます。
Edge Animateである程度のインタラクティブを作ることができます。
ただ同じAdobeですが、Edge Animate独自のDOMでSnap.svgではありません。
これからそのあたりが整理されるかもしれません。

参考
http://www.edgedocks.com/content/2013/12/build-shirt-designer-edge-animate-interactive-svg-and-edge-commons

アニメーションの作りやすさならFlashは確立されたものがあります。GoogleのSwiffyはFlashのアニメーションをSVGに書き出します。
Flash内のJSの書き出し、ActionScript3にも対応しかなりの機能をエクスポートできる。ただSVG書き出しを意識して作る事は前提とする。

https://www.google.com/doubleclick/studio/swiffy/