メモ:SVG要素のその属性は本当に必要なのか

あるウェブページで次のようなSVG要素が直に埋め込まれていたのを見つけた。

<svg viewBox="0 0 24 24" height="32" width="32" aria-hidden="false" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-label="email" stroke-linecap="round" stroke-linejoin="round">
  <path d="..."></path>
  <polyline points="..."></polyline>
</svg>

d属性値やpoints属性値は話の本筋とは無関係なので省略。) この例ではSVG要素に結構な属性が指定されているのだけれども、本当にその属性値は必要なのか?ということを確かめてみよう、というのがこの記事の趣旨。なお、上記例のような属性の指定が一般的なのかどうかは知らない。

viewBox="0 0 24 24" height="32" width="32"

SVGの大きさ等に関連する属性群。(SVG2訳8.6. viewBox 属性7.5. サイズ法プロパティ: width, height プロパティの効果)。

aria-hidden="false"

aria-hidden=trueはよく見かけることがあるけれども、falseは個人的にはあまりに見かけない気がする。WAI-ARIA 1.2訳aria-hidden (ステート)によれば、

執筆時点で、aria-hidden="false"はブラウザーで一貫性なく動作することが知られている。将来の実装が改善されるよう、このアプローチに頼る前に、徹底的に用心と試験を利用すること。

という感じで、実装の挙動が実装間で異なるらしい(試してはいない)。明示する必要はないと思われるので、この用法であれば記述する必要は薄いと思う。

focusable="false"

結論から言うと、そのような属性は今日のSVG仕様にはないので削除するべき。

本当にそんな属性がないのかというと、そんなことはなくて、SVG 1.2 Tinyに定義されていた。(仕様訳鏡13.12.1 focusable 属性

SVG 1.2 Tinyの位置付けは、SVG2曰く、

SVG 標準のこの版は、 2003年にリリースされた 1.1 版に基づいて開発され,その上に築かれている。 2008年には SVG の中間的なバージョン Tiny 1.2 がリリースされた。 しかしながら,それは広くから受容されず、それが増強した各種 特能の実装は,ごく少数しかなかった。 しかしながら, 1.2 の特能のうち一部は、多くの SVG 実装により実装され,この仕様の一部として組み入れられている。 その他においては、 SVG WG は,バージョン Tiny 1.2 を SVG 標準の非推奨にされた分岐であるものと見なす。

SVG2訳1.3. この標準の以前のバージョンとの関係性より。

引用の最後の文の原文はBut otherwise, the SVG Working Group consider version Tiny 1.2 to be a deprecated branch of the SVG standard.と言うことなので、まあそういうことである。

ちなみにHTML Standard 2.1.9 Dependenciesでは

User agents that implement SVG must implement the SVG 2 specification, and not any earlier revisions.

とある(と言う点でも、SVG2仕様を見にいくのがよろしかろう)。

fill="none"

SVG2訳13.4.1. フィルによる塗りの指定法: fill プロパティ

xmlns="http://www.w3.org/2000/svg"

HTMLにおいては、冗長なだけの属性なので削除する。

上の例が示すように,HTML パーサを利用しているときは、[ xmlns 属性で,要素は SVG 名前空間に属するものと宣言する ]必要はない。

SVG2訳5.1.2. 名前空間より。

stroke="currentColor"

SVG2訳13.5.1. ストロークによる塗りの指定法: stroke プロパティ

aria-label="email"

おそらく代替テキストの目的でそうしているのだろうけれども、代替テキストの目的であるならばこのように書くべきではない。なぜならSVGネイティヴの機能で代替テキストを用意するメカニズムがあるのだから。

ARIAの使い方のガイドにあたるW3CノートUsing ARIA曰く、

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

この文書がちょっと古くて、HTMLそのものを機能をターゲットにしているために、今回の説明からしてややピンボケすることもあるのだけれども、まあ、SVGネイティヴの機能があるならば、ARIAではなくそのネイティヴ機能を使うようにする、というのが趣旨といったところ。

また、SVG2訳付録 C. アクセシビリティのサポートにあるように、

WAI-ARIA のサポート, テキストによる代替

desc, title 要素によるテキスト要素の代替

代替テキストはsvgtitle要素を使えばよい。(SVG2訳5.7. desc, title 要素

一応WAI-ARIA 1.2訳aria-label (プロパティ)へのリンクもはっておく。

stroke-linecap="round"

SVG2訳13.5.4. ストロークの両端に描く cap : stroke-linecap プロパティ

stroke-linejoin="round"

SVG2訳13.5.5. 継ぎの制御法: stroke-linejoin, stroke-miterlimit プロパティ

参考:書き直したもの

コードゴルフってわけでもないんですけども、短くできる的な。

<svg viewBox="0 0 24 24" height="32" width="32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
  <title>email</title>
  <path d="..."></path>
  <polyline points="..."></polyline>
</svg>

# 記事を公開してから気づいたけど、role=imgが要ると思われる。

(メモ)同じ繁体字でも台湾と香港ではグリフが違う話

(表ではフォントに源ノ角ゴシックを指定しているので、インストールしてない人はsource-han-sansからどうぞ。どのファイルか迷う人はSuperOTCを入れればOK。)

百聞は一見にしかず、次の表に適当に漢字を比較させてみたのでどうぞ。

国および地域別のUnicodeコードポイントとグリフの比較
地域 言語タグ U+9AA8 U+6B21 U+771F U+4E03 U+904D
台湾(繁体字 zh-Hant-TW
香港(繁体字 zh-Hant-HK
中国(簡体字 zh-Hans
日本(参考) ja
韓国(参考) ko


…とそれだけではあまりにも味気ないので、補足説明をほんのちょっと。

ふと簡体字繁体字言語コードで表すときに、zh-Hanszh-Hantとしましょうというというような話をしていると*1、台湾と香港も表しわけた方がよい(つまり、zh-Hant-TWzh-Hant-HK)という話を@bobtungからもらったり*2



というわけで、適当な漢字を見繕って漢字を出しわけて表示させているのが上の表ということに。わかりやすさのために漢字は大きめに表示させつつ、おまけでいろいろ載せておきました。なお、「源ノ角ゴシック」バージョン 2.000 の技術的な特長について*3では一見Noto Sans CJKにも反映されているようにも見えるけれども、自分がダウンロードした限りではバージョン1.004なので、Notoは対応してないと思う、多分。*4

U+904D(遍)とか楽しいですね(?)

ちなみに、Hong Kong Supplementary Character Set-2016 (HKSCS-2016)からダウンロードできるPDFには香港と台湾のグリフが並んでいて、何が違くて何が同じみたいなのがコードポイントごとに並んでいる表があったりするので、マニアックな人は覗いてみるとよいかと。

*1:ちなみに、検索するとzh-cmn-Hansとかzh-cmn-Hantとかが出てくるんだけども、それはNu Html Checkerでwarningsになるので、そのように指定しないほうがよい。そのへんの少し込み入った話はHTMLとXMLにおける言語タグあたりを参照。

*2:Apple方面の話は公式のサポートページiPadのPagesで中国語、日本語、または韓国語テキストのフォーマットを設定するあたりにあるとおり。

*3:GitHub Splitting TWHK into TW & HK · Issue #48 · adobe-fonts/source-han-sansなんかを読むともっと詳しいことがわかるかもしれません…が長いので読んでいません。

*4:あれでも手元のPixel 3aで表示させたら違うように見えているので、スマホに入っているものはバージョンが新しいのかしら…?