描摹出的文件里面是什么样的

描摹器按对象对结果分组：最前面是背景的 <g>（如果图片有背景），然后每个独立对象各一个 <g>，每个组都在 <title> 中命名（Background、Object 1、Object 2……）。每个组里，每个形状都是一个独立的 <path> 元素，带有 fill 属性和一个 d 属性，d 用“移动到”“直线到”和三次贝塞尔曲线命令记录轮廓。形状按包含关系嵌套：包含其他形状的形状（比如包含眼睛的脸）会单独成为一个组（Part 1.1、Part 1.1.1……），组中第一条路径就是这个形状本身，完整地画在它所包含的形状下方，所以隐藏一只眼睛时露出的是脸，而不是一个洞。小于几个像素的斑点会作为未命名的路径留在它的上级组中。文件中没有描边，也没有文字元素：标志里的文字标志是填充的轮廓，而不是可编辑的字体。如果在设置中把 图层 设为 按颜色，文件就没有组，而是每种颜色一个 <path>。

一个圆形小风景 SVG，以及它的四条路径分别单独显示：蓝色圆盘、奶油色天空、藏青色山峰，以及橙色太阳和它的倒影

我们首页上的示例 SVG（左），以及它的四条路径分别单独显示：每个形状都是带有自己填充色的独立元素，可以直接选中、改色或删除。

编辑器读取的正是这种结构，使用文件自身的尺寸和坐标。每条路径都是一个可以单击选中的形状。图层列表显示文件的顶层组：形状直接放在 SVG 中的文件（按颜色描摹的结果）会作为单个图层打开，按对象分组的文件则每个组一个图层，并以组名命名。

浏览器编辑器擅长的编辑

  • 给形状改色。 选中它，选一个新的填充色。由于一条路径包含对象中该颜色的所有区域，给“蓝色”改色会一次性改掉这个对象中所有的蓝色区域；如果需要让其中两块不同，就得在桌面编辑器中拆分。
  • 移动和缩放。 拖动即可移动，用控制点调整大小。矢量缩放永远不会模糊，所以可以用同一个文件做一个页眉用的版本，再做一个 favicon 用的版本。
  • 移动单个锚点。 选中一个形状，切换到锚点工具（N）：描摹曲线上的每个锚点都会出现一个可拖动的控制点，它的曲线控制柄可以弯曲相邻的线段。这样不用离开浏览器，就能修正抖动或把某条边拉直。
  • 对齐和分布形状。 选中多个形状，让它们的边缘或中心相互对齐，或对齐到图稿（单个形状总是对齐到图稿）；选中三个或更多时，“分布”会让它们的间距相等。
  • 联集、减去、交集。 选中两个或更多形状，使用“合并形状”：联集把它们合成一个轮廓，减去从最底层的形状中挖掉上方的形状，交集只保留重叠部分，排除保留不重叠的部分，分割则把每个重叠区域切成独立的形状。曲线仍然是曲线，结果沿用最底层形状的颜色和图层，撤销一次就能恢复原来的形状。这是切割前常用的一步：把重叠的字母合成一整块，或减去一个形状做出镂空。
  • 吸附到网格。 打开磁铁并选择网格大小：之后你移动、绘制、缩放或逐点调整的内容都会落在网格上，开启期间网格会叠加显示在图稿上。编辑器会在你的浏览器中记住这个设置。
  • 复用形状，同时处理多个文件。 把选中的内容保存到“我的部件”（保存在你的浏览器中，归属你的账户，可以导出为文件），再添加到任何其他画作中。在新标签页中打开你另一个已解锁的文件，就可以在它们之间复制：每个标签页都有自己的撤销历史，并保存为各自文件的新版本。
  • 调整顺序、隐藏和锁定。 图层可以隐藏、锁定（这样点击会作用到下方的形状）、重命名和上下移动；在图层内，Ctrl+D 可创建形状副本，方向键可以微移形状。
  • 删除多余部分。 零散的斑点路径和残留的背景矩形，一键就能删除。这通常是描摹 JPEG 后的第一步编辑。
  • 导出。 保存 SVG，或按指定像素宽度导出保留透明度的 PNG。编辑已解锁的结果不会额外消耗积分。

编辑器只会打开你拥有的矢量文件：你自己上传的 SVG，或你已解锁的结果。预览是带水印的位图，无法编辑——正因如此，付费的矢量文件在付款之前都不会通过网络传给你。

更适合用桌面矢量编辑器的编辑

有些修改需要对路径动“手术”，而浏览器编辑器不提供这些功能：

  • 把一种颜色拆成独立的对象（比如两块需要分别移动的蓝色形状）：在桌面编辑器中使用“打散”（Break apart）。
  • 偏移轮廓（按固定距离扩大或缩小轮廓，比如给贴纸切割做外轮廓）。
  • 把填充转换为中心线描边，用于笔式绘图仪或单线雕刻。
  • 把文字转换为轮廓。 浏览器编辑器可以添加和保留可编辑文字，但不能把文字转成路径。

Inkscape（免费、开源）能完成以上所有操作，商业编辑器也可以。打开 SVG，根据需要使用“打散”（Break apart）、“扩张”（Outset）或节点工具，然后保存。由于文件是使用标准路径数据的普通 SVG，它和 png2svg.art 没有任何绑定。

合理的工作顺序

  1. 解锁并在编辑器中打开。删除零散的形状，修正明显的颜色问题，逐点抚平抖动的边缘，检查叠放顺序。
  2. 用“合并形状”联集或切割形状，并把该对齐的部分对齐。
  3. 保存 SVG。如果文件大小很重要，用 SVG 优化器处理一遍（去除元数据、坐标取整；请查看优化前后的对比数据）。
  4. 如果需要，在桌面编辑器中偏移或打散。
  5. 把已解锁的结果留在你的文件中：文件保存期间可以免费重新下载，在保留期内也可以随时在编辑器中重新打开。

需要注意的限制

  • 编辑器不能添加渐变；填充只能是纯色或无填充。可以添加描边（颜色和宽度），文件中已有的渐变、描边和可编辑文字都会保留。编辑器无法保留的内容会在保存前列出。
  • 非常大的描摹结果（细节丰富的插画生成的成千上万条路径）在任何浏览器中操作起来都会很慢；编辑前请先用更少的颜色数量简化描摹。
  • 导出的 PNG 是你所选尺寸的位图——请按你需要的最大尺寸导出，或者继续使用 SVG。