一个靠谱的 png 转 svg 工具

Qingwa · 2026 年2 月 12 日 08:27

今天将logo转为 svg，试了好几个在线工具，都很不可靠，只有这个工具，转化的非常完美：

再看一下其他的…不忍直视啊：

最后一个是 adobe 的在线工具啊

StackNi · 2026 年2 月 12 日 11:30

建议去补一补与位图和矢量图有关的知识

Qingwa · 2026 年2 月 12 日 11:30

快来解释下（听说这是潜入了png才效果好的

StackNi · 2026 年2 月 12 日 11:38

PNG是位图格式，用一个个像素点来表示图像，一放大锯齿就出来了。
SVG是矢量图格式，用数学公式来表示图像，它诞生的目的就是无论如何缩放都不会失真，因为它存的是路径和公式，不是点阵。

你听到的那个说法“嵌入了PNG才效果好”其实有点把因果搞反了。
有些网站转出来的SVG，里面直接嵌了一份PNG数据，表面上是个矢量文件，实际放大一看，该糊还是糊。这种“套壳”做法不是让SVG变强了，是绕过了矢量化的难题。

真正效果好的SVG，是靠算法把位图重新拟合成曲线，或者靠人一笔一笔描出来的。
不是嵌入PNG效果会变好，而是有些网站把PNG伪装成SVG，你没放大看，所以误以为这个网站转出来的图片质量好，其实卵用没有。

StackNi · 2026 年2 月 12 日 11:48

其实我的表述还不够严谨，png只是一个例子。所有位图图像（png、bmp）包括压缩格式的图像（jpg）在转换成svg的时候都是需要算法才能实现真正的位图→矢量图的转换

有些工具选择直面这个难题，所以生成的图片看起来会有些奇怪，但是它确确实实是生成了无论如何缩放也不会失真的矢量图。

而有些工具选择直接内嵌图片资源进svg，这就好比在原图上套了层svg的壳，这样还不如用原图。

你可以自己尝试一下，对比看看位图和矢量图在放大之后的细节。

L11 · 2026 年2 月 12 日 13:20

啊这，最初创建的logo不是矢量图？

L11 · 2026 年2 月 12 日 13:24

看了下，不就是把png转成base64塞进去嘛，你这工具水得很啊

