PNG画像をSVGに変換する方法 [閉まっている]


266

PNG画像をSVGに変換する方法


21
プログラム的にかどうか?どの言語、プラットフォーム?
Michael Petrotta

一部のアプリケーションまたはオペレーティングシステムコマンドを使用しますか?オペレーティングシステムを使用している場合は、どのオペレーティングシステムかを教えてください。ありがとう
Mahesh Velaga 2009

回答:


130

画像をアップロードして結果を確認できるWebサイトがあります。

http://vectormagic.com/home

ただし、svg-imageをダウンロードする場合は、登録する必要があります。(登録すると、2つの画像を無料で入手できます)


122

potrace入力ファイルとしてPNGサポートしていませが、PNM はサポートしてます。
したがって、まずconvertPNGからPNMへ:

convert file.png file.pnm        # PNG to PNM
potrace file.pnm -s -o file.svg  # PNM to SVG

オプションについて説明する

  • potrace -s=>出力ファイルはS VGです
  • potrace -o file.svg =>出力を書き込む file.svg

入力ファイル= 2017.png 入力ファイル

convert 2017.png 2017.pnm

一時ファイル= 2017.pnm

potrace 2017.pnm -s -o 2017.svg

出力ファイル= 2017.svg 出力ファイル

脚本

ykarikosは、私が改良したスクリプトpng2svg.shを提案します。

#!/bin/bash

File_png="${1?:Usage: $0 file.png}"

if [[ ! -s "$File_png" ]]; then
  echo >&2 "The first argument ($File_png)"
  echo >&2 "must be a file having a size greater than zero"
  ( set -x ; ls -s "$File_png" )
  exit 1
fi

File="${File_png%.*}"

convert "$File_png" "$File.pnm"        # PNG to PNM
potrace "$File.pnm" -s -o "$File.svg"  # PNM to SVG
rm "$File.pnm"                         # Remove PNM

1行のコマンド

多くのファイルを変換したい場合は、次の1行のコマンドも使用できます。

( set -x ; for f_png in *.png ; do f="${f_png%.png}" ; convert "$f_png" "$f.pnm" && potrace "$f.pnm" -s -o "$f.svg" ; done )

こちらもご覧ください

Wikipedia で、ラスターとベクターのコンバーターの優れた比較もご覧ください。


2
Potraceを使用してpnmからsvgに変換すると、画像の色が失われます。色を保つ方法はありますか?
コーダー、2014年

1
@mundellaさん、こんにちは。私は常にpotrace白黒のアイコンに使用しています。ご意見をいただきありがとうございます。しかし、申し訳ありませんが、色を保持する方法はわかりません... Ho!アイデアがあります。元の画像の色が少ない場合(たとえば、3つの異なる色)、3つの初期画像(各色に1つ)を作成できます。次にSVGに変換します。最後に、3つのSVGコンテンツを1つのファイルにマージします(SVGはXMLベースです)。これがお役に立てば
幸い

@olibre実際に同じことを行うプラットフォームはありますか
Ami Kamboj

1
こんにちは@AmiKamboj。あなたの質問がよくわかりません。コマンドconvertpotraceは、多くのプラットフォームで使用できます。Linuxベースのコンピューターを使用しています。私は昨日これらのコマンドを使用して、スキャンした紙からSVGを生成しました。結果を確認できます。cpp-frug.github.io / images / Cpp-President-2017.svgターゲットについて詳しく説明してください。何が欲しい/不思議ですか?あなたのニーズ/希望は何ですか?乾杯;-)
olibre 2016

1
私はそこにあるほぼすべてのオンラインxからsvgへのコンバーターを使用しました。potrace npmパッケージはそれらをすべて水から吹き飛ばしました。それは素晴らしいです。
tsteve

59

pngはビットマップ画像スタイルであり、SVGはビットマップをサポートするベクターベースのグラフィックデザインであるため、画像をベクターに変換するのではなく、ベクターベースのフォーマットに埋め込まれた画像のみです。これは無料のhttp://www.inkscape.org/を使用して行うことができます。埋め込みますが、必要に応じて(potraceを使用して)パスに変換しようとするLive Traceのようなエンジンも備えています。Adobe illustratorのライブトレースを参照してください(商用)はその例です。

http://graphicssoft.about.com/od/illustrator/ss/sflivetrace.htm


1
Inkscapeのライブトレースを使用して、長い間失われたオリジナルのロゴを再作成しました。最新バージョンでいくつかの改善がなされていない限り、それは少し見当違いです。そうは言っても、Inkscapeでいくつかのロゴを手動で追跡して、うまく管理しました。
AnonJr 2009

12
これはInkscapeでこれを行う方法の説明です:wiki.inkscape.org/wiki/index.php/Potrace
Segal-Halevi

