投稿日：
2019年10月25日
最終更新日：
【このファイルタイプは】wordpressで一部のSVGだけアップロード出来ない問題の原因と解決方法【セキュリティの観点から許可されてません】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
目次
WordPressで特定のSVG画像だけアップロード出来ない
このファイルタイプはセキュリティの観点で許可されていません
先日、いつも通りWordPressの記事に対してドラッグ&ドロップでSVG画像を追加しようとしたところ、以下のようなエラーが出ました。
むむむ。。。
他のSVG画像は問題なくアップロード出来ているのに。。。orz
原因
WordPress自体のSVG画像アップロード対応については、以前に紹介しているので設定上は問題ない状態になっているはずです。
いろいろ調べた結果、実際にアップロード出来たSVG画像とアップロード出来なかったSVG画像を比較してみると、アップロードするSVGファイル側に問題がある事が分かりました。
|
1
2
3
4
5
6
|
<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 2041 2160" xmlns="http://www.w3.org/2000/svg">
<path d="m1397 271-370 642-371-642h-592l963 1667 962-1667z" fill="#34495e" />
<path d="m44 0h1952l-979 1696z" fill="#563d7c" fill-rule="nonzero" />
<path d="m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z" fill="#41b883" />
<path d="m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z" fill="#fff" />
</svg>
|
|
1
2
|
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="303" version="1" viewBox="0 0 400 303"><g fill="none" fill-rule="evenodd"><path fill="#00C58E" d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"/><path fill="#108775" d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"/><path fill="#2F495E" fill-rule="nonzero" d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"/></g></svg>
|
原因は一目瞭然ですね。
svgファイルの先頭にxmlの宣言(<?xml version="1.0" encoding="UTF-8"?>)が無いとダメなようです。
解決手順
対処
解決方法はSVGファイルの一行目に<?xml version="1.0" encoding="UTF-8"?>を入れれば解決です。
|
1
2
3
4
5
6
7
|
<?xml version="1.0" encoding="UTF-8"?>
<svg clip-rule="evenodd" fill-rule="evenodd" viewBox="0 0 2041 2160" xmlns="http://www.w3.org/2000/svg">
<path d="m1397 271-370 642-371-642h-592l963 1667 962-1667z" fill="#34495e" />
<path d="m44 0h1952l-979 1696z" fill="#563d7c" fill-rule="nonzero" />
<path d="m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z" fill="#41b883" />
<path d="m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z" fill="#fff" />
</svg>
|
確認
先ほどアップロード出来なかったSVGに上記のxml宣言を追加し、再度アップロードしてみます。
無事にアップロード出来るようになりましたね♪
終わりに
以上のように、SVG画像の構造が分からない人にはちょっとハマりガチな問題でした。
同じような現象でお困りの方はぜひ試してみてください♪