Firefoxでbackground-imageなどに指定したInline SVGで色が反映されない

NES.cssの開発をしているときに、特定のブラウザ（Firefox）だけSVGの色が反映されないバグを発見した。IE、Safari、Chromeでは再現しない。
background-imageやborder-imageにInline SVGを指定したときに発生する。Inline SVGとは以下のように、url("data:image/svg+xml;...")で指定する方法を指す。

.item {
  /* 色が反映されない */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
}

Inline SVGで色が反映されない原因は“#”

Firefoxでも色が反映されるときとされないときがあることがわかった。それらの違いはurl内で#を使っているかどうか。

#はRFC3986でURLの予約文字として定義されている。そのため、fill=#ff0000のようにHexカラーコードで指定したときにURLとして認識されてしまうようだ。

2.2. Reserved Characters
gen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@"

RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax

対処方法は色名（Color Names）、RGB、RGBAで指定する他、#をパーセントエンコーディングして使う方法がある。

.item {
  /* NG: Hex(fill=#ff0000) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
  /* OK Color name(fill='red')*/
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='red'/></svg>");
  /* OK RGB or RGBA(fill='rgb(255,0,0)')*/
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='rgb(255, 0, 0)'/></svg>");
  /* OK Percent-encode(fill=%23ff0000)*/
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='%23ff0000'/></svg>");
}

参考サイト

• RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• css - How to use a hex value for SVG in FireFox - Stack Overflow
• Background Inline SVG + Firefox

以上

Written by @bc_rikko