[Front-End General] SVG の扱い方
仕様が入り組んでいて分かりづらいのでまとめておく。
後述の内容以上のことが『Web制作者のためのIllustrator＆ベクターデータの教科書』の『第6章 ベクターフォーマット「SVG」を使いこなす』にまとまっており、ググるよりもこれを買うべき。
今ならば Kindle Unlimited でも読めますね。
売り上げランキング: 42,465
また、その他の情報源が下記にまとまっています。
Contents
SVG で何ができるのか
松田直樹 さんの SVG MANIAX という一連のスライドが分かりやすかった。
ブラウザサポート状況
SVG は Android 2.0 系や IE8 では対応していないが、2016 年 1 月 12 日 (米国時間) にIE8 以下がお亡くなりになり、Android 2.0 系が 2% を切っているという現代では、使って良い技術になっている。
IE9-11 desktop & mobile don’t properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
「IE9-11デスクトップ＆モバイルは、SVGファイルを適切に拡大/縮小しません。 高さ、幅、ビューボックス、およびCSSのルールを追加するのが最善の回避策のようです」
IE9-11 対応については後述する。
SVG Fallbacks
Code
指定の仕方が色々ある。
img, object, iframe
- svg 要素には、viewBox 属性を必ず指定。
- width, height はお好みで。
CSS Background
- svg 要素には、width, height, viewBox 属性を必ず指定。
inline SVG
- svg 要素には、width, height 属性を指定してはいけない。
その他。
IE9-11 対応
前述の Can I use… で触れられていたポイント。
<img> tag で利用した場合の対策。
次は「CSS Background」の指定もれで起こる問題。
SVGファイルにwidth / height属性を記述することで対処
アクセシビリティ対応
WAI-ARIA の role 属性が必要。
iOS VoiceOverではimg要素でSVGファイルを指定した場合にalt属性を読み上げない不具合があります（参考）。JPG, PNG, GIF画像などではこうした問題は起きず、SVGのみ。さらに画像のタッチでも無反応、iOS VoiceOverでよく使われるローター機能でも選択対象になりません。
対応策としてはrole=”img”を記述することでalt属性の読み上げがされるようになります。
<img src="esquisse.svg" alt="代替テキスト" role="img">
must buy!
売り上げランキング: 42,465