SVG から PNG への変換 Scalable Vector Graphics ↔ Portable Network Graphics 無料 オンライン 安全

SVG を PNG に変換する理由

SVG は絵ではありません。絵を描くための指示の集まりです。ここに円を描く、そこに曲線を描く、この形をあの色で塗る、この単語をそのフォントで書く、というような。ピクセルではなく指示なので、SVG はぼやけることなくどんなサイズでも表示でき、そのためロゴ、アイコン、グラフ、イラストの好まれる形式になっています。しかし、驚くほど多くのソフトウェアが、その指示に従えません。メールプログラム、ソーシャルネットワーク、多くのアップロードフォーム、プレゼンテーションツール、古いエディターは、ピクセルでできた画像を求めます。だから人は SVG を PNG に変換します。絵を持っていて、あらゆるものが受け付ける形で必要なのです。

PNG は、この仕事にとって自然な選択です。すべてのピクセルを描かれたとおりに保ち、透明度も保つので、背景のないロゴは背景のないロゴのままです。あらゆるブラウザー、エディター、オフィスプログラム、電話が理解します。主に平坦な色とシャープな縁でできた SVG にとって、PNG はそれを忠実に再現する形式です。

このページは SVG を PNG にお使いのブラウザー内で変換します。ファイルの指示は、選んだサイズで一度だけ従われ、結果が PNG として保存されます。絵は、ファイル内の何も実行できないサンドボックスの中で描画され、何もアップロードされません。以下では、仕組み、何が保たれるか、一つの重要な限界は何か、サイズの選び方を説明します。

変換の仕組み

指示は一度だけ従われる

SVG はお使いのブラウザー内で開かれ、ブラウザーは SVG に対していつもすることをします。描画の指示に従い、結果を塗ります。その描画は、選んだサイズの画像として取り込まれ、PNG として保存されます。処理は端末の中で行われるので、待つものも、あとで削除するものもありません。

何も実行できないサンドボックス

SVG ファイルは原理的に、スクリプトやほかのものへの参照を含められます。それが決してリスクにならないように、絵は、ファイル内の何も実行できないサンドボックスの中で描画されます。描かれるのは形だけです。これは、完全には信頼できない場所からダウンロードしたファイルでも安全です。

サイズを選ぶ

SVG には固有のピクセルがないので、PNG に何ピクセルを持たせるかはあなたが決めます。幅を選ぶと、高さは作品の縦横比から決まります。サイズが大きいほどシャープな画像になり、ファイルは重くなります。

保たれるもの

描かれたままのすべての形

すべての形は、描かれたまま保たれます。曲線、塗り、線、重なりです。PNG は、SVG がブラウザーでどう見えるかの忠実な画像です。

作品固有の縦横比

絵の縦横比は保たれるので、引き伸ばされたり押しつぶされたりしません。SVG が高さの二倍の幅なら、PNG もそうなります。

透明度

透明度は保たれます。SVG の塗りのない部分は PNG でも透けたままで、これはまさに、色のついた背景に置かれるロゴやアイコンに望むものです。

SVG を PNG に変換する前に知っておくべきこと

PNG は永遠に一つのサイズ

PNG は永遠に一つのサイズで、SVG はそうではありませんでした。これがこのページで最も重要なことです。小さなサイズを選び、あとで大きなものが必要になったら、PNG を拡大するとぼやけます。だから、これまでに必要になる最大のサイズを選んでください。大きな画像を小さくするほうが、その逆よりずっと簡単で、将来の使用のために SVG を保管しておくこともいつでもできます。

ほかから来るフォントと画像は解決されない

SVG がほかから取り込むフォントと画像は、描画されるサンドボックスでは解決されません。絵の中の文字が、ファイルがサーバーから読み込むウェブフォントで組まれていると、PNG ではシステムフォントに置き換わり、文字の見た目が変わります。SVG がファイルの外に保存された画像を参照していると、その画像は欠けます。最良の結果のためには、フォントがアウトラインに変換され、画像が埋め込まれた SVG を使ってください。

ファイルサイズは画像によって決まる

単純なロゴは、ごく小さな PNG になります。大きなサイズの精細なイラストは、重いものになります。結果が目的に対して大きすぎるなら、サイズを小さくするか、PNG を圧縮に通してください。

ここで SVG を PNG に変換する方法

絵を追加する

SVG をページにドロップするか、端末から選んでください。それはお使いのブラウザー内で読み込まれ、アップロードされません。

サイズを選ぶ

PNG の幅を選んでください。画像が使われる最も大きな場所を考え、そのサイズを選びます。

変換してダウンロードする

ボタンを押して、PNG をダウンロードしてください。開いて、縁と文字を見て、透明な部分が今も透けているか確認してください。

SVG と PNG を詳しく見る

ベクターとラスター

