クリッピングした画像にドロップシャドウを付けたSVGファイルをillustratorで表示すると正しく表示されない

[由明34895756zizn]

illustrator以外で、四角い枠にクリッピングした画像に対してドロップシャドウを付けてSVGファイル作成しました。
作成したSVGファイルをillustratorで読み込み中、「アートワークを読み込み中」と表示されるのですが、その直後に下記の警告が表示されます。

「置換」を選択しても再びこの警告が表示されてしまうので、「無視」を選択して続行させるとSVGの読み込みが終わって内容が表示されるのですが、目的通りに表示されているオブジェクトの上にクリッピングされていない画像が重なるように表示されてしまいます。

レイヤーを見ると、上から2行目に「リンクファイル」というものが追加されていて、この「リンクファイル」を非表示にすれば上に重なっている画像が非表示になって、正しいオブジェクトだけが表示されます。

SVGファイルを見直しても、この余計な「リンクファイル」を追加している箇所が見当たりません。

尚、このSVGファイルをブラウザで表示させると正しく表示されておりますし、警告が表示されることを考えるとillustratorでは正しく解釈できない箇所があるのではと思ってますが、原因が特定できずに困ってます。

問題にしておりますSVGファイルとリンクで参照してます画像ファイルを添付いたしました。

何か間違った記述や改善方法があれば、ご指摘、ご教示頂ければ幸いです。
よろしくお願いいたします。

[Ten A · Accepted solution]

これは以前からなんですけどSVGパーサーに問題があってリンクにフィルターがかかっていると正常に処理できなかったりします。埋め込むとリンクエラーは出ないんですけどフォルターが飛んでしまったりさんざんです。また、一部のプロパティも認識できていなかったりするのでSVGをIllustratorで再編集するのは得策ではないです。
ソースを直接編集するか他のアプリケーションを利用するほうが生産性は良いように思います。

[由明34895756zizn]

ご返信ありがとうございます。

仰る通りで、SVGをillustratorで読み込むのは、かなり無理があり、別の方法を考える必要があったと思います。今回は、無理くり進めてますが、次回は別の方法を考えたいと思います。

[由明34895756zizn]

その後、色々と試した結果、クリッピングした画像に対してfilterを使用するとillustratorでは正しく解釈してくれないみだいです。

そこで、画像と同じ形の図形を別途作成して、そこにfilterで影を作成。画像の下に影を配置することで、うまく表示できるようになりました。その時のSVGファイルとリンク画像ファイルを添付致します。

今回、Reactのcanvasを利用してエキスポートしたSVGファイルをillustratorで読み込ませたかったのですが、SVGをillustratorでは正しく表示する為には、様々な工夫が必要になりそうで、別の方法を考えた方が良さそうです。