【SVG画像アイコンの編集方法】サイズ・色/ブログ使用コピペ可能

JPG,PNGの他に使われることの多くなったSVG画像のワードプレス上での色やサイズの編集方法について説明します。

SVG画像
編集方法
使い方（例）
まとめ

SVG画像

難しいことは省略しますが、SVGは拡大しても画像がぼやけることなく鮮明に表示される特徴があり、アイコン等での使用に重宝されています。そういったアイコン素材はICOOON MONOなどのサービスから無料でダウンロードすることが出来ます。

編集方法

では今回はICOOON MONOから下の画面の夜空のアイコンを例にして大きさや色を変える編集方法を解説したいと思います。

まずは素材をダウンロード

ダウンロードした素材は後で編集可能ですが、先にサイズ、色、ダウンロード形式を選ぶ必要があります。
①でサイズを選びます（今回は256px）
②で色を選びます（今回は赤色系）
③でダウンロード形式を選びます（※ここでSVGを選択してください）

この内容でダウンロードしたSVG画像を貼り付けたものがコチラです。

ダウンロードしたSVG画像の貼り付け方法

初めてSVG画像を使用する人もいると思いますが、ダウンロードされたファイルをテキストエディタで開きます。テキストエディタが分からない場合はファイルを開いて画像が表示された画面で右クリックし「ぺージのソース表示を開く」を選択するとSVG形式でダウンロードしたアイコンのソースコードが表示されます。

②たくさんの文字が並んでいますがその中の<svg ~</svg>までをコピーします。※コードの前半部分から下まで結構長いです。

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">

	.st0{fill:#4B4B4B;}

</style>
<g>
	<path class="st0" d="M403.469,395.031c-129.203,0-233.938-104.75-233.938-233.953c0-62.438,24.5-119.125,64.375-161.078
		C109.313,17.953,13.563,125.094,13.563,254.656C13.563,396.781,128.781,512,270.906,512c98.688,0,184.359-55.578,227.531-137.125
		C469.406,387.781,437.297,395.031,403.469,395.031z" style="fill: rgb(243, 46, 46);"></path>
	<path class="st0" d="M349.641,179.328c1.047,1.016,1.516,2.484,1.266,3.922l-8.563,49.938c-0.281,1.672,0.406,3.344,1.766,4.344
		c1.359,0.984,3.156,1.109,4.656,0.328l44.859-23.578c1.281-0.688,2.813-0.688,4.109,0l44.859,23.578
		c1.484,0.781,3.297,0.656,4.656-0.328c1.359-1,2.031-2.672,1.75-4.344l-8.563-49.938c-0.25-1.438,0.219-2.906,1.266-3.922
		L478,143.969c1.203-1.172,1.641-2.938,1.125-4.531c-0.531-1.594-1.906-2.781-3.578-3.016l-50.141-7.297
		c-1.438-0.203-2.688-1.109-3.344-2.406l-22.422-45.453c-0.734-1.516-2.281-2.453-3.969-2.453c-1.672,0-3.219,0.938-3.953,2.453
		l-22.438,45.453c-0.641,1.297-1.891,2.203-3.328,2.406l-50.141,7.297c-1.672,0.234-3.063,1.422-3.578,3.016
		s-0.078,3.359,1.125,4.531L349.641,179.328z" style="fill: rgb(243, 46, 46);"></path>
</g>
</svg>

③そのコピーしたコードをアイコンの表示させたい場所に貼り付けます。※ビジュアル編集ではなくHTML編集の場所に貼り付けて下さい。
※このコード内にhttpのURLが記載されている部分がありますので、SSL化済みのブログに使う場合は「s」を付け加えてhttpsに変えましょう。

サイズの変更

そのままコードを貼り付けるとダウンロードした際のサイズが適用されます。今回の場合は256pxの正方形です。ではこれを40pxに縮小してみましょう。

①その前にコードの前半部分を分かりやすく編集します。下の1行と2行を全て消します。

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">

その消した部分に下のコードを追加します。

<svg version="1.1" id="moon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512">

分かりやすいようにid名（id=”この部分”）は自由に決めて良いです。今回は月なので「moon」としました。

②ワードプレスの固定、投稿記事ページ下部のカスタムCSSにサイズを40pxにする為にコードを付け加えます。

これを追記

svg#moon{
    width: 40px;
}

そうするとこうなります。

レスポンシブルにする場合

先程のように40pxと大きさを指定する場合、大きいサイズ（例えば500px）にするとスマホなどでは幅がはみ出てしまします。その場合は幅を以下のようにするとレスポンシブルに出来ます。

svg#moon{
    width: 100%;
}

幅を100%にした場合

色を変更する

次は色を変えてみましょう。この夜空のアイコンは今は赤色一色ですが、左の月部分と右の星部分を別々の2色に変更することが出来ます。
※コード内に「path class=」という部分が2つありますので2色に色を分けることが可能です。「path class=」が一つしかない場合はそのアイコンは単色となります。何色あるかはアイコンのデザインにより異なります。

1つ目の「path class=」はコチラです。

<path class="st0" d="M403.469,395.031c-129.203,0-233.938-104.75-233.938-233.953c0-62.438,24.5-119.125,64.375-161.078
		C109.313,17.953,13.563,125.094,13.563,254.656C13.563,396.781,128.781,512,270.906,512c98.688,0,184.359-55.578,227.531-137.125
		C469.406,387.781,437.297,395.031,403.469,395.031z" style="fill: rgb(243, 46, 46);"></path>

この中の3行目の後半のこの部分を今の赤から黄色に変えます。rgb（数字,数字,数字）の部分が色を指定している部分です。数字の組み合わせで色が分かります。

rgb(243, 46, 46)

変更後（黄色へ）

rgb(255,255,0)

そうするとこの様になります。

左の月の部分が黄色になりました。では次に右の星を青色に変えてみます。
変更するのは2つ目の「path class=」のこちらです。

<path class="st0" d="M349.641,179.328c1.047,1.016,1.516,2.484,1.266,3.922l-8.563,49.938c-0.281,1.672,0.406,3.344,1.766,4.344
		c1.359,0.984,3.156,1.109,4.656,0.328l44.859-23.578c1.281-0.688,2.813-0.688,4.109,0l44.859,23.578
		c1.484,0.781,3.297,0.656,4.656-0.328c1.359-1,2.031-2.672,1.75-4.344l-8.563-49.938c-0.25-1.438,0.219-2.906,1.266-3.922
		L478,143.969c1.203-1.172,1.641-2.938,1.125-4.531c-0.531-1.594-1.906-2.781-3.578-3.016l-50.141-7.297
		c-1.438-0.203-2.688-1.109-3.344-2.406l-22.422-45.453c-0.734-1.516-2.281-2.453-3.969-2.453c-1.672,0-3.219,0.938-3.953,2.453
		l-22.438,45.453c-0.641,1.297-1.891,2.203-3.328,2.406l-50.141,7.297c-1.672,0.234-3.063,1.422-3.578,3.016
		s-0.078,3.359,1.125,4.531L349.641,179.328z" style="fill: rgb(243, 46, 46);"></path>

このコードの最後の方の色を指定しているこの部分