CanvaとFigma用のPNGからSVGへ

CanvaとFigmaでPNGがぼやける理由

PNGはピクセルのグリッドです。CanvaのバナーやFigmaの大きなフレーム用に拡大すると、縁がぼやけてギザギザになります。CanvaとFigmaのためにPNGをSVGに変換すると、ピクセルがベクター形状に置き換わり、グラフィックはどのサイズでも鮮明なまま保たれます。

Canvaの無料プランでロゴを作成しておくと、さらに役立ちます。CanvaへのSVGアップロードはProプランに限定されませんが、SVG形式でのダウンロードは有料プランの機能です。代わりにPNG形式でダウンロードし、CanvaのPNGからSVGへの変換手順はここで行ってください。

SVGのアップロードに関するCanvaのルール

Canvaのヘルプセンターには、SVGアップロードに関するいくつかの要件が記載されています。以下に、各要件がSVGRにどのようにマッピングされるかを示します。

FigmaにSVGをインポートした際に表示されるもの

FigmaはSVGをベクターレイヤーとしてインポートするため、形状を直接選択、リカラー、リサイズできます。FigmaのPNGからSVGへの変換の目的は、フラット画像ではなく編集可能な形状を得ることです。

SVGRは穴を切り抜くのではなく、図形を積み重ねます。Oのカウンターやリング内の隙間は、実体の図形の上に重ねられた背景色を持つ図形となるため、Figmaでは重なり合うレイヤーとして表示されます。これは背景色と一致している場合は正しく見えますが、他の色では浮き出てしまいます。

真の穴を作成するには、上部の形状と下部の形状を選択し、Figmaのブール演算から「減算」を適用します。

テキスト：トレースされた図形か、ライブテキストか？

テキスト認識をオフにすると、文字は形状としてトレースされます。元の画像と完全に同じ外観になり、両方のアプリで動作しますが、再編集はできません。

これをオンにすると、検出されたテキストはライブSVGテキストになり、SVGRは色の精細化も実行してグラデーション塗りつぶしが追加されることがあります。Canvaではテキストの展開を要求するため、ここではオフにしてください。FigmaはSVGテキストをライブテキストとしてインポートしますが、隙点があります：テキストの透明度は無視され、emベースのフォントサイズはピクセルとして読み取られ、個々のテキストスパンの文字間隔は無視されます。

ロゴの場合、テキストの認識をオフにしてください。編集可能な見出しが必要な場合は、適切なフォントでFigmaに再入力してください。

知識の限界

• CanvaやFigmaでのPNGからSVGへの変換は、フラットなグラフィックには適していますが、写真には適していません。トレースされた写真は巨大で複雑なファイルになります。Canvaでは、写真自体をJPGまたはPNGとしてアップロードしてください。
• ソフトエッジのPNGには、ほぼ同じ色（例えば、ほぼ黒の複数の色調）が含まれることがあります。クリーンなパレットが必要な場合は、Figmaや他のエディタでそれらを単一の色にリカラーしてください。
• アップロードしたSVGの再着色にCanvaがどのように対応するかはファイルによりますし、すべてのデザインでテストしているわけではありません。テンプレートを作成する前に、1つのテストファイルをアップロードしてください。
• Canvaでも形状の重なりが重要です。透明な背景を使用すると、Oの内部は元の背景色を保持し、他の色上では斑点として表示されます。アップロードする前に、Figmaで切り抜くか、Inkscapeでは「パス」>「差分」を使用して穴を開けてください。
• 透明な背景は、画像の隅にある色で描かれた形状を削除します。これが人々が言う「背景」の意味です。もしあなたの作品が4つの隅すべてにまたがっている場合、または隅の色が異なる場合、何も削除されず背景は残ります。作品に均一で平らな余白を与えてから、再度変換してください。作品によって完全に囲まれた領域は決して削除されず、すでに透明度チャンネルを持つPNGはそのまま保持されます。
• 曲線は多くの短い直線セグメントとして描画されます。小さな画像から描画された曲線は、拡大するとわずかに角ばって見えることがあるため、可能な限り大きなコピーから始めてください。