PerfectVector
著者: Irene Kim

PicSVGフィルター:Edge、Internal、Cleanを比較

1 つの画像上で 3 つの PicSVG フィルターを比較し、各 SVG を個別に保存し、どの領域、開口部、背景処理が意図したデザインに適合するかを確認します。

2 分で読める
目次

同じ画像から保存された結果を比較して、PicSVG フィルターを選択します。詳細を固定したままにし、名前付きフィルターを一度に 1 つずつ変更し、必要な領域と開口部を確認します。幾何学的コントロールでは、エッジ 2 は境界を強調し、内部 1 は 2 つの塗りつぶされた形状を保持しますが三角形を省略し、クリーン 1 は背景の処理を変更しました。最短パス リストが自動的に最も有用なバージョンになるわけではありません。

どのエフェクトもプロジェクトに必要な形状を保持していない場合は、PicSVG の代替ページで PerfectVector を無料で開始し、プレビューのシルエット、開口部、色の領域をソースと比較してください。結果を編集またはエクスポートする前に、結果のロックを解除する必要があります。以下のフィルター ワークフローは PicSVG 自体で完了します。サービス間の出力品質の比較は実行しませんでした。

お手持ちの画像で試す
フル機能のツールを開く
無料でお試しいただけます。画像をドロップすると、登録なしでベクターのプレビューを確認できます。

1 つのソースと固定の詳細設定から開始します

このガイドでは、PicSVG Web サイトを使用します。この Web サイトのテスト済みページは、ベータ V3.4 として識別されます。通常のコンバーターは、アップロード、選択可能な効果、SVG ダウンロードを提供します。サイト名は JPG、GIF、PNG 入力で最大 4 MB です。オリジナルを変換して保存する権限のある画像を使用してください。

アップロードした元画像は、独自に作成した320 × 240のRGBA PNGです。透明な背景に、中央も透明な紺色の長方形の枠、金色の三角形、青緑色のブロックを配置しました。サイトのORIGINAL RESIZEDプレビューでは、透明な部分が白く表示されました。今回比較したのはフィルターの選択結果です。透明度が保持されるかどうかや、サイトのアルファ処理を説明できる中間ファイルは検証していません。そのため、形状が残るか、枠の穴が残るか、色が保持されるか、背景の形状が加わるかを、それぞれ分けて確認できます。

  1. 画像のアップロードを使用してソースを読み込みます。
  2. フィルターを比較するときは詳細: 強力 を維持してください。
  3. 表示されるフィルター ドロップダウンを使用して名前付きフィルターを選択し、表示されるラベルを確認します。
  4. プレビューが更新されるのを待って確認し、DOWNLOAD SVG (DOWNLOAD SVG (SVG のダウンロード))を使用します。
  5. 次のフィルタを選択する前に、別のローカル ファイル名を保存してください。

Edge 2、Internal 1、Clean 1を、いずれもStrongでテストしました。この実験ではStrongを固定し、他のDetails値とは比較していません。また、Strongなら小さな細部がすべて残ると確認したわけでもありません。通常の変換手順はSupermodeを使わずに完了しました。

実際の PicSVG の状態
実際の PicSVG コントロールは、詳細が強く、内部 1 に設定され、黒いフレームとブロック結果の横に元の色の形状が表示されます。
内部 1 プレビューでは、ソースの金色の三角形が存在しない間、フレームとブロックが維持されます。

Edge 2、Internal 1、Clean 1 の保持内容を比較する

実際にダウンロードされた 3 つの SVG は、同じソースに対して異なる処理を生成しました。私たちはそれらのマークアップを検査し、保持されたファイルをローカルにレンダリングしました。これらは、すべての画像を予測する定義ではなく、このテスト参照に関する観察です。

フィルター、詳細が強力このソースで表示される結果決断
エッジ2フレーム、三角形、ブロックの周囲にある細い黒い境界バンド。大きな内部は透明です元の塗りつぶされた領域ではなく境界形状のアートワークが必要かどうか
内部1中央が開いた黒く塗りつぶされたフレームと黒いブロック。金の三角形がありません省略された淡色の領域が許容されるかどうか
クリーン1三角形の境界を含む、狭い透明な境界バンドで区切られた黒い背景と内部領域その背景処理が意図したデザインに含まれるかどうか

3 つの形状すべてを保持する必要がある塗りつぶしバージョンの場合、これらの特定の結果はいずれも自動保持されません。内部 1 はフレームの開口部を保持しますが、三角形を失います。エッジ 2 は、塗りつぶされた外観を変更しながら、その境界を保持します。 Clean 1 には、アップロードされた PNG の背景とフレームの中心が透明な黒いジオメトリが含まれています。より洗練されたように聞こえるフィルター名ではなく、図面の要件に照らして選択してください。

ページ全体のサムネイルだけを判断するのではなく、いくつかの決定的な場所にズームインします。このソースでは、三角形とフレームの中心によって、大きな黒いブロックよりもはるかに多くのものが明らかになります。開口部が予期せず埋められた場合、SVG 穴ガイドは、埋め込みルールと重なっている形状を区別するのに役立ちます。バックグラウンド チェックについては、透明な SVG ガイドを使用してください。

フィルタを変更する前に各バリアントを保存します