SVG はベクター形式で、形とそれを描くための規則を保存します。PNG はラスター形式で、色のついた点の格子を保存します。ベクターは、形が毎回描き直されるので、どんなサイズにも拡大縮小できます。ラスターには固定の点の数があり、拡大すると点が大きくなるだけです。SVG を PNG に変換するとは、規則から固定の格子へ移ることで、格子の選択はあなたのものです。

なぜ JPG ではなく PNG なのか

絵には、PNG がほぼ常により良い答えです。シャープな縁をきれいに保ち、透明度も保ちます。JPG は平坦な色と縁をぼやけさせ、透明度もありません。何かが JPG しか受け付けないなら、SVG を JPG に変換を使ってください。そうでなければ PNG にとどまってください。

解像度と画面

現代の画面は、古いものの二倍か三倍の密度で画像を表示することがよくあります。PNG がそのような画面のページ上で決まったサイズで表示されるなら、そのサイズの二倍の幅にしておけば、くっきり見えます。

具体的なよくある場面

メールとソーシャルネットワークのためのロゴ

多くのメールプログラムとソーシャルプラットフォームは、SVG を受け付けません。求められるサイズで SVG を PNG に変換すれば、ロゴは透明な背景のまま通ります。

文書とプレゼンテーションのための画像

オフィスプログラムは、SVG をどれだけうまく扱えるかが異なります。PNG は常に動きます。絵が投影されるなら、大きな画面でもシャープなままであるように、余裕のあるサイズを選んでください。

アプリとサイトのためのアイコン

SVG として描かれたアイコンセットは、ベクターを読まない場所のために、PNG 版が必要なことがよくあります。必要なサイズで作り、SVG を原本として保管してください。

グラフと図

グラフを SVG として書き出すツールは、一部のシステムが拒否するファイルを残します。グラフの PNG は、手間なく報告書、ウェブページ、メッセージに載せられます。

SVG を PNG に変換する前の実用的な助言

SVG がブラウザーでどう見えるかを確認する

まず SVG をブラウザーで開いてください。そこで見えるものが、PNG が示すものです。文字がシステムにないフォントを使っているなら、PNG でも同じ置き換えが起こると予想してください。

精度のために文字をアウトラインにする

正確な文字が重要なら、SVG を保存する前に、描画ソフトで文字をアウトラインに変換してください。文字は形になり、描くのにフォントは必要なくなります。

画像を埋め込む

SVG に画像が含まれるなら、リンクせずにファイルに埋め込んでください。リンクされた画像は、サンドボックスには見つけられません。

将来を考えてサイズを選ぶ

画像がほかにどこで使われるかを考えてください。ポスターに十分な大きさのサイズは、ウェブページにも十分です。小さなアイコン用に作られたサイズは、ほかではどこでも役に立ちません。

変換する前によくある質問

どのサイズを選ぶべきですか？

必要になる最大のものです。PNG はいつでも縮小できますが、ぼやけずに拡大することはできません。

透明度は残りますか？

はい。SVG の透けた背景は、PNG でも透けたままです。

なぜ文字が違って見えるのですか？

フォントがほかから読み込まれ、サンドボックスで解決されなかったからです。代わりにシステムフォントが使われました。これを避けるには、元のファイルで文字をアウトラインに変換してください。

なぜリンクされた画像が欠けているのですか？

ファイルの外から取り込まれる画像は解決されません。SVG に埋め込んでください。

ファイルはアップロードされますか？

いいえ。変換はお使いのブラウザー内で実行され、ファイルが端末の外に出ることはありません。

ベクターに戻れますか？

トレースによってのみ可能です。PNG を SVG に変換は画像を形にしますが、それは推測であって復元ではありません。元の SVG を保管してください。

SVG を PNG に変換するときの賢い選び方

送り先を決める

ウェブページには控えめなサイズが必要です。印刷には大きなものが必要です。アイコンには小さく単純なものが必要です。PNG を場所に合わせてください。

ほかの選択肢と比べる

ファビコンには、SVG を ICO に変換が、複数のサイズを一つにしたファイルを作ります。どんな拡大でもシャープなままの文書には、SVG を PDF に変換が絵を絵のまま保ちます。

SVG を保管する

SVG が原本です。必要なときに、どんなサイズにも、どんな形式にもできます。大切に保管してください。

変換後に良い結果を得る

縁を確認する

曲線と斜めの線を拡大してください。なめらかなはずです。ギザギザに見えるなら、用途に対してサイズが小さすぎたので、より大きなものが助けになります。

色のついた背景で確認する

PNG を表示される色の上に置いてください。元にやわらかい影があると、透明な縁にかすかな縁取りが見えることがあり、今のうちに見つけるほうがよいです。

必要なら軽くする

ファイルが重いなら、PNG を圧縮が、見た目をほとんど変えずに重さを減らします。

SVG を PNG に変換するときに最大限活用する

SVG を PNG に変換する前に SVG を準備する

