如何将PNG图像转换为SVG?[关闭]


266

如何将PNG图像转换为SVG?


21
是否以编程方式?什么语言,平台?
Michael Petrotta,09年

通过某些应用程序还是通过操作系统命令?如果通过操作系统,您可以告诉使用哪个操作系统。。谢谢
Mahesh Velaga

Answers:


130

有一个网站,您可以在其中上传图片并查看结果。

http://vectormagic.com/home

但是,如果您要下载svg图片,则需要注册。(如果注册,您将免费获得2张图片)


122

potrace支持PNG作为输入文件,但支持PNM
因此,首先convert从PNG到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

单行命令

如果要转换许多文件,也可以使用以下单行命令:

( 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时,图像失去色彩。有什么方法可以保留色彩吗?
编码器

1
嗨@mundella。我一直都使用potrace黑白图标。感谢您的反馈意见。但是对不起,不知道如何保存颜色……Ho!我有一个主意:如果您的原始图像只有很少的颜色(例如三种独特的颜色),则可以创建三幅初始图像(每种颜色一个)。然后转换为SVG。最后,将三个SVG内容合并到一个文件中(SVG基于XML)。希望这可以帮助...干杯;-)
olibre 2014年

@olibre是否有任何实用的平台做同样的事情
Ami Kamboj '16

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/免费的。它会嵌入它,但是它也有一个像Live Trace这样的引擎,如果您愿意的话,它将尝试将其转换为路径(使用Potrace)。请参见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

很棒的评论。我们注意到,iOS 7.1 Safari将不会显示嵌入到svg中的图像,而Chrome则没有问题
ProblemsOfSumit

28

您可能想看看potrace


1
当您知道如何使用时,此Potrace非常准确:但不是多色的。1.)将文件转换为BMP 2。)(对于准确的部分)将bmp转换为高分辨率(拉伸)3.)对形状进行着色您要以黑色描画4.)转换5.)将宽度和高度更改为原始6.)欣赏准确的描画。
2015年

18

简单

  1. 下载Inkscape(完全免费)
  2. 请按照此YouTube短片中的说明进行操作

如您所见,如果您想做很多其他的.svg聪明的事情,您也可以使用Inkscape来做。

一个非技术性的观察:我个人更喜欢这种方法而不是“免费”网站产品,因为除了经常需要注册之外,通过上传图片,实际上是将图片提供给网站所有者。


1
为什么要下票?我非常成功地使用了这种方法。至少有礼貌地解释为什么人们可以从您的见解中受益。
Pancho

5
遵循这些说明只能将图像包装为SVG XML-不会将任何内容转换为路径数据。
罗伯特

@Robert-感谢您提供信息,我非常无知,因为它可以很好地达到我的目的。但是,这并不影响Inkscape能够执行完整的PNG到SVG转换的事实-还有更多。为了向有兴趣的人说明,我修改了答案,包括一个简短的说明性视频剪辑。
潘乔

真的是这样吗?我检查了生成的SVG,它似乎具有路径数据,这与mobilefish方法不同……
dario_ramos

有些人不时地在无正当理由的情况下对此表示不满,我开始形成一种恶意的观点。如果确实有原因-没问题,请不要变得懒惰,并通过提供它为该社区增加一些价值。
Pancho

15

使用Adobe illustrator:

打开Adobe Illustrator。单击“文件”,然后选择“打开”以将.PNG文件加载到程序中。根据需要编辑图像,然后将其另存为.SVG文件。单击“文件”,然后选择“另存为”。创建一个新的文件名或使用现有的名称。确保所选文件类型为SVG。选择一个目录,然后单击“保存”以保存文件。

要么

在线转换器 http://image.online-convert.com/convert-to-svg

我更喜欢AI,因为您可以进行任何必要的更改

祝好运


3
+1表示online-convert.com。现在尝试了几个单色剪影。完美无瑕的表现。似乎也完全免费。
nedR 2013年

是的,更好的转换器之一...谢谢
JayD 2014年

1
没意识到Illustrator已经熟透了。已经拥有.ai的所有功能,这将为我节省大量时间。
Doyle Lewis