L11 · 2026 年2 月 12 日 14:01

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   version="1.1"
   id="svg1"
   width="161.00053"
   height="68.399239"
   viewBox="0 0 161.00053 68.399239"
   sodipodi:docname="1.svg"
   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1">
    <linearGradient
       id="linearGradient7"
       inkscape:collect="always">
      <stop
         style="stop-color:#ff0101;stop-opacity:1;"
         offset="0"
         id="stop7" />
      <stop
         style="stop-color:#ba0101;stop-opacity:1;"
         offset="1"
         id="stop8" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7"
       id="linearGradient8"
       x1="81.31263"
       y1="-0.7014696"
       x2="81.31263"
       y2="66.993477"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7"
       id="linearGradient2"
       gradientUnits="userSpaceOnUse"
       x1="81.31263"
       y1="-0.7014696"
       x2="81.31263"
       y2="66.993477" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7"
       id="linearGradient3"
       gradientUnits="userSpaceOnUse"
       x1="81.31263"
       y1="-0.7014696"
       x2="81.31263"
       y2="66.993477" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7"
       id="linearGradient4"
       gradientUnits="userSpaceOnUse"
       x1="81.31263"
       y1="-0.7014696"
       x2="81.31263"
       y2="66.993477" />
  </defs>
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#111111"
     borderopacity="1"
     inkscape:showpageshadow="0"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="1"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="2.8133333"
     inkscape:cx="110.90047"
     inkscape:cy="9.9526066"
     inkscape:window-width="1858"
     inkscape:window-height="1058"
     inkscape:window-x="55"
     inkscape:window-y="-6"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2">
    <inkscape:page
       x="0"
       y="0"
       width="161.00053"
       height="68.399239"
       id="page2"
       margin="0"
       bleed="0" />
  </sodipodi:namedview>
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="Image 1"
     transform="translate(-0.10146436,0.16498515)">
    <g
       id="g5"
       style="display:inline;fill:url(#linearGradient8)"
       inkscape:export-filename="g5.svg"
       inkscape:export-xdpi="96"
       inkscape:export-ydpi="96">
      <path
         style="display:inline;fill:url(#linearGradient2);fill-opacity:1;stroke:#ffffff;stroke-width:0.152"
         d="M 4.147131,16.77703 0.18850595,45.869782 H 22.557879 l 5.278167,-29.029917 z"
         id="path1" />
      <path
         style="fill:url(#linearGradient3);fill-opacity:1;stroke:#ffffff;stroke-width:0.152"
         d="M 39.58827,-0.08886256 31.368483,50.34064 c 0,0 -0.35545,1.110782 -2.08827,1.066351 -1.910545,0 -5.953791,-0.177726 -5.953791,-0.177726 l -2.976896,16.928318 24.037322,-0.177725 c 0,0 7.020143,-1.110782 8.530806,-9.063981 C 54.428318,50.962678 63.02577,-0.04443128 63.02577,-0.04443128 Z"
         id="path2" />
      <path
         id="path3"
         style="display:inline;opacity:1;fill:url(#linearGradient4);fill-opacity:1;stroke:#ffffff;stroke-width:0.152"
         d="m 99.4375,0.17773438 0.5957,0.29296874 -13.132809,14.95507788 -19.509766,0.09375 -0.15625,23.091797 9.142578,0.06445 c 0,0 1.161954,0.503001 0.09375,2.136719 -1.0682,1.633719 -6.73502,7.530235 -9.908203,8.818359 -1.040482,0.843812 -6.021484,0.763672 -6.021484,0.763672 l 0.158203,17.5625 17.876953,0.03125 c 0,0 6.28347,-3.770761 7.697266,-10.49414 3.36877,6.161692 7.068736,10.337555 8.828124,10.40039 1.759389,0.06284 21.425778,0.0625 21.425778,0.0625 0,0 7.3582,-5.878684 8.20118,-11.783203 4.05073,6.476492 10.14843,11.720703 10.14843,11.720703 l 23.5625,0.0625 V 52.466797 c 0,0 -15.28023,-0.441787 -21.02734,-15.595703 3.27907,0.06787 22.00781,-0.259766 22.00781,-0.259766 L 161.01953,17.0625 H 137.29297 L 125.91797,0.17773438 Z M 111.12305,22.259766 118.09766,34.966797 105.87891,46.875 99.169922,34.390625 Z" />
    </g>
  </g>
</svg>

用inkscape描的，看看效果

TecNico · 2026 年2 月 12 日 14:27

小青蛙试试这个。

Qingwa · 2026 年2 月 12 日 14:33

啊，这个啊，我居然把它忘了

StackNi · 2026 年2 月 13 日 02:25

这个我试过，效果是真的好，但就是要钱

kat · 2026 年2 月 13 日 05:36

figma最近刚新增了位图转矢量的功能。

xiaokonglong · 2026 年2 月 13 日 05:43

我都是用Ai手工描边, 转矢量.

Hoothin · 2026 年2 月 14 日 07:20

还是用vtracer写个python吧，这样image嵌入splash screen image，后面怕是会被discourse清洗掉

Qingwa · 2026 年2 月 14 日 08:14

啊？你说被谁清洗掉？

Qingwa · 2026 年2 月 14 日 08:23

搞定，我让虾帮我转换好了。

Dalieba · 2026 年2 月 14 日 15:43

偶还是用Inkscape吧

Dalieba · 2026 年2 月 14 日 15:45

SVG使用一系列专门的指令来表示图像的，那些解析SVG的代码里面才有数学公式。