WordPressでSVGファイルが表示されない&動かない

Question

実現したいこと

・SVGファイルを使って動くシェイプのアイコンを作りたい

前提

初心者です。
WordPressの「SWELL」でサイトを作っています。
こちらの記事を参考にして作ろうと思ったのですが、うまく行きません。
https://point-of-view.blog/swell-tips-svg-morphing-customize/

SVGファイルをメディアにアップロードすることはできたのですが、
固定ページで貼り付けるとなぜか動いていません。

なぜなのでしょうか？
ちなみにSVGをアップロードできるようになるプラグインは導入済みです。

発生している問題・エラーメッセージ

エラーメッセージ
Failed to load resource: the server responded with a status of 404 ()

該当のソースコード

ソースコード

試したこと

他のSVGファイルで試したところ挿入できるものもあれば、できないものもありました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

404 であれば、一番ありそうなのはURLが間違っているとかでしょうか。

[yuuki926]

それ以前にメディアにアップロードするとアニメーションが動いていません…

[Lhankor_Mhy]

> それ以前にメディアにアップロードするとアニメーションが動いていません…

ということは、逆に言うと、動かないけど表示されているということなのですね？
であれば、404のエラーメッセージは別の関係のないエラーかもしれませんね。

メディアとはサーバのことでしょうか？　ローカルでは動いていますか？
そのSVGのコードを質問に追記することはできますか？

[Lhankor_Mhy]

あ、メディアって、wordpress のメディアのことですか。
・ローカルではアニメーションする
・メディアのライブラリのプレビューではアニメーションしない
ということですか？

[yuuki926]

ありがとうございます。

SVGファイルをブラウザで表示させると動いているのですが、
WordPressの管理画面のメディアへアップロードすると止まってしまっています。

コードはこちらです。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z" transform="translate(100 100)">
<animate attributeType="XML" attributeName="d" dur="8s" repeatCount="indefinite"
values="
M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z;
M69.3,-23.5C77.7,3.2,63.9,36.2,40.3,52.7C16.7,69.1,-16.8,69.2,-39.4,53.1C-62,36.9,-73.7,4.6,-65.3,-22.1C-56.9,-48.8,-28.4,-69.9,1,-70.3C30.5,-70.6,61,-50.2,69.3,-23.5Z;
M65.8,-22.5C74,3.9,61.7,36,38.3,53.1C14.9,70.1,-19.6,72.3,-43.5,55.9C-67.3,39.5,-80.5,4.6,-71.4,-23C-62.4,-50.5,-31.2,-70.6,-1.2,-70.2C28.8,-69.9,57.6,-49,65.8,-22.5Z;
M66.9,-21.1C76.4,7.4,66.6,42.9,42.7,60.8C18.7,78.7,-19.5,79.1,-42.9,61.5C-66.3,44,-74.9,8.4,-65.3,-20.3C-55.7,-49,-27.8,-70.9,0.4,-71.1C28.7,-71.2,57.4,-49.6,66.9,-21.1Z;
M69.2,-21.6C77.7,3.6,64.3,36.8,41.1,52.8C17.8,68.8,-15.2,67.6,-37.3,51.6C-59.3,35.5,-70.4,4.5,-62.4,-20.1C-54.3,-44.7,-27.2,-62.9,1.6,-63.4C30.4,-63.9,60.7,-46.8,69.2,-21.6Z;
M62,-19.2C71,7.4,62.4,40.8,40.1,57.5C17.9,74.1,-18,74.2,-41.1,57.3C-64.2,40.4,-74.4,6.4,-65.4,-20.3C-56.4,-47,-28.2,-66.4,-0.8,-66.2C26.5,-65.9,53.1,-45.9,62,-19.2Z;
M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z" />
</path>
</svg>

[Lhankor_Mhy]

メディアでの表示については、サムネイル生成された際にファイル形式が変換されているんじゃないかな、という気がしてます。
そちらはあまり気にせずにページでの表示を修正する方向で対応してはいかがでしょうか。

[yuuki926]

実際に固定ページへ貼り付けると真っ白な状態になってしまいます…

[Lhankor_Mhy]

なるほど。
・ローカルではアニメーションする
・メディアのライブラリのプレビューではアニメーションしない
・固定ページでは表示されない
ということですね。

そうだとすると、元に戻って404エラーかもしれません。URLが正しいかどうか確認してみてはどうでしょうか。

[yuuki926]

どこのURLを確認して、どう正しいのかどう誤りがあるのかがわかりません。
初心者で申し訳ありません。よろしくお願いいたします。

[Lhankor_Mhy]

Chrome であれば、要素の上で右クリックをして「検証」とすると、devtool が開きます。
参考にしたサイトの通りだとすると、アイコン画像にCSSでマスクがかかっていると思いますから、スタイルの欄を見てマスクに書かれているURLの上にマウスカーソルを当てると、正常に読み込まれているかどうかわかると思います。