edge2-strong.svg、internal1-strong.svg、clean1-strong.svg など、実際の設定を保持するファイル名を使用します。それらを手つかずのソースのそばに保管してください。 PicSVG のページでは、結果を比較するためのローカル保存画像領域についても説明しています。このテストでは、その領域を耐久性のあるストレージとして扱うのではなく、個別に保持された SVG ファイルを使用しました。

実行中、選択したフィルターが変更されたときにダウンロード アドレスが再利用されました。したがって、各ファイルは、表示されているフィルター状態ですぐに取得されました。再利用されたアドレスは、どの結果を保持したかの信頼できる記録ではありません。ローカル ファイル名、設定メモ、および実際のファイルの内容は有用な記録です。

3 つのファイルにはすべてパスが含まれており、画像要素は含まれていませんでした。それらのカウントは、Edge 2 で 7、Internal 1 で 2、Clean 1 で 5 でした。これらのカウントは、品質ランキングではなく、さまざまな保存構造を確立します。 2 パスの結果では、テスト リファレンスに必要な形状がまだ省略されています。

3 つとも、黒の塗りつぶしと stroke="none" を持つ親グループを使用しました。したがって、薄く見える Edge 2 の境界は、これらのファイル内の塗りつぶされたジオメトリであり、中心線ストロークの証拠ではありません。 SVG ペイント仕様では、シェイプの内部のペイントと輪郭のストロークが区別されます。 ラインアート トレース ガイドでは、その区別がアートワークの選択にどのような影響を与えるかについて説明しています。

次のアプリケーションの前に保存された境界を確認してください

これらのファイルは、ルート サイズの宣言も異なります。

保存されたバリアント根元の幅と高さビューボックス
エッジ2 / 強320 ポイント × 240 ポイント0 0 320 240
内部1 / 強320 ポイント × 240 ポイント0 0 320 240
クリーン 1 / 強力960 ポイント × 720 ポイント0 0 960 720

これらは、pt 単位を含む実際に保存されたフィールドです。これらは輸入された物理的なサイズのレポートではありません。 viewBox は、SVG 座標仕様で説明されているように、SVG ビューポートにマップされる内部座標の四角形を定義します。同じレビュー サイズでバリアントをレンダリングして、その処理を検査しました。サイズ宣言が同一になるわけではありません。

ファイルを保存する前に、その特定の SVG を開いて、必要な形状、開口部、背景、宣言された境界を確認してください。次に、受信アプリケーションで必要なサイズでテストします。私たちはインポート、手動編集、印刷、またはカットを実行しませんでした。

チェックに失敗しました次のアクション
明るい領域が消える別のフィルターをソース内のその正確な領域と比較します
細いプレビューが中心線として扱われます次のワークフローを選択する前に、塗りつぶし/ストロークと実際のジオメトリを検査します。
その結果、不要な背景領域が追加されます別の効果を比較し、対照的な背景に対して保存されたファイルを検査します
保存された複数のファイルが予期せず同一に見える表示されているフィルター ラベルを再確認し、更新された各結果を個別のファイル名で保存します。
ファイルが予期しないサイズで別のアプリに入ります単位と境界を検査し、そのアプリケーションで意図したサイズを設定および確認します。

PicSVG の効果がジョブに適合する場合は、その結果を保持します。必要な領域がまだ残っていない場合は、PicSVG の代替ページで PerfectVector を無料で開始し、同じオリジナルと比較してプレビューの形状、開口部、色を確認してから、どのワークフローを保持するかを決定してください。

よくある質問

どの PicSVG フィルタが最適ですか?

画像に必要な領域と開口部を保持する効果を選択します。私たちのテストリファレンスでは、Edge 2 は境界を強調し、Internal 1 は金色の三角形を省略し、Clean 1 は背景の処理を変更しました。単一の結果がすべての可能な用途を満たすものはありませんでした。

Details Strong はあらゆる小さな機能を保持しますか?

ここでは確認できていません。Strongを固定して3つのフィルターを変更しました。その設定でも、Internal 1では対照用画像の重要な三角形が欠けました。設定名だけを頼りにせず、必要な領域を確認してください。

SVG パスが少ないほど、結果がきれいになるということですか?

いいえ。保存されたバリアントには 7 つ、2 つ、および 5 つのパスがありました。 2 つのパスのファイルは依然として私たちが望んでいた形を失っています。最小のパス数だけを選択するのではなく、保持されているアートワークとジオメトリを比較します。

PicSVG のエッジが薄いということは、SVG に中心線のストロークが含まれていることを意味しますか?

いいえ。保存した 3 つのファイルでは、ストロークがなしに設定された黒で塗りつぶされたジオメトリが使用されていました。薄く見える結果でも、領域の周囲が塗りつぶされた帯になる場合があります。必要なワークフローの実際の塗りつぶし、ストローク、パスを検査します。

情報源

  1. PicSVG 公式コンバータ — ウェブサイトの入力ガイダンス、選択可能な効果、SVG 保存ワークフロー。
  2. W3C SVG ペイント仕様 - 塗りつぶしとストロークの違い。
  3. W3C SVG 座標系 — viewBox、ビューポート マッピング、および単位。

ブログのその他の記事

PerfectVector

画像を
きれいで編集可能なベクターパスに変換

ベクター化とプレビューの確認は無料で、1日あたりの上限はありません。