ロゴは、次の2 つのファイルで届きます: logo.svg 3KBで logo.png 40 KBで。 browserタブではどちらも同じように見えます。.blowそれらをプロジェクター画面を満たすためにそれらを爆破し、1 つだけがシャープなまま.tryは、それらをソーシャルプロファイルにアップロードし、唯一の1 つが受け入れられ.and ifあなたが持っているすべては、"に約束するツールpng; svgにpngを変換" 技術的にはSVGであるが、あなたのデザイナーが作ったであろうファイルではない何かをハンドバックします。
このガイドでは、2 つの形式の違いについて、各ファイルの保存内容、いつどれを使用するか、SVG をピクセルにレンダリングすると何が起こるか、PNG をベクトル形状にトレースすると回復できるものと回復できないもの、Toolz コンバーターの後ろにあるトレース エンジンからの実数が含まれており、その下にあります 画像ツールハブ。
tl;dr: SVGはベクトル形式です: それは形状をジオメトリとして保存するので、ぼかしなしで任意のサイズにスケールし、ロゴ、アイコン、図に最適です。 PNGはラスター形式です: それはピクセルの固定グリッドを保存します、ロスレス、それはスクリーンショット、詳細なアートワーク、および画像のみを受け入れる場所に合います.SVGからPNGへの移動はあなたが選択したサイズで正確です; を使用します SVG に PNG コンバーター 2 倍または4 倍でシャープな出力 PNGからSVGに移動することはトレースであり、ピクセルから形状を再構築し、元のデザインを回復しません フラットロゴやラインアートのために機能し、写真では失敗します ここでのすべての変換はクライアント側で実行され、アップロードされたものはなく、無料、サインアップはありません。
SVGとPNGの違いは何ですか?
SVG は画像を描画するための指示として説明しますが、PNG は完成した描画をピクセルとして保存します。2 つの形式に関するその他のすべては、その 1 つの違いから生じます。
SVG ファイル。W3C によって定義されます スケーラブル ベクター グラフィックス (SVG) 2、はXMLテキストです.それはパス,円,長方形,グラデーションとテキストをリストし,それぞれに座標と色があります.その中に画像が何ピクセルあるかは何も書かれていません.ブラウザがそれを表示すると,レンダラーは各形状が画面上のサイズでカバーするピクセルを計算します.そのため,同じファイルが電話と5Kモニターで鮮明です.
PNG ファイル。W3C によって次のように指定されます ポータブル ネットワーク グラフィックス ISO/IEC 15948 として公開されている は、DEFLATE で圧縮された色付きピクセルのグリッドです。圧縮はロスレスであるため、デコードするピクセルは保存されたピクセルとまったく同じです。PNG は完全なアルファ チャネルを伝送でき、チャネルあたり最大 16 ビットまで伝送できます。詳細を追加することはできません。2048 x 2048 に示されている 512 x 512 PNG では、各ピクセルが 4 x 4 ブロックにわたって伸びており、エッジは柔らかくなったりブロック状になったりします。
SVGソースと同じシンプルなバッジを次に示します:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
その4 行のマークアップが画像全体であり、240 ピクセルの幅で表示しても24,000 ピクセルで表示しても4 行のままである。 240 x 80 の同じバッジのPNG版は19,200 ピクセルを保持し、960 x 320 では307,200 を保持する。
SVG と PNG: どの形式を使用する必要がありますか?
スケーリングしなければならない図形で作られたものには SVG を、ラスター画像のみを受け入れるピクセルまたはどこかへ向かったものには PNG を使用します。 この表では、それらを並べて設定します:
| 財産 | svg | png |
|---|---|---|
| 画像モデル | ベクトル: パス、図形、テキスト | ラスター: 固定ピクセル グリッド |
| 標準 | W3C SVG 2 | W3C PNG、 ISO/IEC 15948 |
| スケーリング | 任意のサイズでシャープ | 拡大するとぼかしやブロックが発生します |
| 圧縮 | テキスト;サーバー上の gzip | Lossless DEFLATE |
| 透明度 | はいって | はい、フルアルファ |
| ロゴのファイルサイズ | 通常は数KBです | ピクセル寸法と共に成長します |
| 写真のファイルサイズ | 非実用的 | 大型だがリーズナブル |
| エクスポート後に編集可能 | はい、ベクトル エディター内の形状と色 | ピクセル単位でピクセルだけ |
| 内側にテキスト | 選択可能と検索可能な状態を維持できます | ピクセルに焼きました |
| スクリプトを含めることができます | はい、これはセキュリティ上の懸念事項です | いやー |
| ソーシャルアップロード、オフィスアプリ、電子メールで受け入れられます | しばしばそうではありません | ほとんどいつも |
| に最適 | ロゴ、アイコン、図表、チャート、UIイラスト | スクリーンショット、詳細なアート、固定サイズのアセット |
実用的なルール: SVG をあらゆるベクトルのマスターとして保持し、そこから各宛先が必要とするサイズで PNG をエクスポートします。ピクセルを図形に戻すのは、図形をピクセルに変えるという点で損失が大きいため、ロゴの PNG だけを保持しないでください。
写真の場合、どちらの形式も配信には正しい選択ではありません。 PNG の写真は大きく、SVG の写真は XML でラップされた PNG か、トレースされた近似のいずれかです。 JPEG、WebP、または AVIF はそのジョブ用に構築されています; webp とは何か、いつ使用するのか 写真側をカバーします.
なぜこれほど多くの場所がSVGのアップロードを拒否するのでしょうか?
SVG は、画像だけでなくアクティブなコンテンツを含めることができるドキュメントであるためです。 SVG 仕様では許可されています <script> 要素、イベント ハンドラー属性など onload、 外部 リソース へ リンク および 埋め込み HTML 通し <foreignObject>。 SVG アップロードを受け入れ、後で独自のドメインからそれを提供するサイトは、ファイルを直接開くすべての訪問者に対して他の誰かを実行する可能性があります & #39; s JavaScript.
SVG を安全にサニタイズすることは可能ですが、巧妙に実行されているため、多くのプラットフォームはより単純なルートを採用しています。プロフィール写真、マーケットプレイスのリスト、広告ネットワーク、多くの CMS メディア ライブラリ、およびほとんどの電子メール クライアントは、ラスター形式のみを受け入れます。オフィス ドキュメントやチャット アプリもよりパッチ的なサポートを受けています。
これが、SVG を PNG に変換する最も一般的な理由です。 SVG が を介してロードされるため、SVG を画像として描画するブラウザは安全なケースです <img> element または onto a canvas では、スクリプトを実行したり、外部ファイルをフェッチしたりすることはできません。 Toolz コンバータは SVG を正確にそのようにレンダリングするため、未知のソースからファイルを安全に変換できます。
品質を損なうことなくSVGをPNGに変換するにはどうすればよいですか?
必要なピクセルサイズ、またはそれ以上でSVGをレンダリングし、その後PNGをスケールアップすることはありません。 SVGはジオメトリであるため、4xで描画することは1xで描画するのと同じくらい正確です; この方向のすべての品質損失は、出力が小さすぎるピッキングから発生します。
ザ・ SVG に PNG コンバーター 次の順序でサイズをワークアウトします:
- SVG ルートが設定されている場合
widthあんどheight、それらは、などの単位で用いられるmm、pt、inあんどcmCSSピクセルに変換されます. - a しか持っていない場合
viewBox、viewBoxの幅と高さが使用されます。 - どちらもない場合は、1024 x 1024 で描画されます。
- 最長の辺がまだ 512 ピクセル未満の場合、宣言されたサイズで描画される 24 x 24 のアイコンは小さすぎて使用できないため、その辺が 512 になるまで描画が比例して拡大されます。
- SVG スケール オプションでは、結果に 1、2、または 4 を掛けます。
宣言している上のバッジを取ります width="240" height="80"。 longest side is under 512, so it is enlarged to 512 x 171. at 2x the PNG comes out at 1024x342, with the unpainted corners left transparent.最長辺は512 以下なので、512 x 171 に拡大されます。 結果の下のメモには、サイズとそれがどこから来たのかが記載されているため、推測はありません。
ほとんどの電話やラップトップがCSSピクセルあたり2 つ以上のデバイスピクセルを使用する画面の場合は2 倍、印刷または大型ディスプレイの場合は4 倍を選択します。出力上限は100 メガピクセルまたは片側16,384 ピクセルで、50 MBを超えるSVGファイルは拒否されます; より小さいスケールで最初のケースが修正されます。
2 種類のコンテンツはレンダリングに耐えられない。 image として描かれた SVG はファイルの外側で何もフェッチできないため、URL でリンクされた画像と Web フォントは省略され、テキストはシステム フォントに戻る; エクスポート前にベクター エディターでテキストをアウトラインに変換すると、それが回避されます。そしてアニメーション化された SVG は単一の静止フレームになります。
SVGをPNG、JPG、PDFに変換する必要がありますか?
デフォルトでは PNG に変換し、宛先が PNG を拒否した場合や写真のようなグラフィック用に小さなファイルが必要な場合にのみ JPG に変換し、印刷または電子メールでドキュメントが必要な場合は PDF に変換します。
| 対象 | 透明度 | サイズ | 失うもの | に使用する |
|---|---|---|---|---|
| png | 保管 | 中 | スケーラビリティ | アップロード、スライド、アプリアセット、背景が透明なものなら何でも |
| JPG | 白で満たされています | 複雑なアートのための最小 | スケーラビリティ、透明性、エッジのシャープネス | JPGのみを取るフォーム、電子メールの添付ファイル |
| PDF (ラスタライズ) | 透明な領域は白いページを表示します | より大きい | スケーラビリティ、選択可能なテキスト、クリック可能なリンク | プルーフシート、チャートの印刷、デザイナー以外の人へのアートワークの送信 |
ザ・ SVGからJPGへのコンバーター Jpeg にはアルファ チャネルがないため、透明な領域を白で埋め、品質スライダーを適用します。フラットカラーの鮮明なエッジは、JPEG 圧縮によってかすかなリンギングが残る場所であるため、ロゴは通常、PNG としてよりよく見えます。
ザ・ SVG から PDF コンバーター 明確な警告に値する ラスタライズ: 各SVGはピクセルに描画され、PNGとして保存され、ページに配置されます PDFにはベクトル形状が含まれておらず、テキストを選択できず、十分にズームするとピクセルが表示されます 2 倍と4 倍がより多くのピクセルを詰め込んでいる間、ページサイズは固定されたままであるため、スケールオプションは依然として役立ちます (画像に合わせると1 インチあたり72、144、または288 ピクセル) 印刷所がベクトルPDFを要求した場合、あたり ISO 32000 PDF は真のベクトル パスを伝送できますが、そのためには画像コンバーターではなくベクトル エディター & #39;s エクスポートが必要です。
PNGからSVGへの変換は何をしますか?
PNG を SVG に変換すると、画像がトレースされます。ピクセルを同様の色の領域にグループ化し、各領域の周囲に輪郭をフィットさせ、塗りつぶされたベクトル パスを生成します。PNG には、それを作成した形状の記録が含まれていないため、元のベクトル ファイルは見つかりません。出力内のすべてのエッジは、ピクセルから抽出された推定値です。
後ろのトレーサー PNG から SVG あんど SVG に JPG on Toolz は imagetracerjs で、バックグラウンド Web Worker で実行されるため、ページの応答性が維持されます。次の 2 つのステップで機能します:
- 色の削減. 画像は小さなパレット、つまり「色」で選択した数字 (2、8、または 16) に縮小されます。
- エッジフィッティング. 各色層について、トレーサーは接続されたすべての領域の境界を歩き、直線と曲線にフィットし、領域ごとに 1 つの充填パスを生成します。
各パスはまた、独自の色で1 ピクセルの輪郭を取得します。それなしでは、隣接する形状は、それらのエッジが完全に満たされないヘアラインギャップを残し、背景は薄い白い縫い目として表示されます。
詳細は、それらのアウトラインがピクセルにどれだけ忠実に従うかを制御します:
| 詳細 | 線および曲線の許容 | 斑点が下に落ちました | プレブラー | 結果 |
|---|---|---|---|---|
| ロウ | 2px | 16点 | わずかな | よりスムーズでシンプル、より小さなファイル |
| 中 (デフォルト) | 1px | 8 ポイント | なし | バランス |
| 高い | 0.5px | 2 ポイント | なし | ピクセルを忠実に追跡し、小さな形状を維持し、重くします |
トレースされた SVG は、その SVG で記述されます width あんど height 元の画像サイズに設定し、 a viewBox トレースされたピクセルなので、予想されるサイズで開き、どこに配置してもきれいに拡大縮小します。
トレースは何がうまくいくのか、どこで失敗するのか?
そもそもベクターのような画像では、トレースがうまく機能します。フラットな色、ハードなエッジ、少数の色。連続したトーンのものでは失敗します。写真には見つけるべきエッジがなく、勾配だけがあるためです。
| ソース | どのようにトレースします | 提案された設定 |
|---|---|---|
| フラットロゴ、2～6色 | きれいな形、小さいファイル | 8色、ミディアム |
| 白黒のラインアート、署名、スタンプ | とてもきれい | 中または高の2色 |
| グラデーションのあるアイコン | グラデーションがバンドに変わります | 16 色、中、その後エディタで簡素化します |
| 紙の上にスキャンした描画 | 紙の質感が斑点になります | 2色、低 |
| 圧縮アーティファクトを備えた JPG ロゴ | エッジに沿った斑点、形状としてトレースされた背景 | 低い細部; 後で背景の形を削除します |
| テキスト付きのスクリーンショット | 文字はブロビーな輪郭になります | PNGとして保管してください |
| 写真 | 斑点のあるポスター化された形状、巨大なファイル | 跡はつけない |
写真の行は好みの問題ではありません。 Toolz エンジンのテストでは、16 色でトレースされた 2000 px のノイズの多い写真が 28 秒かかり、46 MB の SVG が生成されました。これは、元の画像よりも何倍も重く、それでも目に見えて悪いものです。ノイズはトレーサーに何千もの小さな領域を与え、それぞれが独自の座標を持つ独自のパスになります。
そのテストは、コンバータがトレース前に一辺が1200 ピクセルより長い任意の画像を1200 までスケールダウンする理由です トレースはその後数分ではなく秒で終了し、出力は元の幅と高さを保つため、SVGがどのように配置されるかについては何も変更されません 2 分後も実行中のトレースは、タブを無期限にビジー状態にするのではなく、より少ない色またはより低い詳細を示唆するメッセージで停止されます。
JPGソースは2 つの特定の問題を追加します。 JPEG圧縮は鋭いエッジの周りにかすかなブロックを残し、トレーサーは迷子の形に変えることができます; 低いディテールはわずかにぼかし、それに対抗するためにスペックを落とします。 そしてJPGは透明度を持たないので、ロゴの周りの白いボックスはアートワークの後ろにもう1 つ塗りつぶされた形になります。 ベクトルエディタでは、その形を選択して削除します。
PNGロゴからクリーンなSVGを取得するにはどうすればよいですか?
デザインを保存する最も単純な設定から始めて、プレビューを見て、何かが欠けている場合にのみ色や詳細を追加します。より重い設定では、悪いトレースが修正されることはほとんどありません。; それらにはさらに多くのパスが追加されます。
信頼できるシーケンス:
- 持っているソースの中で最大かつクリーンなものを使用します。 PNG エクスポートはスクリーンショットを上回り、スクリーンショットはプリントアウトの写真を上回ります。
- ロゴの色を数え、その上または上に最も近いオプションを選択します。 2 色のマークは 2 を望み、5 色のマークは 8 を望みます。
- 中でトレースします。 previewと結果の下に表示されているファイルサイズを確認してください。
- 斑点や粗いエッジがある場合は、Low でリトレースします。薄いディテールが消えた場合は、High でリトレースします。
- 最後のステップのベクトル エディターで結果を開きます。背景図形がある場合は削除し、その図形であるべき図形をマージし、トレースされたテキストを右フォントの実テキストに置き換えます。
トレース後に表示されるファイルサイズがPNGより大きい場合、それを信号として扱います。 logoの場合、それは通常ノイズがトレースされていることを意味します; それ以外の場合は通常、画像がラスターのままである必要があることを意味します。
トレースが切断機、レーザー彫刻機、または刺繍ソフトウェアに向かう場合、カラフルなデザインであっても 2 色が正解であることがよくあります。これらの機械は塗りつぶしではなく輪郭から作業するためです。
これらのフォーマットを1 か所で変換できますか?
はい。 the general 画像コンバーター JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、CR2、DNG、PDF とともに SVG を受け入れ、JPG、PNG、WebP、GIF、ICO、PDF、または SVG を書き込みます。ターゲットとして SVG を選択すると、同じ色と詳細設定を持つ任意のラスター ソースがトレースされます。SVG ソースのラスター ターゲットを選択すると、SVG スケール オプションが表示されます。
専用のペア ページは独自のソース形式のみを受け入れ、SVG ページにはスケールが表示され、トレース ページには色と詳細が表示されるなど、画面上のオプションが関連した状態に保たれます。
1 つの組み合わせが提供されていません: PDFからSVGへ コンバータはメッセージでそれを拒否し、コンバータが提案するルートは2 つのステップです: PDFページを最初にPNGに変換してからPNGをトレースする PDFがベクトルプログラムから来た場合、そのプログラムからSVGをエクスポートすると、実際のパスが維持され、より良いオプションになります。
SVG はファビコンになることもあります。 ICO にレンダリングすると、各アイコン サイズで正方形の PNG 画像が生成されます。最小値 512 px は、小さなアイコン SVG が 256 px のきれいなエントリを与えることを意味します。 Favicon のサイズと ICO ファイル内の内容 どのサイズを含めるかをカバーします.
SVGとPNGの変換はプライベートですか?
はい。レンダリング、エンコード、トレースはすべてクライアント側でブラウザ タブ内で行われるため、ファイルはアップロードされません。SVG デコード ステップとトレーサーは、ファイルが必要な場合にのみダウンロードされるため、ラスター形式間のみ変換する場合でもページがライトに保たれます。
制限事項は 1 か所で、最大 50 MB の SVG ファイル、最大 100 メガピクセルと 16,384 ピクセルのレンダリング出力、最大 100 メガピクセルのラスター ソース、最長辺の最大 1200 px でのトレース、および 1 トレースあたり 2 分間の上限が設定されています。ツールは無料で、登録はなく、コンバージョンには 1 日あたりの制限があります。