素晴らしいコメント。Chromeには問題がないのにiOS 7.1 Safariにはsvgに埋め込まれた画像が表示されないことに気付きました
ProblemsOfSumit

28

あなたはpotraceを見てみたいかもしれません。


1
このPotraceは、使用方法がわかっている場合は非常に正確です。ただし、マルチカラーではありません。1。)ファイルをBMPに変換します。黒でトレースしたい4.)変換5.)幅と高さをオリジナルに変更6.)正確なトレースを評価します。
PauAI

18

かんたん

  1. Inkscapeをダウンロード(完全無料)
  2. この短いYouTubeビデオの指示に従ってください

ご覧のように、他の多くの賢い.svgを実行したい場合は、Inkscapeを使用して実行することもできます。

非技術的な観察:私は個人的に、この方法を「無料」のウェブサイト提供よりも好んでいます。なぜなら、登​​録を頻繁に要求することの他に、画像をアップロードすることによって、すべての実用的な用語で、ウェブサイトの所有者に画像を提供しているからです。


1
なぜ反対票か。私はこのアプローチを非常にうまく使用しています。少なくとも礼儀正しい理由を説明して、人々があなたの洞察から利益を得ることができるようにしてください。
パンチョ2016

5
これらの指示に従うと、画像はSVG XMLでラップされるだけです。パスデータに何も変換されません。
ロバート

@ロバート-情報をありがとう、私の目的のためにうまくいったので、幸いにも無知でした。ただし、これはInkscapeがPNGからSVGへの完全な変換を実行できるという事実を損なうものではありません。関心のある人のために説明するために、短い説明ビデオクリップを含めるように私の回答を修正しました。
パンチョ

本当にそうですか?生成されたSVGを確認したところ、mobilefishメソッドとは異なり、パスデータが含まれているようです...
dario_ramos

正当な理由なしに時々これを反対票を投じている人々がいます、そして私はそれが悪意があるという意見を形成し始めています。本当に理由がある場合-問題ありません。怠惰になるのをやめて、このコミュニティを提供することでこのコミュニティに何らかの価値を追加してください。
パンチョ

15

アドビイラストレーターと:

Adobe Illustratorを開きます。[ファイル]をクリックして[開く]を選択し、.PNGファイルをプログラムにロードします。必要に応じて画像を編集してから、.SVGファイルとして保存します。「ファイル」をクリックし、「名前を付けて保存」を選択します。新しいファイル名を作成するか、既存の名前を使用します。選択したファイルの種類がSVGであることを確認してください。ディレクトリを選択し、[保存]をクリックしてファイルを保存します。

または

オンラインコンバーター http://image.online-convert.com/convert-to-svg

必要な変更を加えることができるため、私はAIを好みます

幸運を


3
online-convert.comの+1。いくつかのモノクロシルエットで試してみました。完璧に実行されました。また、完全に無料のようです。
nedR 2013

いや、より良いコンバーターの1つ...ありがとう
JayD 2014

1
Illustratorがこれを熟考したことに気づかなかった。
Doyle Lewis、

10

驚いたことに、potrace黒と白しか処理できません。ユースケースとしてはそれで問題ないかもしれませんが、カラートレーシングの欠如が問題であると考える人もいます。

個人的には、ベクターマジックで満足のいく結果が得られました

それでも完璧ではありません。


9

potraceimagemagickを使用している人への注意事項、透明度のあるPNG画像をPPMに変換することは、あまりうまく機能していないようです。これを処理するために-flattenフラグを使用する例を次に示しますconvert

sudo apt-get install potrace imagemagick
convert -flatten input.png output.ppm
potrace -s output.ppm -o output.svg
rm output.ppm

もう1つの興味深い現象は、PPM(256 * 3色、つまりRGB)、PGM(256色、つまりグレースケール)、またはPBM(2色、つまり白または黒のみ)を入力形式として使用できることです。私の限られた観察から、アンチエイリアス処理された画像では、PPMPGM(私が見る限り同じSVGを生成する)が色付きの領域を縮小し、PBMが色付きの領域を拡大しているようです(少しだけです)。おそらくこれがpixel > (256 / 2)テストとテストの違いpixel > 0です。つまり、ファイル拡張子を変更することで、3つを切り替えることができます。以下はPBMを使用します:

sudo apt-get install potrace imagemagick
convert -flatten input.png output.pbm
potrace -s output.pbm -o output.svg
rm output.pbm

7

あなたも試すことができます http://image.online-convert.com/convert-to-svgをます

私はいつもそれを自分のニーズに使用しています。


複雑な画像でも本当に魅力的です。私はこのツールに本当に助言します。
–AtıfcanErgin 2016

残念ながら私のために働いていませんでした。
adamj

画像に透明度がある場合、うまく機能しません
Genaut

