ブランドガイドライン
アセット再構築レシピ
resvg と Pillow を使い、マスター SVG ソースからすべてのラスター・ブランドアセットを再生成します。
アセット再構築レシピは、マスター SVG からすべてのラスターアセットを再生成します。 これはブランド反復における権威ある更新パスです。
実行するタイミング
次のときに再構築レシピを実行します：
- マスター SVG（
assets/src/logo.svgまたはassets/src/logo-dark.svg）が変更されたとき。 - コンパクトな favicon マスター（
assets/favicon.svg）が変更されたとき。 - ソーシャルカードのマスター（
assets/src/og-banner.svgまたはassets/src/twitter-card.svg）が変更されたとき。 - 新しいラスターサイズが必要なとき。
- コミット済みのアセットが SVG ソースと一致しているか検証したいとき。
スクリプト
| スクリプト | プラットフォーム | パス |
|---|---|---|
rebuild-assets-resvg.py | Python + resvg を備えた任意のホスト | scripts/dev/rebuild-assets-resvg.py |
要件
ジェネレーターは各 SVG を resvg でラスタライズし、ラスターセットを Pillow で構成します：
- Pillow：
pip install pillow。 - resvg： お使いのプラットフォーム向けのリリースバイナリを
resvg releases からダウンロードします——
Windows では
resvg-win64.zip、Linux ではresvg-linux-x86_64.tar.gz、macOS ではresvg-macos.zip——これをPATHに展開するか、--resvg <path>でスクリプトに その場所を指定します。
使い方
すべてのラスターアセットを再生成します：
python scripts/dev/rebuild-assets-resvg.pyアセットを再生成せずにツールチェーンが利用可能かどうかを検証するには、
--check-only を渡します：
python scripts/dev/rebuild-assets-resvg.py --check-onlyresvg が PATH にない場合は、スクリプトにバイナリの場所を指定します：
python scripts/dev/rebuild-assets-resvg.py --resvg /path/to/resvg検証
成功した実行は、ライトとダークのマークラスター、favicon PNG/ICO
セット、Apple touch アイコン、OG/Twitter 画像を再生成し、ウェブで配信される
サブセット——サイトが参照するヒーローロゴのソースを含む——を site/public/
にミラーリングします。生成後はサイトビルドを実行し、公開前にホームページ、
ブラウザタブの favicon、ソーシャルカードの PNG を確認してください。