[yuuki926]

ありがとうございます。
正常にマスクはかかったのですが、
動かず止まったままになっています。

[yuuki926]

WordPressに読み込んだ時点で動いてなかったので
もしかしたら大元の設定などを変えなくてはいけないのでしょうか？

[Lhankor_Mhy]

> 正常にマスクはかかった

おめでとうございます。
これは何をしたらそうなりましたか？

> WordPressに読み込んだ時点で動いてなかったので
> もしかしたら大元の設定などを変えなくてはいけないのでしょうか？

では、次にマスクSVGをそのページからダウンロードして、ローカルのものと同一かどうか確認してみてはいかがでしょうか。

[yuuki926]

ありがとうございます！
CSSコードで画像パスのhttp〜あたりを消したらなりました。

名前をつけて保存するとSVGファイルではなく、webpという拡張子でDLされてしまいます。

[Lhankor_Mhy]

もしかして、画像を自動的にWebPに変換して読み込みを早くするプラグインとか使ってないですか？

[yuuki926]

まえはAutoptimize使ってましたが
今は無効化してあります。

[yuuki926]

SVG SupportというSVGファイルを読み込めるようにするプラグインは使っています・

[Lhankor_Mhy]

うーん、では、uploads ディレクトリに元々のSVGファイルがあるかどうか確認してみてはどうでしょう？　パスさえわかればいいはずなので。

[yuuki926]

ファイルマネージャでwp-contentの中を探してみたんですが、SVGファイルが見つかりませんでした…
これってつまりアップロードされてないってことなんでしょうか？

[Lhankor_Mhy]

WebPの方はありました？　それであれば変換されてしまっているんでしょうね。

[yuuki926]

よく探したらSVGファイル見つかりました！

[yuuki926]

ちなみにパスは合っていました。

[Lhankor_Mhy]

見つかったファイルはローカルにあったものと同じでしたか？

[yuuki926]

はい。同じでした。

[Lhankor_Mhy]

ファイルが同じもので、パスも間違っていないのに、WebPが落ちてくるんですか？？？

[yuuki926]

はい。ブラウザ上で名前をつけて保存すると拡張子はwebpでした。

[Lhankor_Mhy]

そんなことあるかなあ……

違うものを保存しているのではないか、と疑っています。
↓このようにして別タブで開くとどうなりますか？
https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-28/3c74c2b3-bf8e-4d9c-9d07-6d091fd7ad68.png

Answer 1

単体で動くSVGであればサイトにアップしても動くはずです
変なデータを参照する設定になっていないか確認してみてください

追記

https://codepen.io/yamowo/embed/mdMbNaQ
のHTMLの部分をコピペするのであれば、動作すると思います
少なくとも私の環境ではで動作しました

マスクサンプル

<style>
.masked {
  width: 300px;
  height: 300px;
  background-color:gray;
  mask-image: url(sample.svg);
  -webkit-mask-image: url(sample.svg);
}
</style>
<div class="masked">
aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
cccccccccccccccccccccccccc<br>
dddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeee<br>
ffffffffffffffffffffffffff<br>
</div>

特に問題ないようです

Comments

[yuuki926]

変なデータを参照する設定になっていないか確認してみてください
→こちらの設定はどちらで確認できるのでしょうか？？汗

[yambejp]

ソース見てみたのですが特に問題なさそうですよ

[yuuki926]

なぜかWordPressへアップロードすると動かないんです。

[yambejp]

「アップロード」とは何をしたのかわかりません
HTMLにタグで貼るんですよ？
svgというファイルに保存して参照したいなら
<object data="sample.svg" type="image/svg+xml" width="100" height="100"></object>

みたいにします

[yuuki926]

SVGファイルをメディアへアップロードして
そのファイルをマスクして使いたいんです。

[yambejp]

どうやってSVGファイルを参照しているかわかりません。

[yuuki926]

CSS用コードに下記のように画像パスを入れてます。
まずそもそもSVGファイルをメディアへアップロードした時点で動いていないので
プラグインとかが邪魔しているのでしょうか？
他のSVGデータはアップロードした時、動いていたので…

figure.pickup-minimal img {
-webkit-mask-image: url(/wp-content/uploads/2023/11/shape-01-8s.svg);
mask-image: url(/wp-content/uploads/2023/11/shape-01-8s.svg);
-webkit-mask-size: 260px;
mask-size: 260px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

[yambejp]

追記しましたがマスクとしても普通に動作しますね
単純にsvgファイルの参照場所が違うのでは？

[yuuki926]

マスクとしては動作しています。
ただ、動きが止まっている状態です。

[yambejp]

動作環境はなんでしょう？
winのchrome/edge/firefoxでは普通にマスクとしてアニメーションしてますよ

[yuuki926]

MacのChromeです。

[yuuki926]

できました！！プラグインの設定をいじっていたらできました。