SVGがbase64エンコードされてしまい使えない

Question

前提・実現したいこと

SVGファイル（日本地図）をicomoonへアップロードしたいです。

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

icomoonでこのエラーとなります。

メッセージ

Embedded or referenced images get ignored.
Note that raster images, which consist of pixels, are not scalable and embedding them in SVG does not make them vector.

Learn about vector versus raster graphics.

スクショ

該当のソースコード

以下をエディタに貼り、.svgの拡張子で保存します。ブラウザでは表示できるのですが、icomoonでは上のエラーとなります。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1389px" height="981px" viewBox="0 0 1389 981" enable-background="new 0 0 1389 981" xml:space="preserve">  <image id="image0" width="1389" height="981" x="0" y="0"
    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABW0AAAPVCAAAAAA4tZdNAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAAAEgAAABIAEbJaz4AAAAHdElNRQfkAwcNIwezY8DMAAAPrklEQVR42u3d4W1bRwJG0eGCBUgl
WOnALIFSC+kgcAlSCVIJRjrYFkyWIHeQuAS5g7cVZM3Fau6jyHN+E/jmgU8X0hhBNssAyB3v1z5B
7V9rHwDgKqgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYA
BbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUF
KKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgt
QEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFt
AQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpq
C1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQ
W4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC
2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU
1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1Bag
oLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYA
BbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUF
KKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgt
QEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFt
AQpqC1DYrn0A4Crd3q99gtpmWfsEANfATQJAQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0B
CmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoL
UFBbgILaAhTUFqCwXfsAwHX68XXtE7yTL59O+5zaAqv4+2XtE7yThxNr6yYBoKC2AAW1BSioLUBB
bQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEK
agtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQ
UFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuA
gtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoC
FDbL2icAuAZ+twUoqC1AYbv2AYDr9PN1+sQ+WdndnPY5tQVW8Xo/fWJJVg770z7nJgGgoLYABbUF
KKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgt
QEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFt
AQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpq
C1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQ
W4CC2gIUNsvaJwCu0s/X6RP7ZGV3c9rn1Bag4CYBoKC2AAW1BVZx3EzXrBxPfGC1BSioLUBBbQEK
agtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQ
UFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuA
gtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoC
FNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQW
oKC2AIXNsvYJgKv083X6xD5Z2d2c9jm1BSi4SQAoqC1AQW3hXTxsZnsYYzxdyMpmjHGcv9I4nviK
qC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1A
QW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0B
CmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoL
UFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBb
gILaAhTUFqCgtgAFtQUobNc+AFyG33ezF34bYzxMf45mZYwx7h6TmeBBTvzcZln7pADXwE0CQEFt
AQrubeFdPL3OXtg9j/Hnvy9jZXwb4/v8e9tm5eXzaZ9TW3gXr4di5a8LWnm7lJW3Ez/nJgGgoLYA
BbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUF
KKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgt
QEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFt
AQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpq
C1BQW4DCdu0DwGXYXcBC6/b+QlZuT/yc2sK7eF77AB/O52+Xs3ISNwkABbUFKGyfpk98+TTG/JWH
/Rh//lWs/KPj/D9Znsf48XX6SvONXdp7MX/ltz9mL7SCV7n7gTkTh2VZ5q88Lssy/zr8cfkvHuc/
5bIsh/krzTd2ae/F/JX75CVrVqJXufuBOYWbBICC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC
2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU
1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1Bag
oLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYA
BbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1DYLGuf4HI8vUyf8G3Bh+V3
W4CC2gIUtsfpE7ubMeav3H0a4/tbsbKyn6/TJ5pv7NLei/krt5/H+PH3ZayMffIqNyu7m+kTpzos
S3Dd+Lgsy32y8o8e5z/lsiyH+SvNN3Zp78X8lfvkJWtWole5+4E5hZsEgILaAhTUFqCgtgAFtQUo
qC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1A
QW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0B
CmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoL
UFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUNge
pk/sxhjzV+6mL/zSl4diZXcp31j3Xry8XcbK7ShesmZljORVPi+bZe0TvKOH6d/e4/Pazwj8L473
0ycO+9M+5yYBoKC2AIXtZu0TvBN/439E3r7z9PQyfWJJ/sY/r4tSv9sCFNQWoKC2AAW1BSioLUBB
bQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEKagtQUFuAgtoCFNQWoKC2AAW1BSioLUBBbQEK
agtQ2K59AH7t++P0iW/Jysvn6RNwttT2A3g7XMjKW/EccKbcJAAU1BagoLYABbUFKKgtQEFtAQpq
C1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQ
W4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC
2gIU1BagoLYABbUFKKgtQEFtAQpqC1DYPq59gnfyMMb4fVes8H4u6e27JM3z3CVff7Byd+LnNkvx
wPxfjvfTJ5Zk5bCfPgFny00CQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC
2gIU1BagoLYABbUFKKgtQEFtAQpqC1BQW4CC2gIU1BagsF37APza7fz/93izcls8B5ypzbL2CQCu
gZsEgILaAhTc234AP75On3hOVr58mj4BZ8u97QdwnP/vV0uycthPn4Cz5SYBoKC2AAW1BSioLUBB
bQEKagtQUFuAgtoCFNQWoKC2AIXtcfrE7mbthwRY3dZ/HA8QcJMAUFBbgILaAhTUFqCgtgAFtQUo
qC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1A
QW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0B
CmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoLUFBbgILaAhTUFqCgtgAFtQUoqC1AQW0BCmoL
UFBbgILaAhTUFqCwmT9x2K/9kACr87stQEFtAQpqC1BQW4CC2gIU1BagoLYABbUFKKgtQEFtAQpq
C1D4DwHZfm1an3D/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAzLTA3VDEzOjM1OjA3KzAzOjAw
2i+pswAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMy0wN1QxMzozNTowNyswMzowMKtyEQ8AAAAw
dEVYdHBzOkhpUmVzQm91bmRpbmdCb3gAMTM4OS4yNng5ODEuNSsxMDUuNDY1LTEwOTAuNZkg/X4A
AAAUdEVYdHBzOkxldmVsAEFkb2JlLTMuMCANgDCZYQAAACl0RVh0cHM6U3BvdENvbG9yLTAAcHJv
Y3NldCBBR01fR3JhZGllbnQgMS4wIDC1Ef77AAAAMXRFWHRwczpTcG90Q29sb3ItMQBwcm9jc2V0
IEFkb2JlX0NvbG9ySW1hZ2VfQUk2IDEuMyAwAJieHAAAADJ0RVh0cHM6U3BvdENvbG9yLTIAcHJv
Y3NldCBBZG9iZV9JbGx1c3RyYXRvcl9BSTUgMS4zIDA3LPoJAAAALnRFWHRwczpTcG90Q29sb3It
MwBwcm9jc2V0IEFkb2JlX3BhdHRlcm5fQUk1IDEuMCAwlZdacAAAACh0RVh0cHM6U3BvdENvbG9y
LTQAcHJvY3NldCBBZG9iZV9jc2hvdyAyLjAgONuOvlgAAAAudEVYdHBzOlNwb3RDb2xvci01AHBy
b2NzZXQgQWRvYmVfc2hhZGluZ19BSTggMS4wIDA1PDZrAAAAcXRFWHRwczpTcG90Q29sb3ItNgBP
cHRpb25zOiAxIDE2IDAgMSAxIDEgMCAwIDAgMCAxIDEgMSAxOCAwIDAgMCAwIDAgMCAwIDAgLTEg
LTEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDAgMSAyIDMgNCYfNkYAAABCdEVYdHBzOlNw
b3RDb2xvci03AFBQRDogMSAyMSAwIDAgNjAgNDUgMiAyIDEgMCAwIDEgMCAwIDAgMCAwIDAgMCAw
IDEgMGiRVdsAAAAASUVORK5CYII=" />
</svg>

