PSD から SVG (内部は PNG ラスター): 平坦化されたビットマップを中心とした XML ビューポート - 自動ベクトル化ではなく埋め込みに最適
ここで、SVG は軽量ラッパーです。Photoshop の「可視マージ」コンポジット (多くの場合 PNG) は、`viewBox` と幅/高さを持つ `<image>` に埋め込まれているため、Wiki、レビュー ページ、およびコンポーネント ドキュメントは 1 つの MIME タイプを参照できます。ピクセルの詳細は依然として埋め込まれたビットマップによって制限されています。実際のピクセルを超えてズームするとブロック状に見えますが、これは「無限ベクトル スケーリング」とは無関係です。コラボレーションには明示的な線が必要です。これはプレビューまたはプレースホルダー アートであり、編集可能なベクター ソースではありません。コピーとシェイプの編集は PSD、Figma、または Illustrator に属します。また、CSP、ホットリンク、インライン ウェイトにも注意してください。巨大な PNG を Base64 として HTML に詰め込むと、TTFB が破壊される可能性があります。通常は、キャッシュ ヘッダーを持つフィンガープリントされた静的 URL が好まれます。
オンラインで PSD を SVG に変換する方法: 表示されているレイヤーをフリーズし、PNG をラップする SVG をアップロード、ダウンロードし、ブラウザーでマージされた PSD ビューに対してアスペクト比とシャープネスを比較し、チケットでバージョンとハッシュをアーカイブします。
- Photoshop で、外側に見えるレイヤー、アートボードのピクセル サイズ、エクスポートの長辺がターゲット CSS 幅とデバイス DPR の積をカバーしていることを確認します。レビューのマークアップを非表示にします。サイトがリモート イメージを禁止している場合は、Content-Security-Policy が本番環境をブロックしないように、インライン データ URI と同一オリジン静的パスのどちらを使用するかを事前に決定します。
- ダウンロードした SVG をブラウザで直接開き、`<img>` または iframe 経由でターゲット ページ内で再度開きます。 `viewBox` と CSS のスケーリングが予期せず伸縮しないことを確認してください。 200%% にズームします。小さい文字やヘアラインが柔らかくなる場合は、PS のマージ解像度または補間を上げます。 SVG シェルは詳細を作成しません。
- 同じリリース レコード内のソース PSD、パラメータ ノート、およびファイル ハッシュの隣に SVG を保存します。コンポーネント ライブラリでフィンガープリントされた URL を使用することで、長期間有効な CDN キャッシュでデザインの更新後に古いサムネイルが表示され続けることがなくなります。
PSD から SVG への FAQ (SVG 内のラスター、パスの再構築ではない)
関係者は「SVG」を見て、アイコン スタイルの CSS の「塗りつぶし」またはパスの手術を想定します。実際のベクトルの成果物に対して厳密な境界をどのように描くのでしょうか?
はっきり言っておきます: この SVG はプレビュー ラッパーであり、そのヒーローは `<image>` によって参照される埋め込み PNG 内に存在します。独立したベクター アウトラインやライブ テキスト オブジェクトは提供されません。ベクターのソースは、デザイン システムまたはデスクトップのエクスポート プロセスに従う必要があります。この文がないと、フロントエンド チームはそれをグリフ コンポーネントのように配線し、色やストロークを編集できない場合はコンバーターのせいにしてしまいます。
このアセットは、Retina ラップトップでは鮮明に見えますが、標準ディスプレイまたは CSS スケールの後では柔らかく見えます。これは、SVG が失敗したことを意味するのでしょうか、それとも単に埋め込まれた解像度とレイアウトの計算が関係しているのでしょうか?
`naturalWidth` と CSS 幅および devicePixelRatio を比較し、非整数変換をチェックします。ほとんどの場合、問題の原因は、SVG 構文の破損ではなく、埋め込みピクセルの不足やレイアウトの伸縮にあります。ソース解像度とコンテナーの間違いを区別するために、Photoshop から同じ結合サイズでエクスポートされた PNG に対する A/B。
埋め込まれた PNG は、base64 でインライン化するか、URL で参照する必要がありますか? パフォーマンス、キャッシュ、SEO 衛生に対する通常のトレードオフは何ですか?
バルーン HTML をインライン化すると、キャッシュの再利用が損なわれ、TTFB が損傷する可能性があります。長いキャッシュ ヘッダーを持つ外部フィンガープリント静的ファイルは、ほとんどのサイトの埋め込みに適合します。 Base64 は、小さなバッジ、厳密な単一ファイルのアーカイブ、または 2 回目のリクエストが不可能な電子メールのようなバンドル用に予約してください。数メガバイトのプレビューをドキュメントの先頭に黙ってドロップしないでください。
セキュリティやコンプライアンスでは、スクリプトやリモート ロードに関する懸念があります。これらのラスター ラップされた SVG の脅威モデルをどのように記述し、配信を強化するにはどうすればよいでしょうか?
整形式の出力は、`<script>` や外部エンティティを含まない、静的な `<svg>` と `<image>` である必要があります。引き続きポリシー スキャンを実行し、ホット パスからの信頼できないアップロードをブロックし、ビルドをハッシュ フリーズします。ユーザーが任意の SVG をアップロードできる場合は、サニタイズとタグの許可リストが必要です。ジェネレーターが静的であるため、製品表面全体が免疫化されません。
この SVG は、最終機械として直接印刷機または大判印刷に使用できますか?
通常はいいえ: ラッパーは画面コラボレーションをターゲットにしており、埋め込まれた解像度が印刷ライン スクリーン、裁ち落とし、特色、またはフォント埋め込みルールを満たしていない可能性があります。 TIFF/PDF/Illustrator のワークフローについては常に報道し、チケットには「プリント マスターではない」というラベルを付けてください。この免責事項を記載せずにこのファイルをベンダーに送信すると、高額な再メッキや責任争いが発生します。