PNG を SVG に変換 Portable Network Graphics ↔ Scalable Vector Graphics 無料 オンライン 安全
PNG ファイルを置いて、SVG を持ち帰ってください。画像をどうするかはあなたが決めます — 形に起こすか、来たときのまま残すか。どちらが何を失うかは、時間をかける前に下に書いてあります。
ファイルを変換する
ここに PNG ファイルを落とすか、選んでください。
ファイルはこの端末から出ません。すべてブラウザー内で動きます。
アップロードなし
PNG から変換
PNG へ変換
ベクトルは何が違うのか
SVGは絵ではありません。絵を描くための指図の束です。ここに半径これこれの円、ここからそこへ一本の線、この形をあの色で塗る。二〇〇一年に網の標準となり、結果ではなく図そのものを蓄えるので、十六画素の図記号を描くのと同じファイルから看板を刷ることができます。PNGやJPEGが蓄えるのは逆のもの、すなわち色のついた点の出来上がった格子であって、それを何が描いたかの記憶はありません。この非対称がこの頁のすべてを決めます。ベクトルからラスターへ行くのは、選んだ大きさで指図を描くだけのこと。逆向きに行くのは「なぞり」です。点の格子を眺めて、どんな形がそれを生んだのかを当てるのです。
どこで出会うか
社章、図記号、地図、図解、図表はSVGとして生きています。どの大きさでも読めねばならず、色を変えたくなることも多いからです。見出し図や応用の図記号もここから作られます。逆向きが要るのは、ベクトルが平たい画像にならねばならない瞬間です。SVGを映さない郵便の道具、社交網の下見、あなたより古い道具を使う人が刷る文書、写真しか受け取らない投稿の用紙。
よくある質問
写真をなぞらせたら、ひどい結果になりました。なぜですか。
なぞりはそもそも写真のために作られていないからです。似た色の領域を見つけ、その一つ一つの周りに輪郭を引く——これは平塗りの図、社章、型紙、線画には合いますが、写真では破綻します。写真ではどの領域も隣へ少しずつ溶け込んでいくからです。なぞる側は、ありもしない境を作り出さねばならず、結果は刷り物のような平らな斑か、何万もの小さな形を抱えたファイルのどちらかになります。写真ならラスターのままでいてください。
私のSVGが別の道具では違って見えるのはなぜですか。
たいていは書体です。文字を含むSVGは書体を名前で呼び、開く機械がそれを持っていることを当てにします。持っていなければ別のものが当てられ、配置がずれます。処方は、書き出す前に文字を輪郭へ変えることです。一字一字が形になり、ファイルはどこでも同じに見えます。引き換えに、文字はもう直せず、選べもしません。濾し器や混ぜ方といった進んだ効果が、食い違いのもう一つのありふれた源です。
ファイルの質は落ちますか。
二つの形式が何を収められるかによります。同じものを保つ形式どうしの変換——PNGからBMP、WAVからFLAC——では何も失われません。場所を節約するために情報を捨てる形式、たとえばJPEGやMP3への変換では、そのたびに少しずつ失われ、戻しても返ってはきません。選べる場合、このページは最小のファイルを作ることより、もとの質を保つほうに傾きます。
私のファイルはどこかへ送られますか。
いいえ。変換はあなたの機械の上、あなたの閲覧ソフトの中で行われます。ファイルはそこを離れませんし、ここには受け取りうる計算機もありません。大きなファイルを縛るのが送信ではなくあなた自身の記憶装置であるのも、あなたが変換したものが誰の記録にも——私たちの記録にも——現れえないのも、そのためです。ただし音と映像の道具は、初めて使うときにこの場所から変換の機関を取り寄せます。三十メガバイトほど、一度だけです。そのあとも仕事はすべてあなたの機械の上で行われます。
PNG を SVG に変換する理由
PNG は色付きのドットの格子です。SVG は図形で記述された図です。その違いが、それらでできることを決めます。PNG は固定サイズで、拡大するとぼやけますが、SVG はビルの側面ほどの大きさに拡大縮小でき、くっきりしたままです。ロゴ、アイコン、線画のイラストが PNG でしか見つからないことはよくあります。そのように保存された、あるいは送られたからです。そして、より大きなサイズで使う、色を変える、プロッターやカッティングマシンで切る、SVG を求めるサイトに載せる、といった必要が生じます。だから人は PNG を SVG に変換します。画像はあるのに、図がほしいのです。
そのような変換にできることとできないことについて、正直であることが大切です。ピクセルを図形に戻すことは、失われた元の図の復元ではありません。べた塗りの色の領域がどこで終わるかを見て行う、推測です。ロゴ、アイコン、線画なら、推測はしばしば正解に近くなります。写真なら、ほぼ役に立ちません。このページは二つの選択肢を提供し、時間をかける前に、それぞれの代償を伝えます。画像をトレースして図形にするか、画像を届いたままに保って SVG で包むかです。
このページは、お使いのブラウザー内で PNG を SVG に変換します。画像はサーバーにアップロードされません。まだ公開されていないロゴやデザインにとって、これは重要です。以下では、トレースの仕組み、色数の選び方、保たれるもの、そしてトレースしないのがより良い答えであるときを説明します。
変換の仕組み
画像をどうするかの二つの選択
画像をどうするかを選びます。図形になるか、届いたままの状態にとどまるかです。最初のものはトレースです。画像が解析され、一色の領域が見つけられ、その境界が、求めた色で塗られた図形として書き出されます。二つ目は包むことです。画像は変更されずに SVG ファイルの中に置かれるので、ファイルは外側が SVG、内側は同じピクセルです。
トレースは推測であり、復元ではない
トレースは、色の平らな領域がどこで終わるかを見つけ、その境界を図形として書き出します。ロゴ、アイコン、線画にはほぼ正解に近く、写真にはほぼ役に立たず、かたまりのポスターができるだけです。柔らかい端やグラデーションは、求めた色の間のくっきりした段差になります。許す色数が多いほど、結果は元に近くなり、ファイルは重くなります。
画像を保つ
代わりに画像を保つと、外側が SVG で、内側が同じピクセルのファイルが得られます。何かが .svg しか受け付けないときに役立ちますが、ベクターの図を得る方法ではありません。画像は、PNG がそうだったとおりに、拡大するとぼやけます。
保たれるもの
どちらを選んでも透明は保たれる
どちらを選んでも透明は保たれます。透けた背景は、白くなるのではなく、空のままです。背景のないロゴは背景のないロゴのままで、どんな色の上にも置けます。
比率とサイズ
トレースは、作品の比率と元のピクセルサイズを SVG の幅と高さに保つので、元のサイズでレイアウトに収まります。600 × 300 ピクセルの画像からは、600 × 300 と宣言された SVG ができ、それは自由に拡大縮小できます。
PNG を SVG に変換する前に知っておくべきこと
べた塗りの色で最もよく働く
ロゴ、アイコン、単純なイラスト、署名、スタンプ、図、線画が適した素材です。くっきりした境界のあるべた塗りの色の領域でできたものは、何でもよくトレースされます。写真、質感、柔らかいグラデーションはそうなりません。
大きな画像は縮小されて読み取られる
長辺が 1000 ピクセルより大きい画像は、そのサイズで読み取られます。SVG は今も元の寸法を運び、ベクターなので再び拡大縮小できます。だから非常に大きな PNG も問題ありませんが、最も細かい部分は、読み取りで失われるかもしれません。
色が少ないほど、図形はきれいになる
画像に合う色数を選んでください。二色のロゴには二、三色が必要です。多色のイラストにはもっと必要です。色が多すぎるとノイズの多い図形になり、少なすぎると別々の領域が結合してしまいます。
ここで PNG を SVG に変換する方法
画像を追加する
PNG をページにドロップするか、端末から選びます。お使いのブラウザー内で読み込まれ、アップロードされません。
トレースか保持かと、色を選ぶ
画像を図形にするか、届いたままにするかを決めます。トレースするなら、色数を設定します。
変換して比べる
ボタンを押して、SVG をダウンロードします。ブラウザーで開いて拡大してください。良いトレースはなめらかなままです。PNG と並べて比べ、正しくなければ、色を調整してもう一度試します。
PNG と SVG をもう少し詳しく
ラスターとベクター
PNG はラスター形式で、色付きのドットの固定された格子を保存します。SVG はベクター形式で、図形とそれを描く規則を保存します。ラスターからベクターへ行くことは、図形がどこにあるかを決めることで、それは PNG が決して記録しなかったものです。逆方向のSVG を PNG に変換は正確です。この方向は推定です。
トレースが元を復元できない理由
ロゴが PNG として保存されたとき、その曲線はドットに変えられ、端で情報の一部が失われました。トレースはドットを読み取り、それを通る曲線を提案します。提案はしばしば非常に良いものですが、元の曲線ではありません。元の SVG が存在するなら、それを使ってください。
トレースを避けるとき
写真はトレースしないでください。また、小さなロゴの細かい文字をトレースが再現することも期待しないでください。それらには、画像を届いたままに保つか、PNG を手本にして描画プログラムで作品を描き直してください。
よくある場面を詳しく
PNG でしか存在しないロゴ
クライアントがロゴを PNG で送ってきて、より大きく、あるいは色を変えて必要です。PNG を SVG に変換し、結果を確認して、描画プログラムで整えます。単純なロゴなら、結果はすばらしいものになりえます。
切断と彫刻
プロッター、カッティングマシン、レーザー彫刻機は、ベクターの輪郭から働きます。シルエットやスタンプのトレースした SVG は、彼らが必要とするものを与えます。
アイコンと単純なイラスト
フラットなアイコンはほぼ完璧にトレースされます。そのあとで、色を変え、拡大縮小し、損失なくウェブで使えます。
署名とスタンプ
白い背景でスキャンまたは撮影した署名は、文書の中できれいに拡大縮小できる、単色の SVG にトレースできます。自分のものである署名だけを使うよう注意してください。
PNG を SVG に変換する前の実際的な助言
手元で最も大きく、最もきれいな PNG から始める
ピクセルが多く、端がきれいなほど、トレースは良くなります。小さくぼやけた画像は、でこぼこした結果を与えます。
先にノイズを取り除く
斑点、迷い込んだドット、圧縮のノイズは、余分な図形になります。できれば、PNG を SVG に変換する前にエディターで画像をきれいにしてください。
高いコントラストを使う
分かれた色はよくトレースされます。二つの領域がほぼ同じ色合いの画像では、それらが一つに結合されることがあります。
PNG を保管する
PNG が元です。トレースが良くなければ、ほかの設定でもう一度試すためにそれが必要になります。
変換する前によくある質問
元のベクターが戻りますか？
いいえ。トレースは推測であり、復元ではありません。画像の中の色の境界に沿った図形を提案します。
写真がポスターのように見えるのはなぜですか？
写真には見つけるべき平らな領域がないからです。トレースはそれを色のかたまりに変えます。写真は届いたままに保ってください。
透明は残りますか？
はい、どちらを選んでも。透けた背景は空のままです。
画像を保つとどうなりますか？
外側が SVG で、内側が同じピクセルのファイルができます。何かが .svg しか受け付けないときに役立ちます。
画像はアップロードされますか？
いいえ。変換はお使いのブラウザー内で実行され、画像が端末の外に出ることはありません。
PNG に戻せますか？
はい。SVG を PNG に変換が、選んだサイズで図形を描きます。
PNG を SVG に変換するときの賢い選び方
トレースか保持か
平らな作品はトレースしてください。写真や細部の多いものは保ってください。迷ったら、トレースを試して、結果を元の隣で見てください。
ほかの出発点
画像が JPG なら、JPG を SVG に変換が同じように機能しますが、圧縮のノイズには注意が必要です。アイコンファイルには、ICO を SVG に変換が、その中の最大のサイズを読み取ります。
始めたものを保管する
PNG を SVG の隣に保管してください。それらは別のもので、それぞれに用途があります。
変換後に良い結果を得るには
描画プログラムで開く
図形と色を見てください。迷い込んだ斑点を削除し、一つであるべき図形を結合し、でこぼこになった曲線をなめらかにします。
いくつかのサイズで確認する
拡大と縮小をしてください。良いトレースは、どのサイズでも形を保ちます。
ウェブのために簡略化する
トレースした SVG は、多くの点を含んでいることがあります。パスを簡略化するツールで、見た目を変えずにファイルをかなり小さくできます。
きれいにトレースされるように PNG を準備する
色を平らにする
べた塗りであるべき部分に、かすかなグラデーションやノイズがあるなら、まずエディターで色数を減らしてください。PNG を SVG に変換するとき、トレースがよりきれいになります。
ぴったり切り抜く
空の余白と、作品の一部でないものを取り除いてください。トレースするものが少ないほど、迷い込んだ図形も少なくなります。
まず小さな部分で試す
画像が複雑なら、まず切り抜いた一部をトレースしてください。手早く見れば、設定が正しいかどうかがわかります。
PNG を SVG に変換するときに最良のトレースを得る
予想する色から始める
PNG を SVG に変換する前に、作品の色を数えてください。青、白、黒を使うロゴは三色、透明な背景を入れて四色かもしれません。その数を求めれば、デザインに合うきれいな図形が得られます。二十色を求めると、ツールは圧縮ノイズの中にわずかに異なる二十の青を見つけ、それぞれを独自の図形として描くことになります。
端に気をつける
PNG の二つの色の間の境界は、たいてい中間の色合いの柔らかい線です。画像が描かれたときに平滑化されたからです。トレースは、その柔らかい線の中のどこに端があるかを決めなければなりません。真ん中を選び、それはほぼ常に正しいのですが、非常に細い線は途切れたり太くなったりすることがあります。作品の線がわずか一、二ピクセルの幅なら、画像のより大きい版から始めてください。
白について考える
白は作品の色であることも、空の背景であることもあります。PNG に透明な背景があれば、それは空のままで、何もする必要はありません。背景が透明のない白い紙なら、トレースはそれを作品の後ろの白い図形として含みます。ロゴがほかの色の上にきれいに載るように、描画プログラムで削除したくなるかもしれません。
SVG にふさわしいサイズで使う
結果の大きな利点は、拡大縮小できることです。ポスター、看板、刺しゅうのワッペン、ファビコンに使い、より大きなファイルを頼まなくてよいことを楽しんでください。ピクセルの画像がまた必要になったときは、SVG を PNG に変換が、選んだ任意のサイズで図形を描きます。
描き直しと比べる
重要なロゴなら、トレースは終わりではなく出発点かもしれません。デザイナーはトレースした図形をレイヤーに置き、きれいな点で曲線を描き直して、扱って楽しいファイルを得られます。ロゴが会社の顔なら、その一時間は有効に使われます。日常の必要には、良いトレースで十分です。
商標や他人の作品に気をつける
ロゴや図をトレースしても、その権利は得られません。自分が所有する、または使用許可のある作品に、この変換を使ってください。自分のマークなら、古い画像を最新にする便利な方法です。
気に入った設定を残す
特定の種類の作品にうまくいく色数を見つけたら、書き留めてください。次に似たロゴやアイコンで PNG を SVG に変換するとき、きれいな図形が得られるとわかっている設定から始められます。
プライバシーと取り扱い
作品にローカル変換が重要な理由
ロゴやデザインは、公開される前は機密かもしれません。多くのオンライン変換ツールは、ファイルをサーバーにアップロードして処理し、結果を送り返し、しばらくの間、自分が管理していないマシンにコピーが存在します。ここではお使いのブラウザー自身が作業をするので、画像は端末にとどまります。
ページを離れるとどうなるか
ページを閉じると、変換されたファイルはブラウザーから消えるので、先にダウンロードしてください。画像について何も保存されません。
うまくいかないとき
トレースが斑点だらけになる
画像にノイズが含まれていました。エディターできれいにするか、色数を減らしてください。
図形が粗すぎる
色数を増やすか、より大きな PNG から始めてください。
大きな画像でページがフリーズする
すべてが端末上で実行され、大きな画像にはメモリが必要です。パソコンでもう一度試すか、先に画像を小さくしてください。
関連ツール
同じ系統のツールが、隣接する作業を担います。JPG にはJPG を SVG に変換を、アイコンファイルにはICO を SVG に変換を使ってください。ピクセルに戻すには、SVG を PNG に変換、SVG を JPG に変換、SVG を ICO に変換が、選んだサイズで図形を描きます。印刷用のベクターのページはSVG を PDF に変換から、より軽い PNG はPNG を圧縮から得られます。
実例
小さな会社が、ロゴを 500 × 500 ピクセルの PNG で送ってきたとします。白い文字の入った青い盾です。幅二メートルの横断幕に必要です。ここに PNG をドロップし、三色でのトレースを選んで、ボタンを押します。しばらくして、同じ比率の SVG をダウンロードします。そこでは盾と文字がきれいな図形になっています。描画プログラムで開き、迷い込んだ斑点を二つ削除して、横断幕に合わせて拡大します。端はくっきりしたままです。PNG はフォルダーに残ります。
短いチェックリスト
変換する前
画像が平らな作品であることを確認してください。ノイズをきれいにして、ぴったり切り抜いてください。PNG を保管してください。
変換している間
トレースか保持かを選び、色を設定してください。ファイルができるまで、ページにとどまってください。
変換したあと
SVG を開いて拡大し、PNG と比べて、描画プログラムで整えてください。
よくある間違い
写真をトレースする
写真はかたまりのポスターになります。届いたままに保ってください。
元の曲線を期待する
トレースは推測です。元の SVG が存在するなら、それを使ってください。
色が多すぎる
色が多いとノイズの多い図形になります。作品が必要とする最小限にしてください。
画像は端末の中にとどまる
変換はローカルで行われます。画像はお使いのブラウザー自身が読み、その場でトレースし、SVG として返します。何もアップロードされないので、サーバーにコピーは残らず、ほかの誰も見られません。未公開の作品にとって、それが PNG を SVG に変換する安全な方法です。
まとめ
ここで PNG を SVG に変換するには、画像をドロップし、どうするかを選んで、ボタンを押します。選ぶのは、画像を図形にするか、届いたままにするかで、それぞれの代償は、時間をかける前に、このページに書かれています。どちらを選んでも透明は保たれ、トレースは作品の比率と元のピクセルサイズを SVG の幅と高さに保ちます。トレースは推測であり、復元ではありません。色の平らな領域がどこで終わるかを見つけて、その境界を図形として書き出し、それはロゴ、アイコン、線画にはほぼ正解に近く、写真にはほぼ役に立ちません。長辺が 1000 ピクセルより大きい画像は、そのサイズで読み取られます。