[Front-End General] SVG の扱い方

公開日: 2016/12/03
更新日: 2018/12/26

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

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

Web制作者のためのIllustrator＆ベクターデータの教科書マルチデバイス時代に知っておくべき新・グラフィック作成術 Web制作者のための教科書シリーズ

posted with amazlet at 16.12.03

インプレス (2015-05-22)
売り上げランキング: 42,465

Amazon.co.jpで詳細を見る

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

> * [改めてこのブログについてとSVGお勧め書籍など – 週刊SVG](http://ssvvgg.net/post/151636935115/%E6%94%B9%E3%82%81%E3%81%A6%E3%81%93%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%A8svg%E3%81%8A%E5%8B%A7%E3%82%81%E6%9B%B8%E7%B1%8D%E3%81%AA%E3%81%A9)

## SVG で何ができるのか

松田直樹さんの SVG MANIAX という一連のスライドが分かりやすかった。

SVG MANIAX – CSS Nite After dark7 from Naoki Matsuda

## ブラウザサポート状況

SVG は Android 2.0 系や IE8 では対応していないが、[2016 年 1 月 12 日 (米国時間) にIE8 以下がお亡くなりになり](https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/)、[Android 2.0 系が 2% を切っている](https://developer.android.com/about/dashboards/index.html)という現代では、使って良い技術になっている。

> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=svg)
>
> 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

> * [A Complete Guide to SVG Fallbacks | CSS-Tricks](https://css-tricks.com/a-complete-guide-to-svg-fallbacks/)
> * [SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA](http://2ndidea.com/svg/svg-fallbacks/)

## Code

指定の仕方が色々ある。

SVG MANIAX Ver.2 – Mars vanilla from Naoki Matsuda

__img, object, iframe__

– svg 要素には、viewBox 属性を必ず指定。
– width, height はお好みで。

__CSS Background__

– svg 要素には、width, height, viewBox 属性を必ず指定。

__inline SVG__

– svg 要素には、width, height 属性を指定してはいけない。

その他。

> * [HTML5でのSVGファイル操作のおさらい – Qiita](http://qiita.com/ka215/items/f9834dca40bb3d7e9c8b)
> * [マークアップ・エンジニアのためのSVG入門 – SVGコードの基本 | CodeGrid](https://app.codegrid.net/entry/svg-basic)

### IE9-11 対応

前述の [Can I use…](http://caniuse.com/#feat=svg) で触れられていたポイント。
<img> tag で利用した場合の対策。

> * [Fix SVGs not scaling in IE9, IE10, and IE11](https://gist.github.com/larrybotha/7881691)

次は「CSS Background」の指定もれで起こる問題。

> * [IE9-11で背景画像のSVGの表示が崩れる問題と対処法 – 週刊SVG](http://ssvvgg.net/post/140503977275/ie9-11%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AEsvg%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95)
>
> SVGファイルにwidth / height属性を記述することで対処

## アクセシビリティ対応

WAI-ARIA の role 属性が必要。

> * [#36：VoiceOverでalt属性を読み上げない問題と対処法 – 週刊SVG](http://ssvvgg.net/post/150537481745/36voiceover%E3%81%A7alt%E5%B1%9E%E6%80%A7%E3%82%92%E8%AA%AD%E3%81%BF%E4%B8%8A%E3%81%92%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95)
>
> iOS VoiceOverではimg要素でSVGファイルを指定した場合にalt属性を読み上げない不具合があります（参考）。JPG, PNG, GIF画像などではこうした問題は起きず、SVGのみ。さらに画像のタッチでも無反応、iOS VoiceOverでよく使われるローター機能でも選択対象になりません。
>
> 対応策としてはrole=”img”を記述することでalt属性の読み上げがされるようになります。

“`html
代替テキスト
“`

> * [WAI-ARIA の基礎知識 — Website Usability Info](http://website-usability.info/2014/04/entry_140415.html)
そもそも。

HTML5 と SVG で考える、これからの画像アクセシビリティ from Naoki Matsuda

must buy!

Web制作者のためのIllustrator＆ベクターデータの教科書マルチデバイス時代に知っておくべき新・グラフィック作成術 Web制作者のための教科書シリーズ

posted with amazlet at 16.12.03

インプレス (2015-05-22)
売り上げランキング: 42,465

Amazon.co.jpで詳細を見る

## 補遺

> * [SVG まわりの状況と、SVGO によるファイル最適化 | deadwood](https://www.d-wood.com/blog/2013/12/12_5116.html)
> * [Apache: svg, svgz の配信に対応する | deadwood](https://www.d-wood.com/blog/2016/05/20_8039.html)
[/markdown]