CSS アイコン実装から動的引連 SVG アイコン実装に切り替えることにした。軽く実験してみたらやたら捗ったため,改めて早期実装を目指すことにした。
昨日の開発記録を書いてみて,CSS アイコンの調整にかかる時間も馬鹿にならないなと考えながら,何気なく Google 検索の素出を覗いていたら,意外に上手くアイコンが SVG で表現出来ているなとは思ったが,やはり HTML で出力している引連 SVG アイコンは気持ち悪いと感じた。ここで,「行き詰まりを防ぐための選択肢」として残すことにしていた(4月27日の開発記録)動的引連 SVG で凌ぐことを思い付いた。
これまで見てきた例や解説が悪かったか,「SVG は煩雑」という先入観がありずっと苦手意識を持っていたが,引連 SVG 関しては,<path>
を中心に削ぎ落とせば十分簡潔に出来ることが分かった。例えば,従来のデライトの + アイコンは以下の記述で十分表現出来る。
<svg viewBox="0 0 32 32">
<path d="M 4 16 H 28 M 16 4 V 28" fill="none" stroke-width="5.5" stroke-linecap="round"/>
</svg>
引連 SVG なので,CSS や JavaScript での各部分の操作も容易だ。直接編集もやたら難しいと言われているので面倒臭そうだなと思っていたが,何のことはない,すぐに習得出来てしまった。CSS アイコンの調整に比べれば直感的ですらあるし,拡縮時の品質は比べ物にならない。これで外部通類への依存という懸念も払拭出来た。あとは,HTML の肥大化と保守性の低下という引連 SVG の二大欠点をスクリプトで補えばいい。動的引連 SVG なら部品の再利用も十分柔軟に出来る。
元々 CSS アイコンを中心とした枠組みの応付だったので,作ってきた枠組みをそのまま活かせるのも嬉しい所だった。動的引連 SVG を中心に,CSS アイコンの方を応付として交代させるだけで大きな方針変更も必要なかった。