WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA twitterまとめ

WCAN mini 2016 Vol.2 SVG Maniax in NAGOYAに関するツイートをまとめました!SVGづくし!
4
山本一道@アップルップル @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

mapboxではSVGをアセットとして、Canvasとして書き出している。 #wcan

2016-08-20 14:11:59
森田かすみ @KasumiMorita

canvasの中でsvgを使っているので、canvasを使っていてもぼけないらしい mapbox.com #wcan

2016-08-20 14:12:05
T.MOTOOKA @t_motooka

2016年、すでにSVGを使える環境しかない!! #wcan

2016-08-20 14:13:47
安田 学 / 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
森田かすみ @KasumiMorita

width,heightは表示サイズ、viewBoxは座標を指定する #wcan

2016-08-20 14:18:10
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
T.MOTOOKA @t_motooka

preserveAspectRatioの話だ! #wcan

2016-08-20 14:23:32
森田かすみ @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
森田かすみ @KasumiMorita

widthとheightの指定はIEとAndroidのため。指定しないと比率がおかしくなってしまう。 #wcan

2016-08-20 14:27:35
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

図形の間に隙間ができる場合はフィルターを使う。IEはキレイに描画されない。 #wcan

2016-08-20 14:32:07
安田 学 / TAM inc. @Gaku0318

SVGを色々しようと思うと、インラインSVGかembedなどがいい。 imgやCSSではできることが限られている。 これはセキュリティ上の仕様なのでどうすることもできない。 #wcan

2016-08-20 14:35:24
T.MOTOOKA @t_motooka

SVGは画像であり文書である  ↓ 文字情報を含められる  ↓ 画像の中にアクセシビリティを確保できる #wcan

2016-08-20 14:37:20
安田 学 / 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
残りを読む(60)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?