SVG画像の色を変更する方法

配布テンプレート内に同梱されているSVG画像は、色を変更いただくことが可能です。

色の変更方法をまとめましたので、ぜひ参考にしてください！

※色の変更について、自由に行っていただけるのは、anoSora作成画像のみとなります。同梱されていても、別途クレジットがあるものは、そちらの規約に従ってください。

SVG画像とは？

SVG画像(SVGファイル)とは、テキストを利用して作成された画像です。

テキストを利用？というのはピンとこないかもしれませんが、画像ファイルの中を見ると、テキストで画像についての指示が書かれているよ～ということです。

もう少し細かいお話をすると、画像の形式としてはベクター形式となっているので、点や線、曲線を利用して画像が作成されています。また、記述はXMLで書かれているので、Web上での扱いに向いているという形式です。

※そのため、とっても複雑な画像の場合は、あまり向いていません。

SVG画像の場合は、ファイルの中にその画像の情報が、テキストで書かれているため、「後から変更ができる」という点がメリットです。

配布しているテンプレートの中では、自由にカスタマイズするうえで、画像の色も変更する必要があるものなどについては、このSVG画像を利用して、自由に色変更をしてもらえるように作成しているテンプレートもあります。

まずは、ダウンロードしたテンプレートの中から、色を変更したいSVG画像を探します。

画像は、「assets」内にある、「img」フォルダ内にあります。※ただし、それぞれテンプレートによってはフォルダ構成が異なりますので、詳細はテンプレート毎に、同梱しているテキストを確認してください。

画像を見つけたら、その画像を開くのですが、そのままクリックしてしまうと、画像を何で開くか聞かれるか、設定してある方法で画像自体が表示されてしまいます。

色を変更するためには、SVG画像のソースコードを編集する必要があるので、通常のクリックではなく、右クリックを使います。

画像の上にマウスを合わせたら右クリックを押して、「プログラムから開く」を選択してください。

この時、どのツールを使ってこの画像を開くかが選択できます。

上記のツールを選択して開くと、コードが閲覧可能となります。

今回は、Windows標準のメモ帳で開いてみました。これで準備完了です！

実際に色を変更していきます！

色の変更は、「fill」と書かれている部分で行います。書かれている内容の中から、「fill」と書かれているものを探してください。

fillが複数ある場合は、カラーコードか、rgbなどが書かれている部分を探します。

※今回はカラーコードですが、場合によっては「rgb(255, 255 ,255)」のように書かれていることもあります。

この部分に書かれているカラーコードやrgbの値を、今回自分が変更した色に変更します。たとえば、今回は水色の「#99DEF8」にしてみます。

変更しました！

ここで最後に、今開いているSVGを、上書き保存します。保存することを忘れないように！

保存すると、画像の色が変わっているはずです。

今回は図形が1つだったので簡単ですが、複雑な図形のときは、色を変更しなければならない「fill」が複数ある場合もあります。

そんなときは、どこがどの色に対応しているか、1つずつ色を変えて保存しながら確認してみてください。

※一度、元の画像をコピーしてからやると安心です！