ShopifyのカスタムSVGアイコン：ブランド記号を整える

カスタムSVGアイコンをShopifyテーマに入れる実用的な方法は2つあります。ファイルをテーマ素材としてアップロードして画像タグで表示するか、マークアップをLiquidスニペットに入れて必要な場所で描画します。固定色の記号には前者が簡単で、後者はパスと色を直接制御できます。テーマエディターに出る設定はテーマによって異なるため、コードを変える前に既存のアイコンブロックを確認してください。

元データがPNGだけなら、まずパスのSVGを作ります。名前を変えるだけではピクセルは形状になりません。きれいな元のSVGがあればそれを使い、細かな写真は通常、画像のままが適しています。以下は小さなブランドのピクトグラムを、ファイル準備からテーマプレビューまで進める手順で、特定の店舗アカウントやテーマバージョンを前提にしません。

アイコンを置く場所を選ぶ

Shopifyテーマにはファイル用の assets ディレクトリーと、再利用するLiquidマークアップ用の snippets ディレクトリーがあります。テーマの構造で両方を説明し、テーマコードのガイドではコード編集前にテーマエディターの設定を確認するよう勧めています。カスタムSVG欄があるテーマなら、以下のコードの方法はどちらも不要かもしれません。1つのテーマに欄があっても、すべてにあるとは限りません。

2つの配信方法

通常の <img> で読み込むSVGの内部にページのCSSは届かないため、この違いが重要です。インラインのパスはCSSの color プロパティの値を取る currentColor を使えます。MDNのSVG画像の文脈のガイドとcurrentColorの説明を参照してください。一般的なブラウザーの例は、インラインSVGと画像タグの比較で扱っています。

テーマを触る前にSVGを準備する

ブランド記号の最小限の実用的な版から始めます。アイコンでは、顧客が実際に見るサイズでシルエットと意図した開口部を維持してください。アートボードで良く見える細かな文字や質感は、20〜32ピクセルではつぶれる場合があります。ブランドの元ファイルをマスターとして保持し、アイコン用に別途書き出します。

1. きれいな元データを得る。 元のベクターデザインがあればSVGを書き出します。平面的なPNGだけなら、その1工程にPerfectVectorを使えます。クリップアートからSVGへの手順で候補を作成し、ダウンロードしたファイルをベクター編集ソフトで開きます。シルエットと別々の形状をPNGと比較してください。トレースは開始点であり、同じ形状になる約束ではありません。
2. 構造を確認する。 見える記号が埋め込みラスターの <image> の長方形1つではなく、パスや基本ベクター形状でできていることを確認します。意図しない背景枠、残骸、重複した輪郭、極小の色領域を除きます。UIキット用のPNGアイコン準備ガイドは、一式の一貫した格子と視覚的なサイズを扱っています。
3. キャンバスと色を設定する。 適切な余白を持つ viewBox を与えます。2色を維持する記号なら固定のブランド色を保持します。単色アイコンがテーマ色を継承するなら、対象のパスに currentColor を使います。SVGの色変更では、固定した塗りが後の色変更に従わない理由を説明しています。
4. コードとしてファイルを確認する。 アイコンに必要な要素と属性だけを残します。テーマにインラインで置く前に、予期しないスクリプト、外部参照、編集ソフトの余分な情報、信頼できないマークアップを除いてください。整理したSVGをアイコンサイズと大きな確認サイズで開きます。両方で別の問題を見つけられます。

小さな単色の星なら、元データは次のように単純にできます。以下のパスはオリジナルの例で、Shopify提供のアイコンでもPerfectVectorの変換結果でもありません。明示的な座標系を持ち、埋め込み画像はありません。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

2色のブランド記号には、意図した塗りを持つ別々のパスや形状が必要です。すべての色を currentColor に置き換えると、その区別が消えます。大きなアイコン群の一部なら、残りを書き出す前に代表的な数個に同じサイズと色の規則を適用してください。

方法A：テーマ素材を表示する

Shopifyのasset_urlフィルターは、テーマの assets 内のファイルのCDN URLを返します。確認したSVGを追加し、適切なLiquidテンプレート、セクション、スニペットで正確なファイル名を参照します。以下の単純な例は、brand-mark.svg が見える文字の隣にある固定色の装飾記号と想定しています。

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

隣の文字が伝えない情報を画像が伝えるなら、説明的な alt を使います。純粋な装飾画像なら alt="" が適切です。Shopifyのテーマのアクセシビリティガイドは、すべての画像にalt属性、装飾アイコンには空値を求めています。明示的な幅と高さは読み込み中の空間も確保します。素材配信のガイドで説明されています。

