SVG画像の色が変わらない

Question

前提・実現したいこと

wordpress5.7.2
SVG画像に色をつけたい

↑これを白色にして
↓の赤枠部分に表示させたい

※現状赤枠には黒い矢印が表示されています

該当のソースコード

            <li class="c-page_item">
              <a href="">
                お問い合わせ
                <svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="5" viewBox="0 0 20 5" fill='#fff'>
                  <image id="arrow" width="20" height="5" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAAY0lEQVQYlaXOoQ0CURRE0fM3BIFdAQkt4KaE7QGFoBZCBxRBGWjEq4EEi1+NIkHvv3LEyTQLS3LDFueqmn/7sBTEBXs8kuy6war6YMILzyQHaEk2WHc8bbjihOMKb4wd4H/3LwHeEJZggJWaAAAAAElFTkSuQmCC" fill='#fff'/>
                </svg>
              </a>
            </li>

試したこと

・<svg>へfillを設定するも反映されず
・<image>へfillを設定するも反映されず
・<svg class="arrow"...>へ下記のパターンでスタイル指定するも反映されず

/* パターン1 */
 .arrow {
  display: inline-block;
  fill: #fff;
}

/* パターン2 */
 .arrow > image {
  display: inline-block;
  fill: #fff;
}

何かアドバイスいただけますと幸いです。
よろしくお願いいたします。

参考記事は下記
HPcode
SVGアイコンの色をCSSで変更する

SVG ファイルを外部読み込みして CSS で色を変更する方法
SVGの色を変更したい！SVG表示方法まとめ【サンプル付き】

Comments

[kei344]

SVGはどのように作成したのでしょうか。

[koh-s]

ご回答いただき誠にありがとうございました。
今回はPhotoshopのpsdデータから書き出しています。

[kei344]

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。
PhotoShopなら、ベクターレイヤーで作成しないとラスタ画像になります。（フィルタや効果の一部も画像化されることがあります）

Answer 1

svgと言いつつ、ビットマップデータになっていますね。。。
質問者さんがやっていることはsvgタグの中でhtmlでいうimgタグのようなものでビットマップの画像(jpgやpngのような画像)を呼び出しているため、fillでの装飾ができないのだと思います。

fillで色を変えたい場合はpathやrectなどのベクターデータで描画できるグラフィック要素でないと色は変えられません。

Comments

[koh-s]

ご回答いただき誠にありがとうございました。
とても勉強になりました。
このあたりの理解がまだ浅く、お恥ずかしい限りです。
ご提供いただいた情報をもとに調べてみます。

[runnynose]

ビットマップとベクターの違いを理解すると良いと思いますよ^^

Answer 2

<svg height="5" width="20" xmlns="http://www.w3.org/2000/svg">
<polyline stroke="black" points="0,4.5 19,4.5 14,0.5" fill="none" />
</svg>

※微調整

Comments

[yambejp]

strokeの色をwhiteにすれば白くなります

[koh-s]

ご回答いただき誠にありがとうございました。
とても勉強になりました。
上記を参考にさまざまなパターンで試してみたいと思います！