[Front-End General] SVG の扱い方

仕様が入り組んでいて分かりづらいのでまとめておく。

後述の内容以上のことが『Web制作者のためのIllustrator&ベクターデータの教科書』の『第6章 ベクターフォーマット「SVG」を使いこなす』にまとまっており、ググるよりもこれを買うべき。
今ならば Kindle Unlimited でも読めますね。

また、その他の情報源が下記にまとまっています。

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!

補遺