mieee1103
@mieee1103

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Instagram公式のロゴsvgがサーバーで表示できない

表題の通りです。

Instagramの公式ページからロゴ素材をダウンロードしました。
https://about.meta.com/ja/brand/resources/instagram/instagram-brand/

パッケージに入っていた
01 Gradient Glyphフォルダ内のInstagram_Glyph_Gradient.svgで問題が生じています。

FTPにアップロードして、パスにアクセスすると、
以下のメッセージが表示され、画像が出てきません。

This page contains the following errors:
error on line 1 at column 3144417: AttValue: ' expected
Below is a rendering of the page up to the first error.

スクリーンショット 2023-08-14 18.10.51.png

他のフォルダに入っていた、白抜き・黒抜きのSVGは
問題なくアップロードでき、Web上でも見ることができましたが、
カラーグラデーションのsvgだけ見ることができません。

1行目の3144417列に「'」を加えてみましたが、それでも解決しませんでした。

解消方法についてお分かりの方はご教示いただけますでしょうか。
よろしくお願いいたします。

--追記 2023/8/15 21:13-------------------------------------
同じsvgをスターサーバーフリーにアップロードしたところ、
問題なく表示されました。

Xフリーでは表示されませんでした。
以下2点は試しましたが、変わらず表示されません。

↓.htaccessの書き換え
  https://lifehash.jp/xfree-svg/
↓XフリーでのMINE設定
  https://www.imamura.biz/blog/17789

0

2Answer

ファイルが壊れていませんでしょうか?

Instagram公式サイトからダウンロードしたローカルファイル、および、その後、webサーバにアップロードしたファイルともに、このsvgファイルを正しく表示することを確認しました。ブラウザはSafariとChromeどちらも問題無く表示。よって、公式サイトからダウンロードしたファイル自体は問題無いです。

ちなみに、macで調べたこのファイルのMD5ハッシュ値は、以下のとおりです。

% md5 Instagram_Glyph_Gradient.svg 
MD5 (Instagram_Glyph_Gradient.svg) = cda006af9f628b0d523d1176cb0a44ed
0Like

Comments

  1. @mieee1103

    Questioner

    ファイルが壊れているとしたら、どの段階でしょうか?
    ダウンロードし、圧縮を解凍する以外のことはしていないです。

    MD5ハッシュ値も載せていただいたものと同じでした。
    確かに他のsvgと違い、ローカル環境でもサムネイルが表示されず
    添付のような見た目になっています。
    FTPのアップロード問題ではなく、ダウンロードから解凍までの間に、
    ファイルが壊れてしまっていうということでしょうか。

    スクリーンショット 2023-08-15 17.14.04.png

  2. MD5ハッシュ値が同じならファイルは壊れてないです。
    Safariの「ファイルを開く」で、このファイルを開いてみたら表示しますか?

    当方もサムネイルはたしかにGoogle Chromeのアイコンになっています。しかし、このファイルをGoogle Chrome や Safariで開くと、ちゃんと表示しました。

  3. @mieee1103

    Questioner

    この方法でSafari、Google Chromeで開いたら問題なく開けました。
    FTPへのアップロード方法が間違えているのでしょうか。
    他のsvgは同じやり方でも問題なく開けるのですが・・・。

    スクリーンショット 2023-08-15 18.29.10.png

  4. @mieee1103

    Questioner

    サーバーに依存するエラーかもしれず、
    質問本文の追記箇所も併せてご確認いただけますと幸いです。

svgはXML書式ですが、テキスト扱いで良いのでしょうか?

さて、現状の確認

InstagramーーーmacーーーーxFree
ok        ok      NG 注1

スターサーバーフリー ok
注1 okのSVGファイルもある。

wc     Instagram_Glyph_Gradient.svg
cksum  Instagram_Glyph_Gradient.svg

をmac、xFreeで実行し、その値を掲載して下さい。

次に、ftpの転送モードをアスキー、バイナリで転送して、wc値の変化を確認して下さい。

wcはline, word, sizeが表示されます。macの改行をCRと解釈して古い時代のまま誤変換はしてないのでしょうか?

0Like

