アバター作成サイトを作ろうとしています。
画面上のカラーパレットをクリックすることで髪の毛や服の色を変更できるようにしたいのですが、色違いの画像を用意するのではなく、SVGを使用してスクリプトで動的に色を変えられたらなぁと思っています。
（服の数が500以上になる予定で、しかもカラーパレットも後々追加になるかもしれないので。）
さて、SVGの表示方法がいくつかあることは前に記事を書きました。
その中で、外部SVGファイルを埋め込む方法か、インラインSVGを使うか、その２つで迷っていたのですが、色々試してみた結果、インラインSVGにしようと思います。
外部SVGファイルを埋め込む方法だと、ファイルの管理がしやすく、HTMLもスッキリするのですが、大量のファイルを読み込むためHTTPリクエスト数が増えてしまうことと、JavaScriptで操作がしにくいことが難点でした。（特に大量のSVGを同時に操作しようとすると、ループ処理に時間がかかる…）
インラインSVGだとHTML文書内に書けるのでリクエスト数が増えないし、DOM要素として扱えるのでCSSの適用もJavaScriptでの操作もとても簡単なことに気が付きました。
とりあえず、インラインSVGで開発を進めてみようと思います！
コメント