blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicotです。先日、色付きのsvgがIE11でだけ黒一色になってしまう事象に遭遇しました。日本語・英語共に全く事例を見かけなかったので、諸々しらべて自分なりに結論をまとめました!原因はあんまりこういう使い方する人いないのかもなーというものでしたが、同事象に遭遇の方は参考にどうぞ。おまけ発生した事象と経緯について本来はカラーのこちらの画像。モデルは毎度おなじみのポストくんです(アプリ参照)。これが、IE11だけこういう風に黒くなってしまう。ブラック!!IE11のほか、Edge、FireFox、Chrome(Win/Mac)、safari(Mac)で確認しましたが、IE11以外はカラーで表示されました。このSVGは、useタグのxlink属性で外部のSVGスプライトを参照して使用していました。本来、useタグを使用した外部SVGファイルの参照はIE11では出来ないんですが、IcoMoonで生成したSVGスプライトファイルはsvgxuse.jsというファイルを読み込むことで対応させているようです。これに関してはこちらの記事がわかりやすかったです。外部SVGスプライトのsvgxuse.jsによるIE11対応そういう使い方だったのでまず疑ったのは、svgxuse.jsでは対応しきれず情報の欠損か何かが起きた?ということ。それでいくつかテスト用にSVGスプライトファイルを生成しましたが、IE11でもカラーでの表示を確認。念のためスプライト前の単体画像の表示も確認しましたが同様にカラーでした。この段階で、スプライトさせるSVG画像によって、svgxuse.jsの挙動が異なり情報の欠損が発生したsvgxuse.jsのせいじゃなく、他に原因があるこの2パターンのどちらかかな?と考えました。原因svgxuse.jsがIE11に何をしてるのかってことを調べるより、まず他を潰した方が早いと思ったので、他の原因を先に考えてみました。いう画像圧縮プラグインを使って処理をかけていました。なると、圧縮によってコードの一部が(特に色に関する記述が)IE11では評価できない書き方になってしまった可能性が高い。圧縮前と圧縮後のファイルの中身を比較しました。関数の指定だけになっています。関数は変数を呼び出すために使われるもので、その変数はCSS変数だったりCSSカスタムプロパティと呼ばれます。関数)はIE11は未対応です。Use調べ)原因判明。関数のみの記述になった。関数)未対応なので、fill属性のコード自体を評価できず、fill属性の初期値(黒色)に。※2019/4/23追記)情報提供いただきました!上記に加えて、透過度を含めた8桁のカラーコードを使っている場合もIE11非対応のため評価できず、黒くなるようです。(確認内容は後述)確認してみる間違いないか、SVGの色指定をいじって確認してみました。豚のSVG画像を4枚用意。(notスプライト)1番目の画像からそれぞれ以下のような色指定に修正します。>*いずれもstyle要素(<style>〜</style>)の記述なし次にHTMLでこれらの画像を並べて表示させます。auto;}</style>これで3番目と4番目の豚がIE11で黒で表示されたら原因確定。これを各ブラウザの表示を確認した結果、こうなりました。色をvar()関数の指定だけにした右2つの画像だけ、IE11で黒くなったことがわかります。いう時に色指定がvar()関数だけになるのか?結局var()関数だけになる時ってどういうとき?何に注意すればいいの?と思ったので、黒くなったSVG画像の編集段階+αを追って調べて見ました。色指定」で書かれているので問題ありませんでした。d="(省略)"></g></svg>→問題なし。色指定」のままでした。こちらは圧縮せずスプライトしたパターン。この段階で、「fill属性のカラーコード」と「style属性のfillプロパティのvar()関数」が併用されて書かれるようになります。ここで色指定がvar()関数だけに!gulp-imageminの代わりに、SVGの圧縮画像で有名なSVGOMGで処理しても同じ書き方になりました。圧縮前のSVGに「fill属性のカラーコード」と「style属性のfillプロパティのvar()関数」の両方が書かれている場合、どの圧縮処理でもこうなってしまうのかも知れませんね。透過度も含めて表す8桁のRGBAカラーコード(#RRGGBBAA)がありますが、これをfill属性に使用する場合も黒色(初期値)になってしまいます。教えていただいたので確認してみました。Chromeその他ブラウザの場合IE11、Edgeの場合このケースではIE11だけでなくEdgeも黒色になります。関数同様、IE11とEdgeがRGBAカラーコード形式に非対応であるため。svgのfill属性は初期値である黒に、backgroundに指定した方は初期値のtransparentになってしまいました。?RGBAカラーコードはほとんど使ったことがなく気づかなかったんですが、教えてくださった方によれば、inkscapeでは標準で8桁を入力できてしまうとのこと。原因が見当たらなかったらここら辺も確認すると良さそうです!まとめということで結論です。少なくとも、IcoMoonでSVGスプライトしたものをgulp-imageminやSVGOMGで圧縮するとIE11で黒くなる。意図的でなくても私の場合のように、他の画像たちに紛れて圧縮してしまうかもしれません。「スプライト→圧縮」という処理を経てなくても生成方法や何かしらの処理によって、黒く表示されることがあるかもしれません。IE11サポート終了までは気が抜けませんね。以上、こういうこともあるよ!というご紹介でした。おまけ今回とは原因が異なりますが、他にもIE11でSVGが黒くなってしまうという事例がありました。bugこちらは「SVG内に<style>要素が含まれており、svgが動的に使用されているときにstyle要素が評価されない場合がある。パスのstyle属性にcssを移動させるべき」という不具合?のようです。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。