Figma、Canva、WordPressでSVGファイルをインポートおよび編集する方法

SVGが手に入りました。次は何をしますか？

ほとんどのコンバーターは「ダウンロード」ボタンで終わります。しかし、ファイルがダウンロードフォルダに残ったままでは意味がありません。デザイナーはFigmaで開いてガイドラインを適用します。コミュニティマネージャーはCanvaにドロップして投稿を作成します。インテグレーターはヘッダーロゴとしてWordPressに配置します。PixelToPathが単なるデモではなく、実際のワークフローに組み込まれていることを証明するのは、この次のステップです。

PixelToPathのSVGは静止画像ではありません。それはパスの集合です：各形状には塗りつぶしがあり、場合によってはアウトラインがあります。ロゴの青をバーガンディに変更したり、アイコンを分離したり、1080x1920のストーリー用に拡大したりできます。これらはすべて、Illustratorに戻ることなく、すでに使用しているツール内で実行できます。

Figma、Canva、WordPressがこのフォーマットを好む理由

インポートされたPNGとJPGはビットマップです。FigmaでPNGロゴの色を変更するということは、パスの色を変更するのではなく、上にレイヤーを重ねるということです。Canvaはカラーパレットを提供しません。WordPressはRetinaディスプレイでぼやける重いファイルを提供します。SVGはこれら3つの問題を一度に解決します。

具体的には、PixelToPathからのSVGは次のものを提供します：

• 編集可能なパス：形状ごとに1色、Figma（塗りつぶし）またはCanva（カラーパレット）で変更可能
• Canvaの3MB制限を大きく下回る軽量ファイルで、WordPressサイトでの読み込みが@2x PNGよりも高速です
• ファビコン、LinkedInのバナー、またはロールアップバナーでも同じ鮮明さ：単一のファイル
• クライアントに送信できる成果物：Creative Cloudではなく、クライアントが持っているツールで開きます

Figma：SVGをインポートして色を変更する

Figmaは、写真としてではなく、ベクターのグループとしてSVGをインポートします。これが重要な点です。各形状は、色を変更、移動、または非表示にできるレイヤーとして残ります。

1. PixelToPathから.svgをダウンロードし、Figmaファイルを開きます。
2. エクスプローラーからキャンバスに直接ファイルをドラッグします。代替方法：ファイル → 配置、またはCtrl+Shift+K (MacではCmd+Shift+K)でSVGを配置します。
3. レイヤーはグループとして表示されます。ダブルクリックして中に入るか、右クリック → グループ解除 (Shift+Ctrl+G / Shift+Cmd+G)で形状を個別に操作できます。
4. パスを選択します。右側のパネルの「塗りつぶし (Fill)」セクションで、カラーパレットをクリックします：HEX、スウォッチ、スポイト。形状全体が変更され、エッジは鮮明なままです。
5. モノクロロゴの場合は、グループ内のすべての形状を選択し、1色を適用します。成果物がベクターである必要がない場合は、エクスポートセクションからSVG、PNG、またはPDFとしてエクスポートします。

Figmaがベクターレイヤーではなくフラットな画像を表示する場合、ファイルにビットマップ（カプセル化されたPNG）が埋め込まれていました。これは、白黒またはポスタープリセットのPixelToPathエクスポートには当てはまりません。写真ではなく、これら2つのモードのいずれかを使用してオリジナルを再変換してください。

Canva：SVGをドロップして色を変更する

Canvaは、無料版とPro版の両方でSVGを受け入れます。ファイルがシンプルな場合、色の変更が機能します：単色塗り、少ないノード、グラデーションなし。これはまさにPixelToPathがポスターや白黒で生成するものです。

1. Canvaでデザインを開きます。左パネル → アップロード → ファイルをアップロードします。.svg（3MB未満、PixelToPathのエクスポートはこれを大きく下回ります）を選択します。
2. ファイルがアップロードされたら、ページにドラッグします。ハンドルを使用してサイズを変更します：ストーリーやA4フォーマットでも、ベクターは鮮明なままです。
3. SVGをクリックします。ツールバーに、ファイルの色ごとにカラーパレットが表示されます。パレットをクリックし、新しい色を選択します：Canvaはその色のすべての形状に適用します。
4. パレットが表示されない場合、SVGが複雑すぎます（グラデーション、色が多すぎる、写真のようなパス）。PixelToPathに戻り、ポスターまたは白黒に切り替えて、再エクスポート、再インポートします。

