SVGシンボル化（SVGスプライト）
けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが） Delivering Octicons with SVG · GitHub
そろそろアイコンファイルの主流はSVGになりつつあるのかなぁ、と思っています。
スプライトというと、画像をいっぱいまとめて並べて、background-position で表示みたいなイメージになりがちですが、SVGの場合、ラスタライズしてしまうと全く良さがなくなるので、シンボル化、という方法で、スプライト画像のメリット＝ファイルをひとつにまとめて画像リクエストの回数を減らす、さらに svg アイコンのメリット = fill 属性で css で色変更、ということを達成できます。
1. Illustrator でつくった SVGアイコンをバラバラで書き出す
書き出し方はこちらが参考になる www.webcreatorbox.com d.hatena.ne.jp
パスを全部複合パスにして、1本にするだけでだいぶ軽くなりそう。 グループ化しただけになってて気づかなかったりするので注意。
※ 後述していますが、IE9で svg を単体で背景画像として読み込む場合は、書き出し詳細設定の「レスポンシブ」のチェックを外しておきましょう。
2. Gulp でシンボル化する
.pipe(svgSprite({
mode: {
symbol: true // Symble化
}
}))
いろいろ高機能なので、普通にSVGをスプライト画像にすることもできるけど、symbol 形式で書きだしてくれるので、これでバラバラで書きだしたSVGをひとまとめに。
.pipe(cheerio({
run: function ($, file) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
},
parserOptions: { xmlMode: true } // これがないと属性が全部小文字になって viewBox が viewbox になる
}))
書きだした sprite.symbol.svg のXMLから fill 属性（ベタ色） と stroke 属性（アウトライン色）を消すタスク。 Illustrator の段階で色をCMYK100%にして書き出すと。fill 属性がつかないけど、背景画像で個別に.svgを参照するときに色が黒いので、ベースのアイコンカラーが #000 以外の場合は、このタスクが必要。
parserOptions: { xmlMode: true } を最初つけてなくてドハマリしました。
.pipe(svgmin())
sprite.symbol.svg をミニファイする。
3. HTMLで読み込み
HTML
<svg class="icon"> <use xlink:href="/images/svg/sprite.symbol.svg#hogehoge" /> </svg>
.icon {
width: 20px;
height: 20px;
fill: red;
}
このままだと、useタグで別ファイルを読む込むのが IE と 古いEdge（今はサポートされてる）でサポートされてないらしい。
当たり前のことであるが，クロスドメインでのsvgファイルの参照は無効である．また，ie9においてはuse要素による外部svgファイルの参照ができないので注意が必要となる．
引用元："svg要素の基本的な使い方まとめ
MS Edgeでのサポート
Edge Dev のMSEdge on Win10 (Edge 20.10240.6384.0)で確認したところ、表示されませんでした。Edgeではuseを使った外部ファイルの読み込みがサポートされていないようなのですが、11月にリリースされたBuild 10586のEdgeHTML 13で機能が実装された とのことです。
引用元："Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方 – Rriver
4. svg4everybody をつかって、IE9 以上で use 要素の対応
IE10 から条件付きコメントが非対応になっているので、普通に svg4everybody.js を読み込ませます。
IE9で svg を単体で背景画像として読み込むときの注意点
background: url('../images/svg/icon_search.svg') 0 0 no-repeat;
background-size: 18px 18px;
input の背景とかに単体の svg を出したい場合、このように background-size を指定すればいけるかとおもいきや、何故か背景画像の要素の幅に応じて、横幅が伸び縮みした。 調べてみると、元の .svg の xmlコードに width と height 指定がないとそうなるという感じらしく。
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
引用元："css - Background-size with SVG squished in IE9-10 - Stack Overflow
IE9 対応する場合は、Illustrator の書き出し時に、レスポンシブのチェックを外しておかないといけないです。
4. svg4everybody から svgxuse に乗り換えてみる
svg4everybody でしばらく様子見していたのですが、時々、読み込まれない時があってモヤモヤしてたので、svgxuse という別のやつに乗り換えてみました。
svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lighweight polyfill for the very purpose of supporting
だがしかし、何故か IE9 だけ表示されてなかくてかなりハマって、どうやら、IE9 で表示させるためには、access-control-allow-origin ヘッダ（ドメインをまたいだリソースの参照を許可するやつ）をサーバに設定すればいけるっぽいということで、設定してみたものの表示されないという。。ことで、諦めていました。だれかおしえてください。
参考：JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】
その他参考:
SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA
Retina対応にSVGは本当に使えるのか？ – Rriver
ゲームミュージックと生存確認をかねた画期的な: svgよくやる間違い・まとめ
2016年に見た海外ドラマ
アンダー・ザ・ドーム
★★★☆☆
LOSTとかウォーキング・デッド的な食料と人間の生存をテーマにしてるものが好きなので、見てみたけど、最後の方、LOST的な霊的な宇宙人的な展開なって残念だった。途中のドームの中にドームとか、出たり入ったりとかあたりまでは良かった。女王とかあたりで萎えた。
ゲーム・オブ・スローンズ
★★★★★
ゲーム・オブ・スローンズは最高です。シーズン追加待ち。
トゥルー・ディテクティブ／二人の刑事
★★★★☆
これも最高。インターステラー主演してたマシュー・マコノヒーの怪演が話題だったらしいけど、ほんとにそれに尽きる。アメリカ南部の質感とか、そのあたりもだいぶ好みでした。全8話というコンパクトにまとめているところも作品性をグッとあげてる。
トゥルー・ディテクティブ／ロサンゼルス
★★☆☆☆
シーズン1の続編ではないシーズン2、人が死にすぎるのと、よくわからない内容で、そんなに良くなかった。
ホームランド
★★★★☆
あまり期待せずに見たのがよかったのか、すごく良かった。俳優もキャラクターもそれぞれ素晴らしくて、CIAにも興味がわいて、CIAの本を読んだけど、実際のCIAは、ドラマで描かれるようなかっこいいものではなくて、よくない団体であるということがわかった。こちらもシーズン3で一旦終わったような感じがあってキリはよかったが、まだ続いているらしく追加待ち。
ブリッジ ～国境に潜む闇
★★★☆☆
なんとなくホームランドに似てるから見たけど、わりとまぁまぁよかった。
タイラント －独裁国家－
★★★☆☆
ホームランドの流れでCIAと中東にも興味が沸いて、みた、架空の中東の国を舞台にしているので、英語なのがおかしいけど、アメリカ人の大使がCIAっぽい感じとか、クーデターの感じとか、CIAの本で読んだ感じのシーンが多々あって、結構楽しめた。シーズン2で終わるかとおもいきやめっちゃ途中だった。
ザ・パシフィック
★★★★☆
CIAの流れで最近は戦争にも興味があって見た。すごいお金かかっているらしく。よくできてる。
内容としては、第二次世界大戦の日本との戦いを主に描いていて、戦地になった南の方の島から、沖縄、硫黄島、という戦いの流れもわかりやすくて、実話を基にした（といっても、アメリカ目線ではあるが）いろいろ勉強になった。
戦争については、本もけっこう読んでいて、まだ別途まとめたいと思う。
バンド・オブ・ブラザーズ
★★★☆☆
こちらは第二次世界大戦のナチスドイツとの戦いをメインに描いている、ザ・パシフィックがシーズン2で、こちらがシーズン1的な位置づけのようだ。
こちらも ザ・パシフィック 同様に、実話を元にしているが、始まる前に当事者のインタビューが入っていて、より実話感がある。個人的にお気に入りのシーンは、スピアーズ中尉が敵陣地の反対側にいる部下に命令を伝えるために、敵がいる中を走り抜けていって戻ってくるシーン。
position: fixed; してるのに、親要素の相対っぽい感じになる
position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。
transform: translateY(0);
もうちょっと調べてみると、translateY、ではなく、"Transform" してる要素の中では、position: fixed; は absolute 的なふるまいをするということ。
それは、
This is because the transform creates a new local coordinate system, as per W3C spec:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
引用元："css3 - webkit css 'transform3d' + 'position: fixed' issue - Stack Overflow
ということらしい。
なんとなく和訳すると、Transform は、ローカル viewport 的なものを生成する。
position: fixed; が、viewport に対しての固定座標に配置されるので、なるほどという感じ。
See the Pen postion:fixed not working with Transform by yuji nakagawa (@nakagaw) on CodePen.
これでよく問題になるのは、CSSのみでモーダルをやって、Transition の Visibility で表示・非表示してるときとかに、普通なら場所に依存せずに置けるけど、固定で真ん中に出したい場合、親要素の外に出したりしないといけなかったりする。
あと、大事なことですが、IE9以下では CSS3 の Transition 自体がサポートされていないので、position: fixed; すると position: fixed; されます。
消えるときのアニメーションがなくてもよいのであれば、display: none; と Animation の組み合わせで同じようなことはできそうです。
See the Pen PNoMBE by yuji nakagawa (@nakagaw) on CodePen.
上の話とは違うけど、z-index も同じような感じで、けっこうややこしいときある。
