「823年に一度の奇跡のカレンダー」の季節が今年もやってきました

2015年の今年、2月はこのようなカレンダーになっています。

1日が日曜日で28日分が綺麗に4段で収まっていますね。こうした配置は少し珍しいな、と感じる方も多いのではないでしょうか？
すると、先日こんなツイートが投稿され、多数のRTを集めていました。

確かになかなかありませんが、823年というのはさすがに大袈裟で、少し調べるだけでも

2009年2月

2026年2月


と前後10年もせずにありますから、日付には定評のある東スポ（日付以外はあっていない、とも）のTwitterアカウントからもこうしてツッコミを受ける事態になっています。


この件そのものは、携帯電話やパソコンのカレンダー機能を使えばすぐに分かるだろ！……っていう即終了する話なんですが、問題はこのネタって定期的に湧いてくるんですよね。
さらに言えば日本だけでなく、世界的に。少なくとも英語圏でも何度も見かけます。
ということで、これまでの歴史を関連ツイートを中心に軽く振り返ってみましょう。

続きを読む

SVG画像にRDFでメタ情報を記述する：CCライセンスや派生元作品など

これはSVG Advent Calendar 2014の第23日目の参加記事です。昨日はしょん(id:syonx)さんの「SVGでキラキラをつくりたい（願望） - X X X」でした。キラキラとした3Dの球体をSVGで表現するコンテンツを構想中ということで、完成が楽しみですね。




はじめに

私はこれまで昨年、一昨年とSVG関連のAdvent Calendarに参加してきて毎度ファイルサイズの削減・最適化をテーマにしていました。

不要な記述は減らしてファイルサイズを抑える、というのは閲覧者の環境や転送速度を考えると重要な手法ではありますが、その一方で必要な情報はきちんと残す、というのも大切なことです。特にSVGは単なる画像ファイルではなく、XMLをベースとしているため、様々なメタ情報を記述することができます。
今回はSVGファイルに制作者の情報を書き記したり、ライセンスを示したり、また他のファイルや元になった写真との関連性を記述するやり方などを紹介していきます。

続きを読む

SVGOの最適化で困ること、そして複合パス

これはSVG Advent Calendar 2014の第10日目の参加記事です。


昨日は@kiyopikkoさんによる「SVGOを使ったSVGの軽量化方法（アニメーションさせるときの注意とか）｜2.IDEA」でした。
SVGOは最適化ツールとしてとても便利なのですが、その反面ちょっとやり過ぎて元のファイルから表示が崩れてしまうことがあります。そういった点についてもとても分かりやすく解説されているのでお勧めです。

最適化し過ぎるSVGOの困った部分

今回はせっかくなので便乗して、今日もSVGOに関する話題にしてみます。
そもそもSVGOって？という部分については上記の記事を参考にしてください。


SVGOで最も注意が必要なプラグインが「mergePaths」です。



例えばこうしたSVGファイルがあったとします。

適用前

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57z"/>
	<path d="M138 14L82 55l69 30z"/>
</svg>

Illustratorの用語で「アピアランス」という言葉がありますが、塗り色・線の色・線幅など全く同じアピアランスのオブジェクトが並んだ場合に、このプラグインは「複合パス化」します。
SVGのコード的にはこうなります。

適用後

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57zM138 14L82 55l69 30z"/>
</svg>

複合パス化することで複数のpath要素が一つにまとまりその分、記述量が抑えられます。
これが何十、何百個も適用されるとファイルサイズもかなり変わりますし、要素がまとまることでJavaScriptでのDOM操作の際にも高速化するのでメリットも大きいです。


ただし、注意する点もあります。
特にこういうケース。

適用前

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57z"/>
	<path d="M88 14L32 55l69 30z"/>
</svg>

図形が重なりあっていると

適用後

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
<style type="text/css">
	path{
		fill:#5BFF34;
		stroke:#008405;
		stroke-width:6;
	}
</style>
	<path d="M35 22c-38 0-40 56 1 57 46 1 41-57-1-57zM88 14L32 55l69 30z"/>
</svg>

このように元の表示から崩れてしまいます。
そうなっては困りますから、SVGOを利用する際には「mergePaths」プラグインは無効にして使うことをお薦めします。

><

SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？

これはSVG Advent Calendar 2014の参加記事です。
昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。
第3日目は私 id:rikuo が担当します。
（※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。
ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。

はじめに

SVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。
中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorからSVGを書き出す際に様々な設定が変更できますが特にSVGのファイルサイズと品質に大きく影響を与えるのが「小数点以下の桁数」です。
今回はこの項目をピックアップして、その仕組みや注意点などを解説していきます。

項目の場所と、初期値

Adobe IllustratorからSVGで保存する際には「SVGオプション」ダイアログが表示されます。

初めて利用する際には簡略な設定しか表示されませんから、「詳細オプション」をクリックして詳しい項目を出しましょう。

続きを読む

SVGをdata URI schemeに変換するとき文字化けしないように必要なこと

現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。
例えば、AppleのサイトではロゴにSVGを使っています。

https://www.apple.com/jp/iphone/



そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。

data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。
こうした使われ方も多いことから、data URI schemeを簡単に作成できるWebサービスもいくつかあります。

DataURL.net
ただし、SVGをdata URI schemeに変換する際は気をつけないと予期せぬトラブルが起きてしまいます。


これはシンプルなSVGファイルですが、

こちらを前述の DataURL.net で変換したデータを使うとChromeではPC/Androidともにこのようになってしまいます。

（はてなダイアリーではdata URI schemeは貼れないのでデモページで）
なぜこのように文字化けをしてしまうのか？今回は、data URI schemeの仕様から原因を探り、その解決策も解説していきます。

続きを読む

SVG未対応ブラウザのシェアって今どれくらいか？2014年10月版

先日発売されたiPhone 6 Plusでは従来よりもさらに画面が大きくなったり、Retina iMacの噂があったり、様々な機器でディスプレイの高解像度化が進んでいます。

それらの環境に合わせてピクセルサイズを変えていくつも画像を作るより、いっそSVGのようなベクター形式に移行したい！……でも古い環境が残っててまだまだ使えないんでしょ？
と考えている人も多いのではないでしょうか。


じゃあ実際どれくらいの環境が残っているのだろう？というのを調べてみました。


Twitterや検索から来た人はどうせ最後まで読まないと思うので結論を先に書くと

簡略な結論

2014年10月現在、SVG未対応のInternet Explorer8以下は依然として大きな割合を占めてるものの、iOS・AndroidではそろそろSVGが使える環境が整ってきましたよ

という感じです。


PC向けはSVG未対応の環境は26.91%



Androidで未対応の環境は現在12%ですが着実に減少傾向なので。


（簡略な結論ここまで）






以降、グラフのデータ元や詳しい説明などをしてゆきます。

続きを読む