元のファイルへの数分の配慮が、あとで多くの手間を省きます。絵に適切なサイズかビューボックスがあることを確認し、文字をアウトライン化し、画像を埋め込み、見せたくない隠しレイヤーを取り除いてください。きれいな SVG はきれいな PNG になり、変換を二度やる必要もなくなります。

一度にいくつかのサイズを作る

いくつかの異なる幅のロゴが必要なら、それぞれに一度ずつ SVG を PNG に変換し、ファイルに幅で名前をつけてください。フッター用の小さい版、ページ用の中くらいの版、印刷用の大きい版で、ほとんどの必要を満たし、用意しておけば、依頼のたびに戻ってくる手間が省けます。

背景について考える

PNG は透明度を保つので、ロゴは後ろの色を帯びます。暗いページの暗いロゴは消えてしまいます。PNG を明るい背景と暗い背景の両方で確認し、ロゴにそれぞれの版が必要なら、色の違う二つの SVG を作り、両方の SVG を PNG に変換してください。

意味のある名前を保つ

画像が何で、どれだけの大きさかを表す名前を使ってください。たとえば logo-1600 のように。一年後に、画像でいっぱいのフォルダーでそのファイルを見つけたとき、どれかがすぐにわかります。

プライバシーと取り扱い

なぜ絵にはローカルでの変換が重要なのか

ロゴ、図面、デザインは、公開される前は機密かもしれません。多くのオンラインコンバーターは、ファイルをサーバーにアップロードし、処理して、結果を送り返し、しばらくの間、管理できない機械にコピーが存在します。ここではお使いのブラウザー自身が作業するので、絵は端末にとどまります。

ページを離れるとどうなるか

ページを閉じると、変換された画像はブラウザーから消えるので、先にダウンロードしてください。あなたの絵に関するものは何も保持されません。

うまくいかない場合

画像が空白になる

SVG にサイズやビューボックスがないのかもしれません。テキストエディターで開き、幅と高さ、またはビューボックスがあるか確認するか、描画ソフトで修正してください。

画像が切り取られる

一部の SVG には、宣言された領域の外に出る要素があります。すべてが収まるように、元のビューボックスを調整してください。

非常に大きなサイズでページが固まる

すべてがお使いの端末で実行され、巨大な画像にはメモリが必要です。より小さなサイズを選ぶか、コンピューターを使ってください。

関連ツール

同じ系統のツールが、隣接する作業を担います。JPG には、SVG を JPG に変換を使ってください。ファビコンやアプリアイコンには、SVG を ICO に変換が答えで、どんな拡大でもシャープなままの文書には、SVG を PDF に変換です。画像を形にトレースするには、PNG を SVG に変換が反対方向に進みます。PNG ができたら、PNG を WebP に変換がウェブ向けに軽くし、PNG を JPG に変換が、透明度が不要なときに小さなファイルを作ります。

実例

会社のロゴが SVG であり、ソーシャルネットワークが、幅が少なくとも 800 ピクセルの PNG しか受け付けないとします。SVG をここにドロップし、念のため幅を 1600 ピクセルに選んで、ボタンを押します。しばらくして、同じ縦横比で、くっきりした縁と透明な背景の PNG をダウンロードします。それをアップロードすると、ロゴはどんな色の上でもきれいに表示されます。SVG は原本としてフォルダーに残ります。

短いチェックリスト

変換する前

SVG をブラウザーで開いてください。必要な最大のサイズを決めてください。フォントがアウトライン化され、画像が埋め込まれていることを確かめてください。

変換している間

ファイルが準備できるまでページにとどまってください。

変換したあと

PNG を開き、縁と文字を確認し、実際の背景でテストして、SVG を保管してください。

よくある間違い

小さすぎるサイズを選ぶ

PNG は永遠に一つのサイズです。あとで拡大するとぼやけます。余裕をもって選んでください。

リンクされたフォントと画像に頼る

サンドボックスでは解決されません。文字をアウトライン化し、画像を埋め込んでください。

SVG を捨ててしまう

保管してください。限りなく拡大縮小できる唯一のバージョンです。

絵は端末の中にとどまる

変換はローカルで行われます。絵はお使いのブラウザー自身が読み込み、そこで描画し、PNG として返します。何もアップロードされないので、サーバーにコピーが残ることはなく、ほかの誰にも見られません。未公開のデザインにとって、それが SVG を PNG に変換する安全な方法です。

まとめ

ここで SVG を PNG に変換するには、絵をドロップし、サイズを選んで、ボタンを押します。SVG は絵ではなく、絵を描くための指示であり、ここではその指示が選んだサイズで一度だけ従われ、結果が PNG として保存されます。絵は、ファイル内の何も実行できないサンドボックスの中で描画され、何もアップロードされません。すべての形は、作品固有の縦横比と透明度とともに、描かれたまま保たれます。PNG は永遠に一つのサイズなので、必要になる最大のものを選んでください。あとで拡大するとぼやけるからです。ほかから取り込まれるフォントと画像は解決されないので、ウェブフォントで組まれた文字は、システムのものに置き換わります。