svgタグで書かれているときの色の変更
svg画像の色を変更する場合、svgタグで記載されている場合は親のcolor要素で色を変更することが出来ます（svgのpathにfill=”currentColor”が設定されている場合）。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<path fill="currentColor" d="M6.949,65.37c1.08-2.111,2.124-4.56,3.132-7.344c3.408,1.969,7.368,3.505,11.88,4.608
c4.511,1.104,8.712,1.656,12.6,1.656c3.983,0,6.792-0.348,8.424-1.045c1.631-0.695,2.448-1.451,2.448-2.268
c0-2.928-4.464-4.393-13.392-4.393c-9.792,0-16.896-1.02-21.312-3.06c-4.417-2.04-6.624-5.339-6.624-9.9
c0-6.48,2.688-11.256,8.064-14.328c5.375-3.071,12.359-4.608,20.952-4.608c4.992,0,10.116,0.637,15.372,1.908
c5.256,1.272,9.996,3.013,14.22,5.22c-1.393,3.168-2.856,7.032-4.392,11.592c-0.288,0.961-0.529,1.681-0.72,2.16
c-2.448-1.968-6.145-3.611-11.088-4.932c-4.945-1.319-9.313-1.98-13.104-1.98c-4.561,0-7.632,0.3-9.216,0.9
c-1.584,0.601-2.376,1.476-2.376,2.628c0,1.152,1.091,2.077,3.276,2.772c2.184,0.696,5.339,1.044,9.468,1.044
c10.176,0,17.568,1.164,22.176,3.492c4.608,2.329,6.912,5.893,6.912,10.692c0,6.721-2.448,11.556-7.344,14.508
s-12.312,4.428-22.248,4.428c-5.328,0-10.753-0.588-16.272-1.764c-5.521-1.176-10.489-2.892-14.904-5.147
C4.512,69.762,5.869,67.482,6.949,65.37z M130.608,26.13l-4.752,11.016c-4.176,9.745-7.465,17.545-9.864,23.4
c-2.4,5.856-4.607,11.808-6.624,17.855H87.84c-1.969-5.951-4.14-11.844-6.516-17.676s-5.557-13.308-9.54-22.428
c-0.673-1.536-2.424-5.591-5.256-12.168h20.016c1.44,4.656,3.575,10.632,6.408,17.928c2.495,6.433,4.512,12,6.048,16.704
c1.009-3.312,2.22-6.851,3.637-10.619c1.415-3.768,2.268-6.06,2.556-6.876c2.783-7.344,4.824-13.055,6.12-17.136H130.608z
M164.088,48.594h30.744v29.808H182.16l-1.513-12.744c-1.439,4.561-4.008,7.945-7.703,10.152c-3.697,2.208-8.208,3.312-13.536,3.312
c-4.849,0-9.156-1.08-12.924-3.239c-3.77-2.16-6.721-5.256-8.856-9.289c-2.137-4.031-3.204-8.734-3.204-14.111
c0-8.592,2.567-15.383,7.704-20.376c5.136-4.992,13.128-7.488,23.976-7.488c6.192,0,11.652,1.008,16.381,3.024
c4.727,2.016,8.748,5.137,12.06,9.36c-2.16,1.104-6.385,3.312-12.672,6.624l-1.8,1.008c-1.872-1.872-4.057-3.276-6.553-4.212
s-5.137-1.404-7.92-1.404c-4.607,0-8.04,1.212-10.296,3.636c-2.257,2.424-3.384,5.413-3.384,8.964c0,3.841,1.212,6.937,3.636,9.288
c2.424,2.353,6.132,3.528,11.124,3.528c2.16,0,4.26-0.312,6.3-0.937c2.04-0.623,3.756-1.703,5.148-3.24h-14.04V48.594z"/>
</svg>
Code language: HTML, XML (xml)<div style="color: green;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<path fill="currentColor" d="M6.949,65.37c1.08-2.111,2.124-4.56,3.132-7.344c3.408,1.969,7.368,3.505,11.88,4.608
c4.511,1.104,8.712,1.656,12.6,1.656c3.983,0,6.792-0.348,8.424-1.045c1.631-0.695,2.448-1.451,2.448-2.268
c0-2.928-4.464-4.393-13.392-4.393c-9.792,0-16.896-1.02-21.312-3.06c-4.417-2.04-6.624-5.339-6.624-9.9
c0-6.48,2.688-11.256,8.064-14.328c5.375-3.071,12.359-4.608,20.952-4.608c4.992,0,10.116,0.637,15.372,1.908
c5.256,1.272,9.996,3.013,14.22,5.22c-1.393,3.168-2.856,7.032-4.392,11.592c-0.288,0.961-0.529,1.681-0.72,2.16
c-2.448-1.968-6.145-3.611-11.088-4.932c-4.945-1.319-9.313-1.98-13.104-1.98c-4.561,0-7.632,0.3-9.216,0.9
c-1.584,0.601-2.376,1.476-2.376,2.628c0,1.152,1.091,2.077,3.276,2.772c2.184,0.696,5.339,1.044,9.468,1.044
c10.176,0,17.568,1.164,22.176,3.492c4.608,2.329,6.912,5.893,6.912,10.692c0,6.721-2.448,11.556-7.344,14.508
s-12.312,4.428-22.248,4.428c-5.328,0-10.753-0.588-16.272-1.764c-5.521-1.176-10.489-2.892-14.904-5.147
C4.512,69.762,5.869,67.482,6.949,65.37z M130.608,26.13l-4.752,11.016c-4.176,9.745-7.465,17.545-9.864,23.4
c-2.4,5.856-4.607,11.808-6.624,17.855H87.84c-1.969-5.951-4.14-11.844-6.516-17.676s-5.557-13.308-9.54-22.428
c-0.673-1.536-2.424-5.591-5.256-12.168h20.016c1.44,4.656,3.575,10.632,6.408,17.928c2.495,6.433,4.512,12,6.048,16.704
c1.009-3.312,2.22-6.851,3.637-10.619c1.415-3.768,2.268-6.06,2.556-6.876c2.783-7.344,4.824-13.055,6.12-17.136H130.608z
M164.088,48.594h30.744v29.808H182.16l-1.513-12.744c-1.439,4.561-4.008,7.945-7.703,10.152c-3.697,2.208-8.208,3.312-13.536,3.312
c-4.849,0-9.156-1.08-12.924-3.239c-3.77-2.16-6.721-5.256-8.856-9.289c-2.137-4.031-3.204-8.734-3.204-14.111
c0-8.592,2.567-15.383,7.704-20.376c5.136-4.992,13.128-7.488,23.976-7.488c6.192,0,11.652,1.008,16.381,3.024
c4.727,2.016,8.748,5.137,12.06,9.36c-2.16,1.104-6.385,3.312-12.672,6.624l-1.8,1.008c-1.872-1.872-4.057-3.276-6.553-4.212
s-5.137-1.404-7.92-1.404c-4.607,0-8.04,1.212-10.296,3.636c-2.257,2.424-3.384,5.413-3.384,8.964c0,3.841,1.212,6.937,3.636,9.288
c2.424,2.353,6.132,3.528,11.124,3.528c2.16,0,4.26-0.312,6.3-0.937c2.04-0.623,3.756-1.703,5.148-3.24h-14.04V48.594z"/>
</svg>
</div>Code language: HTML, XML (xml)外部ファイルのsvgの色の変更
しかしimgタグで外部ファイルのsvgファイルを呼び出した場合、親のcolor要素で色を変更することが出来ません。
<div style="color:green;">
<img src="/wp-content/uploads/2025/10/svg.svg" width="200px" height="100px">
</div>Code language: HTML, XML (xml)そのようなときに色の変更をしたい場合、filter要素を使用することで色を変更することが出来ます。ただしfilter要素の値は直接hex codeや色名で指定することが出来ません。
以下のページから希望の色をfilter要素で利用可能な形に変換しましょう。
今回はgreen（#008000）を例として使用します。
- 変更先の色をhex codeで指定しましょう。
- 「Compute Filters」を選択。
- filter要素の値が出力されます。
出力された値を使用してfilter要素を追加すると色が変更できます。
<div style="filter:invert(25%) sepia(83%) saturate(2203%) hue-rotate(95deg) brightness(94%) contrast(105%);">
<img src="/wp-content/uploads/2025/10/svg.svg" width="200px" height="100px">
</div>Code language: HTML, XML (xml)まとめ
- svgタグの場合は親のcolor要素で変更
- imgタグで外部ファイルのsvgを呼び出した場合は親のfilter要素で変更
