Hatena::ブログ(Diary)

聴く耳を持たない(片方しか)

2015-12-01 SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました

この記事はSVG Advent Calendar 2015への参加記事です。初日の今日は私(id:rikuoid:rikuo)が担当します。

第2日目は@masuPさんが「ラスタ画像を配置したSVGファイルを作成する際に気をつけること | トレンドウォッチ | デジパ株式会社」を投稿されています。

SVG Advent Calendarはまだまだ空きもあるので、気軽にご参加ください。



はじめに

SVGはJPEGやPNG, GIF画像と同じように様々な要素で利用でき、

<img src="foo.svg" alt="代替テキスト">

このようにimg要素や


CSSのbackground-imageなどで使えます。

div{
	background-image: url("foo.svg");
}


このときSVGに未対応な古い環境ではどうなるかというと例えばimg要素であれば、何らかの理由で表示に失敗した画像(JPEG, PNG, GIF画像など)と同様に代替テキストが表示されるだけで、SVGだからといって特別変わった挙動をするわけではありません。


しかしSVGは画像ファイルという側面もありますが、実態はXMLを基盤にした画像記述言語ですから、HTML5では直接HTML内に記述するインラインSVGが使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<svg width="200" height="200">
	<path d="m101 174c-8-1-29-7-51-24-25-19-42-54-42-77 0-26 14-50 48-50 21 0 32 14 38 23 3 4 4 7 6 10 1 1 1 1 2 0 2-3 3-6 6-10 7-10 18-23 38-23 34 0 48 24 48 50 0 23-17 58-42 77-22 17-43 23-51 24z" fill="#ff9fcb"/>
</svg>
</body>
</html>

こうした記述の仕方はJPEG, PNG, GIF画像などとは異なりSVG独特の利用方法です。

そんなインラインSVGをSVG未対応の古いブラウザではどのように扱うのか?といったところをこの記事ではまとめてみました。


……なぜなら、img要素のようにシンプルな挙動では無いんですよね。

続きを読む

トラックバック - http://d.hatena.ne.jp/rikuo/20151201

2015-11-09 ここ3年間で704冊・19万円ほどKindle等の電子書籍を購入したという話

はじめに

最初に断っておきますがこの記事は、電子書籍の今後を語り出版業界の未来を見据える……みたいな内容では全くありません。


Amazon Kindleが日本で開始されてから先月で3周年だったこともあり、改めて振り返ると私自身も電子書籍を利用し始めてからそれなりの冊数を購入したな、と再確認しました。

熱心な人はアメリカでKindleが販売開始されてからすぐに導入していたのかもしれませんが、私は数年前までは紙の書籍しか読んでいなかったものの、現在ではすっかり電子書籍の方を多く買うように変わりました。

そんな今の時点での購入傾向の変化を記録しておこう、というのがこの記事の趣旨です。将来的にはさらに心境や情勢の変動で紙の書籍中心に戻るかもしれませんし。

ですので、数年後に自分で読み返したときに楽しめるように書くのが主な目的の、極めて個人的な内容で、電子書籍についての深い知見などは期待しないでください。


私の電子書籍の購入傾向のデータ

月別の購入数の推移

まずは月別の電子書籍*1の購入冊数の推移です。

尚、今回の記事では無料の電子書籍は除き、全て有料で購入したものだけを対象にしています。また雑誌(有料でも)も対象外。

2013年2014年2015年
1月65517
2月5528
3月3104
4月329
5月47265
6月4097
7月10422
8月3527
9月0215
10月446475
11月2205
12月2811
合計155180364

それ以前の期間は2011年、2012年の2年間で合計6冊しか電子書籍を購入しなかったので、省略。


続きを読む

*1:電子書籍の定義とはなにか?絵本調のアプリは電子書籍か?昔のCD-ROMで販売してた動く漫画みたいなものは含むのか?……と考えるとややこしいので、ここではAmazon Kindle、及びPDF, ePub, mobiファイルのいずれかで提供されているものを「電子書籍」とします。

トラックバック - http://d.hatena.ne.jp/rikuo/20151109

2015-10-17 Acceptヘッダで判別するサーバーサイドのSVGフォールバック

前回の記事ではSVGに未対応な環境が現在どの程度残っているのか調査しました。

2015年10月に調査したSVG対応状況の円グラフ、未対応の環境は13.99%

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

ブラウザシェアの調査は難しく、Webサイトの利用者層によっても傾向は異なるのでしょうが、NetMarketShareによれば未対応な環境は2割以下ほどになってきています。

しかし少数だからと言って全く無視をしてSVGだけを使うというわけにはいきません、なぜなら未対応の環境では表示されませんから、必要な情報を得られず困りますから、なんらかの形でフォールバックが必要になります。

続きを読む

トラックバック - http://d.hatena.ne.jp/rikuo/20151017
Connection: close