gitのコミット履歴によると2019年10月22日に勉強がてら当ブログのダークモード対応を行っています。その際ロゴのSVGはどうしようかと思ったはずですが、img要素の背景色に白を設定してそのままにしていました。そこで改めてロゴのダークモード対応について検討を行いました。
インラインSVGにするとCSSを用いて容易に色変更ができるので、img要素で読み込んでいたSVGをドキュメント内に移動し、サイト名とその下にあるテキスト「Web Development, Photography, Travel.」がダークモードの時に白色となるように設定を行いました。これで白く塗りつぶしたエリアが消え、完全にダークモードに対応できた感が出ました。インラインSVGにした時Firefoxで紙飛行機部分の表示が正しくなかったのですが、これは「SVG Linear Gradient does not work in Firefox - Stack Overflow」を参考にlinearGradient要素の記述位置を変更したところ解決しました。
見た目だけ整えるのであればこれで良いのですが、いくつか気になることがありました。
気になること
テキスト情報がない
今まではimg要素のalt属性にテキストを書いていましたが、インラインSVGにしたことでどうしようかと考えました。何もしないとFirefoxのアクセシビリティ機能で指摘が入ります。
まず思いつくのは「Accessible SVGs | CSS-Tricks」の「2. Inline SVG」などで学習したように、SVGのtitle要素にテキストを記述すると共にID属性値を付与し、aria-labelledby属性でそのID属性値を関連付ける方法です。これでWAI-ARIAに対応している支援技術であれば情報が伝わると考えますが、Googleのクローラなどには伝わるのだろうか？という疑問が湧きました。最終的にはとあるサイトと同じようにこっそりテキストを書いておきました。（同じことを考えられたのかどうかはもちろん分かりません。）
転送量が増える
これまではSVGファイルがキャッシュされていましたが、インラインSVGにしたことで1ページの転送量が約5KB（「Brotli」で圧縮して転送しています）増えることになりました。テキスト中心のサイトなので元々転送量は少ないですが、減らせるものは減らしたいかなと思います。
まとめ
風呂に入りながらもう一つ気になることがあったような気がしますが忘れました…。ダークモードの時の見た目は改善しましたが気になることに挙げた事柄がとても気になるので、しばらくすると元に戻すかもしれません。企業ロゴなどだと色を変えても良いのか？という課題もありそうですね。