この方法では、ページから見てSVGは1つの画像です。テーマ色が変わったら、親のCSSでファイルが色変更されると考えず、SVGの塗りを更新するかインラインの方法を選びます。別の店舗のファイルURLを貼り付けず、asset_url にテーマ素材を解決させてください。

方法B：インラインのアイコンスニペットを描画する

繰り返し使う単色アイコンでは、確認したSVGマークアップを snippets/brand-mark-icon.liquid などに置きます。Shopifyのスニペットの説明は、再利用するマークアップに {% render %} を使います。最小限のスニペットは周囲の文字スタイルから色を取れます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

その後、該当するテーマファイルで描画します。

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

ここでの aria-hidden="true" は、近くの見える文字を装飾するだけのアイコン用です。アイコンだけでボタンやリンクを示すなら、装飾SVGに頼らずコントロールにアクセシブルな名前を与えます。キーボードとスクリーンリーダーでテストしてください。CSSの色と寸法は単発のインライン値を散らさず、テーマの通常のスタイル設定に保持します。

スニペットは再利用できますが、テーマコードであることは変わりません。Shopifyはコード変更前のテーマの複製を勧めています。コピーで変更し、該当するページやセクションをプレビューして、テーマ更新後に比較できるよう元のスニペットを保存します。テーマ独自のアイコンライブラリーには独自の引数や構造があり得るため、組み込みアイコンを置き換える前にファイルを確認します。現在のShopify Communityのアイコンライブラリーの議論は、ライブラリー全体の描画が、1つのアイコンの選択と必ずしも同じでない理由を示しています。

最終サイズで受け渡しを確認する

技術的に有効なファイルでも、店舗ではおかしく見える場合があります。テーマが明るい背景と暗い背景を使うなら、両方で確認します。実際のCSSサイズ、狭いビューポート、隣のアイコンと並べた状態で記号を確認してください。穴が開いたままで、色のコントラストが十分あり、viewBox やコンテナーで切れていないことを確認します。

素材が拡大時にぼやけた長方形に見えるなら、埋め込みラスターを調べます。インラインアイコンがテーマ色を無視するなら、固定の塗り、インラインスタイル、より詳細度の高いセレクターを探します。何も出ないなら、まず素材ファイル名やスニペット名、その後にテーマのセクションのマークアップを確認します。一度に複数を変えないでください。CSSマスクのアイコンガイドは、パスをインライン化せずシルエットを色変更する別の方法を扱っています。

平面的な自分の記号がラスターしかないなら、PerfectVectorでSVG候補を作成し、テーマへの方法を選ぶ前に、予定アイコンサイズでパス、開口部、色を確認します。すでに良いSVGがあるなら、トレースを省き、その時間を店舗のプレビューに使ってください。

よくある質問

すべてのShopifyテーマのCustomize画面からSVGアイコンをアップロードできますか？ いいえ。アイコンやカスタムSVG欄を提供するテーマもありますが、素材やコードの編集が必要なものもあります。欄があると思い込まず、具体的なテーマのセクションと説明を確認してください。

アップロードしたSVGがテーマ色に従わないのはなぜですか？ 画像タグ経由のSVGは画像リソースなので、ページCSSは内部のパスをスタイル設定しません。固定色素材ならSVGの塗りを編集し、テーマに連動する色が必要なら確認したインラインマークアップと currentColor を使います。

PNGブランドアイコンは追加前にSVGへ変換すべきですか？ 拡大縮小できる編集可能なパスが必要な平面的な記号なら変換します。予定アイコンサイズでトレースを確認し、余計な形状を除いてください。トレースで特徴的な細部を捨てるなら、写真や質感のある画像はラスターのままにします。

参考資料

1. Shopify Developers — テーマの構造 — テーマ素材、スニペット、マークアップの配置を説明しています。
2. Shopify Developers — asset_url — Liquidの例で使ったテーマ素材URLの動作を説明しています。
3. Shopify Developers — スニペット — 再利用するLiquidマークアップと render タグを説明しています。
4. Shopify Help Center — テーマコードの編集 — エディター優先の方法、テーマの複製、コード変更の注意を説明しています。
5. Shopify Developers — アクセシビリティのベストプラクティス — 代替テキストと装飾アイコンの扱いを説明しています。
6. Shopify Developers — Shopify CDNから素材を配信 — 素材フィルターと明示的な画像寸法を説明しています。
7. MDN — SVGを画像として使う — ブラウザーの画像文脈での制限を説明しています。
8. MDN — SVGのcolor属性 — currentColor がSVGの塗りとストロークへ渡る仕組みを説明しています。