スクリプトが自分の写真を撮って、完全にレイヤー化されたSVGを結果として得ることを期待することはできません。そのようなことはありません。単純な形状があり、パスを取得したい場合は、これで完了です。私はそのページでたくさんのフォントアイコンを作りました、そして私のために決して失敗しませんでした。
thednp

@thednp私の画像は白黒で表示されました
iOSAndroidWindowsMo​​bileAppsDev 2017

7

私は同じことをやろうとしているので、この質問と答えを見つけました!言及されている他のツールの一部を使用したくありませんでした。(私の電子メールを譲りたくないし、支払いたくない)。Inkscape(v0.91)はかなり良い仕事をすることができることがわかりました。このチュートリアルは、すばやく簡単に理解できます。

InkskapeとShift + Alt + Bでビットマップを選択するのと同じくらい簡単です。

Potraceに基づくInksape Traceビットマップツールによるエッジ検出


4

.pngから.svgに変換する理由によっては、問題を解決する必要がない場合もあります。.png(ラスター)から.svg(ベクター)への変換は、使用可能なツールに精通していない場合や、貿易によるグラフィックデザイナーではない場合に苦労することがあります。

誰かが大きな高解像度ファイル(例:1024x1024)を送ってきた場合、GIMPで必要なほぼすべてのサイズにサイズ変更できます。多くの場合、解像度(1インチあたりのピクセル数)が低すぎると、画像のサイズ変更に問題が発生します。GIMPでこれを修正するには、次の方法があります。

  1. File -> Open:.pngファイル
  2. Image -> Image Properties:解像度と色空間を確認してください。約300 ppiの解像度が必要です。ほとんどの場合、色空間をRGBにする必要があります。
  3. Image -> Mode:RGBに設定
  4. Image -> Scale Image:サイズをそのままにして、Y解像度を300以上に設定します。ヒットスケール。
  5. Image -> Scale Image:解像度は300になり、画像のサイズをほぼ任意のサイズに変更できます。

.svgファイルのサイズ変更ほど簡単ではありませんが、すでに大きな高解像度の画像がある場合は、.pngを.svgに変換するよりも確実に簡単で高速です。


2

私はあなたがこれを行うソフトウェアを書きたいと思っていると思います。単純にそれを行うには、行を見つけてベクトルを設定するだけです。インテリジェントに行うには、図形を図面にフィットさせます(モデルフィット)。さらに、ビットマップ領域(シェームまたはテクスチャを適用してモデリングできない領域)を確認する必要があります。このルートを実行することは、かなりの時間がかかり、グラフィックスとコンピュータービジョンの知識が少し必要になるため、お勧めしません。ただし、出力は元の出力よりもはるかに優れており、スケーリングもはるかに優れています。



0

このツールは現在非常によく機能しています。

http://www.mobilefish.com/services/image2svg/image2svg.php


17
これは、実際のベクターグラフィックスではなく、svgに画像を埋め込みます
PaulGobéeSep

これは他のオンラインコンバーターが正しく変換できなかった私の色のpngの1つを変換しました。ブラウザで開くことができるので動作していると思いましたが、他のツールで開こうとするとエラーになります。たぶん、上記のコメントのためでしょう。
vida

-1

Linuxシステムを使用している場合は、imagemagickが最適です。すなわち

convert somefile.png somefile.svg

これは、さまざまな形式のヒープで機能します。

ビデオやオーディオ(ffmpeg)などの他のメディアについて は、pngからsvgへの明確な記述を知っています。それはまだメディア関連です。

ffmpeg -i somefile.mp3 somefile.ogg

たくさんのファイルを通過したい場合のヒントです。基本的なシェルトリックを使用したループ。

for f in *.jpg; do convert $f ${f%jpg}png; done

これはjpgを削除し、必要な変換を指示するpngを追加します。


2
Imagemagickは「Linux」だけでなく、他のプラットフォームでも動作します。
Lunatik 2012

25
これは技術的には機能しますが、生成されたsvgファイルは実際にはベクトルグラフィックではありませ。元のビットマップが「そのまま」含まれているだけです。したがって、拡大しても、ラスターイメージの品質は低下します。
Erel Segal-Halevi 2012年

7
@archeyDevilいいえ、それはSVGへの「変換」ではなく、空のSVG内へのビットマップの「埋め込み」です。だれにも役に立たない。
アダム

4
@archeyDevil質問のタイトルは「convert ... to SVG」です。あなたの答えは変換されません。埋め込みます。PNGはビットマップ形式、SVGはベクトル形式です。大きな違い。埋め込みは役に立たず、SOの質問に値しませんIMHO
Adam

3
変換されないことを承知しています。しかし、私はそうしました。ベクトルの説明を必要としないが、ファイルタイプ間の迅速で汚い変更が必要な人のためにこれを投稿してください。
DarkFox 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.