WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA twitterまとめ
-
melly_design
- 2520
- 8
- 2
- 0
-
- いいね！0
山本一道@アップルップル
@kazumich
WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA wcan.jp/event/mini2016… が始まりました。 #wcan
2016-08-20 14:07:37
安田 学 / TAM inc.
@Gaku0318
SVGは2〜3年前くらいからよく使われるようになっている。 Googleアナリティクスのグラフとか、サイトのロゴとか。IE8の影響か、日本のサイトはロゴをSVGにしていないところも多い。 #wcan
2016-08-20 14:09:34
安田 学 / TAM inc.
@Gaku0318
2016年現在、IE8の対応をしないのであればどのデバイスでもSVGを使える。 ベクターデータのメリットを生かして、小さなところから使っていくのがいい。 #wcan
2016-08-20 14:14:48
安田 学 / TAM inc.
@Gaku0318
viewBoxを理解することが大切。 Illustratorのアートボードと同じもの。描画する領域を決めるもの。 widthとheightは表示サイズ、viewBoxは座標を決めるものなので同じではない。 #wcan
2016-08-20 14:18:03
T.MOTOOKA
@t_motooka
width, height と viewBox の意味の違い、一般の人に説明しようとして失敗したこと何度かある。参考にしたい。 #wcan
2016-08-20 14:18:11
森田かすみ
@KasumiMorita
viewBoxが無くなったら？→ 初期座標系がつかわれる。ブラウザなら1px 、プリンタなら1pt。デバイスによって変わる #wcan
2016-08-20 14:20:53
安田 学 / TAM inc.
@Gaku0318
viewBox指定なしだと座標がないので1座標の単位は1pxになる。 widthとheightの指定があると、表示サイズ÷viewBoxで計算される。 widthとheightの指定がない場合は親要素が基準になる。 #wcan
2016-08-20 14:22:42
森田かすみ
@KasumiMorita
表示がおかしいとき、viewBoxとwidth,heightとpreserveAspectRatioを疑えばだいたい治る #wcan
2016-08-20 14:24:25
安田 学 / TAM inc.
@Gaku0318
viewBoxとwidthとheightの関係を理解することが、表示がうまくできないときに必要になる。 #wcan
2016-08-20 14:24:27
森田かすみ
@KasumiMorita
Illustratorの「レスポンシブ」にチェックするとwidthとheightが指定されない。（チェックしないほうが安全） #wcan
2016-08-20 14:25:55
安田 学 / TAM inc.
@Gaku0318
書き出す時にレスポンシブのチェックを外さない（widthとheightを指定する）のが安全。 IEとAndroidで表示がおかしくなることが多い。 縮小はminifyのこと。 #wcan
2016-08-20 14:26:51
T.MOTOOKA
@t_motooka
Android(4.2とそれ以前)と、IEでの、inline SVG で width/height 省略したときの表示比率バグの話 #wcan
2016-08-20 14:29:21
安田 学 / TAM inc.
@Gaku0318
インラインSVGでフルードさせるには、iframeのレスポンシブ回と同じ方法をとる。height:auto;が効かないため。 #wcan
2016-08-20 14:30:37
山本一道@アップルップル
@kazumich
今日は SVG 特集ということで結構マニアックな内容をやっています。 #wcan mini はこういうのがいいよね。
2016-08-20 14:31:12
安田 学 / TAM inc.
@Gaku0318
SVGを色々しようと思うと、インラインSVGかembedなどがいい。 imgやCSSではできることが限られている。 これはセキュリティ上の仕様なのでどうすることもできない。 #wcan
2016-08-20 14:35:24
安田 学 / TAM inc.
@Gaku0318
インラインSVGはテキストを画像として描画しているようなもの。なので画像よりもアクセシブルにできる。 通常の画像は一枚の画像単位の説明になるけど、SVGは要素（画像の一部分）ごとに説明を書ける。 #wcan
2016-08-20 14:39:18
T.MOTOOKA
@t_motooka
<desc> <title> でのアクセシビリティの話 まだ、対応してる読み上げソフトは無いようだが、入れておく価値はあるし、aria-labelledby の活用で対応させることができる #wcan
2016-08-20 14:41:04