knowledge::short

躓いたのでメモ。

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

関連するタグ

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