Comments

  1. @mieee1103

    Questioner

    ご回答いただきありがとうございます。

    勉強不足で恐縮なのですが、以下の指示がわかりません。
    「mac、xFreeで実行し、その値を掲載して下さい。」

    macはターミナルに wc /cksum を打ち込み、該当のsvgをドラックすればいいのでしょうか?
    wcは「 0 23 10896171 」
    cksumは「1320596558 10896171」と出ました。

    これをx Freeで実行とはどういうことでしょうか?
    手順などあれば教えていただけますでしょうか。

  2. Instagram公式のロゴsvgがサーバーで表示できない

    mac から xFree に ftpで svgファイルをアップロードし、macと同じように xFreeのsvgコンテンツが【とあるブラウザ】で表示されない。

    と云う不具合と認識しています。

    そうすると、macと同じ、svgファイルをアップロードしている証明をする必要があります。md5値の掲示はmacのみで、片手落ちです。

    何らかの方法で、svgファイルの同一性を確認してください。

    例えば、svgファイルのftp転送後のバイト数が10896171である事実(掲載することで)

  3. @mieee1103

    Questioner

    FTP上のSVGファイルはのバイト数は3,145,728となっています。

    つまり、このバイト数の相違で、
    アップロードの段階壊れてしまっていることが確定したということでしょうか?

    アップロードの際に壊れないようにアップすることは可能でしょうか?

  4. 横から失礼します。
    約1/3とは随分な差ですね。
    普通にバイナリでftpすれば良いはずです。
    再度、10896171のファイルをアップロードしてもサイズが変わりますか?
    自分が試しに先日サーバにアップロードしたファイルは、サーバ上のサイズも10896171でした。

  5. wcは「 0 23 10896171 」

    0行より1行以上が理想的です。
    サムネイルが正常に表示されない原因と推測

    vi Instagram_Glyph_Gradient.svg
    

    任意のエディタでファイルの末尾で改行して下さい。

    wc Instagram_Glyph_Gradient.svg
    

    macでwc値、1  24  10896172 の表示確認,サムネイルの正常表示確認、及び ブラウザで表示確認の上、バイナリモードでアップロードしてみて下さい。

  6. @mieee1103

    Questioner

    @nak435様、@HalHarada

    環境を変えてWindowsからアップロードしてみたところ、
    問題なくアップロードでき表示もできるようになりました…!

    根本解決には至っていないように思えますが、
    ひとまずご尽力いただきありがとうございました。

  7. wcの結果、自分の環境でも0行でしたが、サーバでの表示は問題ありませんでした。念のため。

    cmd.png

    svr.png

  8. @HalHarada さん、

    0行より1行以上が理想的です。
    サムネイルが正常に表示されない原因と推測

    今回問題となっているInstagram_Glyph_Gradient.svg以外に、色黒バージョンのInstagram_Glyph_White.svgInstagram_Glyph_Black.svgがありますが、調べてみたところ、これらはどれも0行でした。
    しかし、色黒バージョンはサムネイルは表示されています。よって0行が原因ということではなようです。原因不明です??

  9. 色黒バージョンはサムネイルは表示されています。

    机上の空論ですが色黒バージョンはサイズが小さいのでバッファ内に偶然収まったからと考えます。

    svgはxmlの仲間なのでテキスト扱いされて置きながら,一方では画像扱いされ、0行ファイルがバッファ内に偶然収まったからサムネイルは表示されるのでないでしょうか、1行ファイルならアスキーモードでもftp転送が可能と思います。

    時間があれば末尾に改行を!

  10. 時間があれば末尾に改行を!

    改行を入れてみましたが変わりませんでした。

    ただ、「サイズ」は関係する可能性ありますね。
    白黒バージョンが約2KBに対し、カラー(グラデーション)バージョンは約11MBと巨大ですから。

  11. FTP上のSVGファイルはのバイト数は3,145,728となっています。

    2M,3M単位で改行すると、バッファサイズ内に収まるのでしょうか?

    貴重な時間を割いて頂き有り難うございます。一様、バイナリモード転送で解決して安心してます。

Your answer might help someone💌