WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA twitterまとめ
-
melly_design
- 2528
- 8
- 2
- 0
-
- いいね！0
安田 学 / TAM inc.
@Gaku0318
ただし、SVGの説明を読んでくれないブラウザもある。 aria-labelledby属性によって、読んでもらえるようにできる。 手作業になるので、すべては難しいかもしれないけれど。 #wcan
2016-08-20 14:42:24
山本一道@アップルップル
@kazumich
longdesc属性 bathtimefish.hatenablog.com/entry/2013/03/… #wcan
2016-08-20 14:44:01
安田 学 / TAM inc.
@Gaku0318
複雑な図形（契約プランとかグラフとか）はSVGの方がアクセシブルにできる。 要素ごとに読み上げてくれたり。 #wcan
2016-08-20 14:44:53
安田 学 / TAM inc.
@Gaku0318
シンボル化でモジュール化。 defs要素とsymbol要素で定義、use要素で参照。Illustratorでシンボル化してると、自動で書き出させる。 同じ文書内などで呼び出せる。 シンボル化は定義するだけ、参照してはじめて描画される。 #wcan
2016-08-20 14:47:38
森田かすみ
@KasumiMorita
symbol要素は実体の無い図形を定義する、use要素で初めて表示できる。ちなみに、再利用した際に色も表示サイズも変えられる #wcan
2016-08-20 14:48:21
エリー𓅪 小籠包文鳥＆オカメ
@melly_design
イラレやsketchのシンボル化と同じように、SVGをシンボル化したら、use要素で、短いソースで使い回しができて便利！ #wcan
2016-08-20 14:52:16
安田 学 / TAM inc.
@Gaku0318
SVGスプライトはシンボル化を利用したもの。svgstoreという呼び方もあり、意味的にはこちらの方が適切。 CSSのスプライトと違ってidで参照するだけなので、管理が楽。 body直下に書くのがいい。 まぼろしさんのサイトでもbody直下にSVGが書かれている。 #wcan
2016-08-20 14:52:33
山本一道@アップルップル
@kazumich
CSS Sprite みたいに SVG も行けるんだね。でもIE・edge が外部ファイルがダメらしくインラインで書かないといけないのか… #wcan
2016-08-20 14:52:40
森田かすみ
@KasumiMorita
GitHubのアイコンがSVGに移行したという内容の記事 #wcan / Delivering Octicons with SVG · GitHub github.com/blog/2112-deli…
2016-08-20 14:54:10
安田 学 / TAM inc.
@Gaku0318
SVGスプライトはjsのテンプレートエンジンで外部ファイル化してbody直下に読み込ませると管理が楽そうだと思った。 #wcan
2016-08-20 14:54:43
森田かすみ
@KasumiMorita
シンボルフォントの違い：SVG スプライトであればグラデーションなどもつけられる。他にもパーツごとに色分けできる #wcan
2016-08-20 14:55:51
山本一道@アップルップル
@kazumich
a-blog cms を使ってインクルードするとブラウザ毎にインラインにするか、リンクにするかを分けて実装できるんじゃないかな。 #wcan
2016-08-20 15:01:27
安田 学 / TAM inc.
@Gaku0318
IEではSVG要素にtransformが効かない。IEに対応する場合はjsが必要。 SVGの属性はCSSで変更できない。なのでtransformするしかない。 メディアクエリと組み合わせて、ロゴのパターンを変える方法もある。 #wcan
2016-08-20 15:02:53
森田かすみ
@KasumiMorita
松田さんおすすめの記事 #wcan / ASCII.jp：SVGの見た目は「属性」で書く――HTMLとの違い｜本気で使いこなす「SVG」再入門【2015年版】 ascii.jp/elem/000/001/0… #wcan
2016-08-20 15:03:12