PhotoShopから生成したSVGが表示されない場合の対応

投稿日:

躓いたのでメモ。

PhotoShopでレイヤーからSVGを作成したが、表示されない場合がある。前提と確認した事象の詳細は次の通り。

前提

  • レイヤーの一覧にあるベクトルスマートオブジェクトを右クリック→「書き出し」から作成。
  • SVGはcss のbackground-imageで指定。

確認した事象の詳細

  • Android8.0 + Chrome だと事象が出る。
  • 他の端末では確認されない。
  • SVGによって表示される・されないがある。

もう少し調べてみたところ、SVGの中身のコードの差分ではないかと見受けた。

表示されるSVG

<svg id="ふりがな" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
...
(中略)
...
<rect id="角丸長方形_34" data-name="角丸長方形 34" class="cls-1" width="18" height="18" rx="3" ry="3"/> <text id="文字" class="cls-2" transform="translate(9.001 12.455) scale(0.497 0.613)">文字</text> </svg>

表示されないSVG

(前略)...
<image id="ベクトルスマートオブジェクト" width="27" height="19" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUg...(以降略); </svg>

事象が出ていたSVGは、皆コード内に画像をパスでなくbase64の形式で持ってる。
そこで、illustrator持ってる方に頼んで、illustratorでSVG形式で保存してもらうと、次の様にパスで出力できた。

<svg id="設定" data-name="設定" xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 30 30">
    <title>設定</title>
    <style>
        .cls-1 { fill: #062139; }
    </style>
    <path d="M160.8,1012.5a5.16,...(中略)...0,1,148.61,1019.07Z" transform="translate(-133.5 -997.4)"/>
</svg>

これを適用したところ、事象は解消された。
今までSVGはあんまり触れる機会無かったので知らなかったのだが、SVGと一口に言ってもいろいろ種類があるなぁ。
SVGを扱うときはイラレが欲しい。

参考

[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと | ヨネコウェブ
http://yonecoweb.com/archives/292

関連するタグ

関連するタグは現在ありません。