第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」

ymkwさん @yantona

実は松田さんのセッションを聴くのはShift以外で初めてなのです #resem26

朋茶@猫走月間 @tomochan_1974

viewBoxはIllustratorでいえばアートボード。表示サイズではなく座標系 #resem26

なかしずみーん！ @nakashizu

viewBox は座標系…？ #resem26

深沢幸治郎｜ウェブデザイナー・UIデザイナー @kojirofukazawa

viewBoxにおける座標の一単位は必ずしもピクセルではない、と。 #resem26

なかむらりか🐾イラストレーター @studiolaut

松田さんが数学の先生に見えて来ました。 #resem26

izuizu@🍓*⋆✈︎山本和泉 @izuizu

学校の授業っぽい＼(^o^)／ #resem26

こざる🙈 @kozaru_kodera

viewBox width height ときどきpreserveAspectRatio #resem26

crema（黒野明子） @crema

#resem26 viewBox、width、height、preserveAspectRatioを理解しておくのが、SVGではまらないコツ。

深沢幸治郎｜ウェブデザイナー・UIデザイナー @kojirofukazawa

viewBoxにおける座標単位は利用単位、と呼ぶ。viewBoxとwidth, height、そしてときどきpreserveAspectRatioというもの、 それぞれどういうものかつかんでおくことが大事です。とくにIEやAndroidへの対応に必要。 #resem26

izuizu@🍓*⋆✈︎山本和泉 @izuizu

fluidって聞くともう「古井戸」って脳内変換してしまうのは鷹野さんのせいですね #resem26

crema（黒野明子） @crema

#resem26 SVGのレンダリングはIEとEdgeが一番きれいなんだね！（知らなかった）

▲ / 2024年3月個展 @misumi_takuma

IEが一番SVGのレンダリングがきれい… #resem26

深沢幸治郎｜ウェブデザイナー・UIデザイナー @kojirofukazawa

ちなみにIEとEdgeがSVGのレンダリングが一番上手です #resem26

深沢幸治郎｜ウェブデザイナー・UIデザイナー @kojirofukazawa

SVGはXML文章であり、構造化されたデータを内包できるという優れた利点がある #resem26

crema（黒野明子） @crema

#resem26 インラインSVGの話。SVGデータの中にテキストノードを含められるので、アクセシビリティ的にもよろしい。

誠実な しんしん🐾＠きゃぁぁぁっ @creatorbjork

リクリ いいなぁ : #resem26

すぴかあやか（角田綾佳） @spicagraph

SVGはアクセシビリティにできる？ #resem26

ymkwさん @yantona

SVGはすべての要素にタイトルテキストを書ける #resem26

crema（黒野明子） @crema

#resem26 roleとaria-labelledbyを指定する話。

ymkwさん @yantona

グラフをSVGで描くと、それぞれの凡例をテキストで書ける＝スクリーンリーダーで読めるのか。すげー！ #resem26

izuizu@🍓*⋆✈︎山本和泉 @izuizu

SVGは要素ごとにtitle属性とかrole属性がつけられるけど、やりすぎるとスクリーンリーダーで聞いたときにうざくないようにせなやな #resem26

くっきーさん💎 @littlebusters

「スケーラブルなのは当たり前で、アクセシブルな画像形式が SVGだよ」と、某ダルメシアン本にまさかり投げられた感じです。 #resem26

なかむらりか🐾イラストレーター @studiolaut

おぉ！グラフの読み上げ凄い！ #resem26

izuizu@🍓*⋆✈︎山本和泉 @izuizu

VoiceOverのデモきた！ #resem26

深沢幸治郎｜ウェブデザイナー・UIデザイナー @kojirofukazawa

SVGではオブジェクトごとにテキストを持たせることができる。それぞれをスクリーンリーダーで読ませることもできる。インフォグラフィックだってアクセシブルに！ #resem26