動機
同僚がAWSのアイコンを表示するためのCSSを吐き出すスクリプトを作っており、ラスタ画像をbase64してたので、それに対して僕がbase64するとサイズ3割増になるのでSVGを埋め込むJavaScriptを用意する方が良いのではと返しました
そんなことを言いつつ、まず言い出しっぺがとりあえず実装してみようと思いました
AWSのアイコンに限らず汎用的にSVG画像を処理するものを作ってみました
やったこと
基本的な流れ
- SVG画像は内部的にはXMLなので読み込んだSVG画像からSVGタグの内容を抽出する
- ファイル名をベースにしたものをキーとして、上記の内容を値として保持する
- 上記のオブジェクトを読み込んでDOM構築後にタグにSVGを設定していくJavaScriptを出力する
成果物
何故SVGを使うのか
- 拡大縮小に強い
- インラインSVGならCSSで装飾もできる
工夫した点
特にこれと言った点はないですがdenoでサクっと実装できて良かったです
ここで第二引数のMIMEを image/svg+xml にしてたらエラーになったのが唯一の罠でした
他は素直にやりたいことの通りに書けたと思います