【CSS】selectのアイコンをsvgにしたい

<select>でつくるプルダウンの右のアイコンをsvgでつくりたい

画像としてbackground-imageで読み込ませればできるかもしれないがダウンロードさせたくなく、マークアップされたsvg要素をどうにか使えないか調べたところ同じようなことを試みている人がいた

stackoverflow.com

結果的に、以下のCSSで実現ができた

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' width='25' height='25'>...</svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 25px 25px;

svgのwidth属性とheight属性をうまく指定しないと表示されず、この辺を調整するのが大変だった

fillが効かない

あと、もう一つ苦労したのが、svgに色をつけるためfill属性を指定したが色が変わらなかった

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' width='25' height='25'>
    <path d='...' fill='#28bfa1'/>
</svg>

fill='blue'は効くのにおかしいと調べたら#は%エンコードする必要があり%23にしなければならかった

stackoverflow.com

ということでfill='%2328bfa1'にしたらうまくいった