試したこと

一般的なSVGファイルを見るとpathタグがあるのに対し、上のSVGファイルはbase64にエンコードされているように見えます。そのためにエラーとなるのかと考えました。

調べているとPHPで以下コードを使えば、デコードできるようだとわかり、これを使って上のエラーとなる文字列をpathタグがあるように変換できるかと思いましたがそれはできませんでした。

$txt_enc = "": // ここに上の文字列（「iVB」から「II=」までをコピペ）
$txt_dec = base64_decode($txt_enc);
echo "decode : ".$txt_dec; // 変な文字列になってしまう

どのようにしたら該当のソースコードを.svg拡張子で保存し、それをブラウザで表示できるもの（日本地図）を、icomoonへとアップロードできますか？

試したこと（追記）

ご回答によればどうやら問題はエンコードではないみたいでした。

目的の日本地図は無料サイトからaiの拡張子で落とし、それを無料のサービスでsvgの拡張子に変換したのが該当のソースコードになりまして、どうやらこの変換が問題みたいです。
（pathに変換したいのにpngになってしまった？）

なので変換の方法は自分でaiを開いて、自分でsvgに変換すればよさそうみたいです。

Inkscapeというソフトでそれができるとアドバイス頂いたので以下ページからDLしたのですが、Inkscapeでaiを開こうとすると「要求されたファイル C:\Users\●●\Desktop\404274.ai の読み込みに失敗しました」というエラーでできませんでした。