10

令我惊讶的是,potrace只能处理黑白图像。这可能适合您的用例,但有些人可能会认为缺少颜色跟踪会带来问题。

就个人而言,我使用Vector Magic取得了令人满意的结果

仍然不是完美的。


9

给那些使用potraceimagemagick的人的注释,将具有透明性的PNG图像转换为PPM似乎效果不佳。以下是使用-flatten标记on convert来处理此问题的示例:

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

另一个有趣的现象是,您可以使用PPM(256 * 3种颜色,即RGB),PGM(256种颜色,即灰度)或PBM(2种颜色,即仅白色或黑色)作为输入格式。从我的有限观察来看,似乎在抗锯齿图像上,PPMPGM(据我所知产生的SVG相同)会缩小着色区域,而PBM会扩展着色区域(尽管只有一点)。大概这就是pixel > (256 / 2)测试与pixel > 0测试之间的差异。您可以通过更改文件扩展名(即)在这三个之间切换。以下使用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ıfcan埃尔金

不幸的是对我没用。
adamj '16

如果图像具有透明度
不佳

您不能指望脚本为您自己拍照并获得完美分层的SVG,因此没有这种事情。如果您的形状很简单,并且想要获取路径,则可以执行此操作。我在该页面上做了很多字体图标,但对我而言从未失败。
thednp

@thednp我的图像黑白相间
iOSAndroidWindowsWindowsMo​​bileAppsDev

7

我在尝试做同样的事情时就发现了这个问题和答案!我不想使用提到的其他一些工具。(不想放弃我的电子邮件,也不想付款)。我发现Inkscape(v0.91)可以做得很好。本教程快速易懂。

就像在Inkskape和Shift + Alt + B中选择位图一样简单

基于Potrace的Inksape Trace位图工具进行边缘检测


4

根据您为什么要从.png转换为.svg的原因,您可能不必经历麻烦。如果您对可用的工具不是很熟悉,或者您不是行业的图形设计师,那么从.png(光栅)转换为.svg(矢量)可能会很麻烦。

如果有人向您发送了一个高分辨率的大文件(例如1024x1024),则您可以将其调整为几乎在GIMP中所需的任何大小。通常,如果分辨率(每英寸的像素数)太低,则在调整图像大小时会遇到问题。要在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

我假设您希望编写软件来执行此操作。要天真地做到这一点,您只需找到线并设置向量即可。为了智能地执行此操作,您尝试将形状拟合到图形上(模型拟合)。另外,您应该尝试确定位图区域(无法通过阴影或应用纹理建模的区域。我不建议您采用这种方法,因为这将花费大量时间,并且需要一些图形和计算机视觉知识。但是,输出将比原始输出好得多并且可扩展得多。




-1

如果您在某些Linux系统上,imagemagick是完美的。即

convert somefile.png somefile.svg

这适用于不同格式的堆。

对于其他媒体,例如视频和音频,请使用(ffmpeg) 我知道您清楚地将png表示为svg;它仍然与媒体有关。

ffmpeg -i somefile.mp3 somefile.ogg

如果您希望浏览大量文件,这只是一个提示;使用基本Shell技巧的循环

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

那将删除jpg并添加png,以告诉convert您想要什么。


2
Imagemagick可以在其他平台上运行,而不仅仅是“ Linux”。
卢纳提克

25
从技术上讲这是可行的,但是生成的svg文件并不是真正的矢量图形-它仅包含原始位图“按原样”。因此,当您放大它时,仍然会降低光栅图像的质量。
Erel Segal-Halevi 2012年

7
@archeyDevil不,这不是“转换”为SVG,而是“嵌入”一个空SVG内的位图。没有用。
亚当

4
@archeyDevil问题标题为“ convert ... to SVG”。您的答案不会转换。它嵌入。PNG是位图格式,SVG是矢量格式。巨大的差异。嵌入是无用的,不值得提出一个恕我直言的问题
亚当(Adam)

3
我知道它不会转换。但是我做到了;将其发布给那些不需要向量说明的人,而只需在文件类型之间进行快速而肮脏的更改即可。
DarkFox 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.