Canvaは、SVG 1.1プロファイル、同じ色の形状のグループ化、テクスチャなしを推奨しています。PixelToPathのロゴプリセットはすでにこれらの制約を尊重しています。ファイルを「準備」するためにIllustratorを通過する必要はありません。

WordPress：脆弱性を開かずにSVGのアップロードを許可する

WordPressはデフォルトでSVGを拒否しますが、これは気まぐれではありません。SVGはXMLです：JavaScript、外部エンティティ、XSSペイロードを含めることができます。悪意のあるSVGをアップロードした訪問者、または侵害された編集者アカウントは、管理画面でコードを実行できます。これがブロックの理由です。フォーマットを許可し、ファイルをクリーンアップする必要があります。

functions.phpにimage/svg+xmlを追加するだけではいけません。ファイルをクリーンアップしないと、脆弱性が開きます。安全な方法：スクリプト、onloadイベント、XMLエンティティをパージする保守されたプラグイン。100万回以上インストールされているSafe SVG (10up)。

1. WordPress管理画面で：プラグイン → 新規追加。「Safe SVG」（作成者：10up）を検索します。インストールして有効化します。
2. 設定 → メディアに移動します。SVGのアップロードを管理者（または信頼できる役割）に制限します。サイトに複数の寄稿者がいる場合、すべての投稿者アカウントにフォーマットを開放しないでください。
3. メディア → 新規追加。PixelToPathの.svgをドロップします。プラグインはインポート時にクリーンアップし、ライブラリにプレビューを表示します（これはWordPressがネイティブに実行しないことです）。
4. 投稿またはページで、画像ブロックを挿入し、SVGを選択します。ヘッダーロゴの場合は、カスタマイズ / サイトアイデンティティ、またはテーマテンプレート（サイトエディタ）の画像ブロックを使用します。
5. 開発者向けのバリエーション：メディアライブラリをバイパスします。ファイルをテーマ (assets/logo.svg) に配置し、テンプレートで参照するか、CSSでスタイルを設定するためにインライン化します。アップロードしないため、メディアライブラリの攻撃対象領域はありません。

Safe SVGは、誰がアップロードできるかを制限することもできます。プラグインを最新の状態に保ちます：単なる「SVGを許可する」チェックボックスではなく、ファイルのクリーンアップが実際の制御です。

これらのツールに貼り付けるPixelToPath SVGはどれですか？

エディターは提供されたものを読み込みます。不適切なプリセットは、インポート時にコストがかかります：多すぎる形状、使用できない色、拒否されたファイル。

• ロゴ、アイコン、レタリング：白黒またはポスター。これらは単色塗りで、FigmaとCanvaでワンクリックで色を変更できます。
• 色を変更する予定がある場合は、写真を避けてください。このモードは多数の小さな形状を作成します。Canvaでは便利なパレットが表示されないことがよくあります。
• 変換する前にオリジナルをトリミングします：背景が減り、ノードが減り、Figmaレイヤーでより読みやすいSVGになります。
• 使用用途ごとにバリエーションを作成します：Figma（ガイドライン）用のモノクロSVG、Canva（投稿）用のカラーSVG、WordPress（ヘッダー）用のクリーンアップされた同じファイル。

このワークフローが日常を変える場所

SVGがツールに入ると、バリエーションごとに再変換するのをやめます：

• Figmaガイドライン：クライアントのPNGは、再描画せずに色（プライマリ、反転、モノクロ）を変更できるコンポーネントになります。
• Canva投稿：1つのSVG、6色のキャンペーンカラー、鮮明なストーリーとカルーセル。
• WordPressロゴ：ヘッダーに1つのファイル、モバイルとRetinaで鮮明、従来のPNGよりも軽量。
• フリーランスの成果物：SVGとFigma/Canvaのユーザーガイドを納品します。クライアントはもうブロックされません。
• UIアイコン：Figmaに一括インポートし、24pxグリッドに揃え、セットをエクスポートします。

写真にはPNGを使用します。色を変更したり、鮮明に保つ必要があるすべてのものには、PixelToPath + Figma / Canva / WordPressの組み合わせで十分です。