なのでもしaiが開けるソフトをご存じの方がいらっしゃいましたら教えてほしいと思います。

Answer 1

スマホからなので簡単に。

svgの中身ってpathで書いてます？pngではないですか？

エラーの意訳ベクターとラスターの違いを勉強してね

• Learn about vector versus raster graphics.

Comments

[tamagawa]

aiってベクターですよね？それをネットでsvgに変換したのが質問の該当のソースコードになります。なのでpngではないと思うんですけど、どうしたらいいんしょう？

[tamagawa]

学生でイラストレーターをもってなくて、ネットで落としたaiファイルを、ネットでsvgに変換することしかできないんです。

aiファイルというのは全部ベクターだと思うので、それじゃネットでsvg変換する過程でベクターからラスターになってしまったということでしょうか？

変換したのはここ↓を使いました（他のサイトでは変換できませんでした）
https://onlineconvertfree.com/ja/convert-format/ai-to-svg/

[oikashinoa]

inkscapeでファイル読んで、svgで保存できたような。

[oikashinoa]

ごめんなさい。読むには条件必要でした。

※全てのai形式のファイルが編集できるとは限りません。イラストレーター側でファイルを保存する際、「PDF互換ファイルを作成」にチェックが入っていないと開くことができません。

https://www.google.com/amp/s/www.iscle.com/web-it/illustrator-inkscape.html/amp

[tamagawa]

Ikscapeためしたのですが質問に追記したとおりエラーでした。

調べてみたらそちらのリンク先に以下が書いてありました。たぶんこのせいでわたしの日本地図のaiファイルはIkscapeだと読めないという感じかもしれませんね。

>※全てのai形式のファイルが編集できるとは限りません。イラストレーター側でファイルを保存する際、「PDF互換ファイルを作成」にチェックが入っていないと開くことができません。

[oikashinoa]

inkscapeのラスター画像読んだあとで、ベクター化する機能が使えるはず

https://www.conifer.jp/qr_make/how_to/vector-henkan2.html

スマホも人間も電池切れするので、お急ぎなら他の人にあたってください

[tamagawa]

入れ違いで全く同じのコピペしましたね！笑

[tamagawa]

>inkscapeのラスター画像読んだあとで、ベクター化する機能が使えるはず

そしたらaiでなくpngで日本地図をDLして、それをInkscapeで開き、ベクター化し、svgで保存する。とい流れですね。やってみます。ありがとうございます！

[tamagawa]

できましたあああ！！‎O(*º▽º*)o
ご親切にありがとうございました！

Answer 2

エラーメッセージのとおりです。当該のSVGファイルは、PNGイメージが埋め込まれたものとなっているので、icomoonでは処理できない、とのことです。

Comments

[maisumakun]

base64の部分は、先頭にdata:image/pngとあるようにPNGのデータです。

[tamagawa]

学生でイラストレーターをもってなくて、ネットで落としたaiファイルを、ネットでsvgに変換することしかできないんです。

aiファイルというのは全部ベクターだと思うので、それじゃネットでsvg変換する過程でベクターからラスターになってしまったということでしょうか？

変換したのはここ↓を使いました（他のサイトでは変換できませんでした）
https://onlineconvertfree.com/ja/convert-format/ai-to-svg/

[tamagawa]

どうしたらいいんでしょうか…？

[maisumakun]

> aiファイルというのは全部ベクターだと思うので

Illustratorにも画像埋め込み機能があります。

> ネットでsvg変換する過程でベクターからラスターになってしまったということでしょうか？

Illustrator時点でラスター画像が埋め込まれていたか、あるいは変換で変わってしまったかのどちらかです。

[maisumakun]

> どうしたらいいんでしょうか…？

Inkscapeで.aiを開けるかもしれません。

[tamagawa]

aiが開けるソフトな感じですか？そちらを使ってaiを開いてsvg形式で保存すればいいよということですか？

早速やってみようと思ったのですが「要求されたファイル C:\Users\●●\Desktop\404274.ai の読み込みに失敗しました」になってしまい、Inkscapeはaiは開けないようでした。

アドバイスありがとうございます。とりあえず「aiを開いてsvgで保存できる」という機能があるソフトを見つければいいんですね。

[退会済みユーザー]

>> 学生でイラストレーターをもってなくて
月額1000円ぐらいじゃなかったけ

[tamagawa]

たぶんビバリーヒルズの家も10億円くらいだとおもいます