图像和照片·浏览器图像和绘图编辑器
光栅图形与矢量图形：为什么照片上的图画变成像素
· 背景
图像编辑 画布 浏览器处理
光栅图像是像素网格；矢量图形是绘制形状的指令。这篇文章解释了其中的区别，为什么照片只能是光栅，以及为什么您在其上绘制的任何内容在导出时都会继承相同的命运。
标志变得模糊，照片永远无法“矢量化”——两个日常困惑，一个解释
模糊的徽标和带注释的照片经常被归咎于同一个问题，但它们最初是不同种类的材料。矢量徽标是一组路径、笔触和填充的指令；照片是采样颜色的有限区域。编辑器将照片作为画布大小的光栅位图打开，因此在绘制线条或矩形之前，其工作世界已经是像素网格。
在照片上画一个框，将其导出，然后放大边缘。结果是一个光栅图像，其注释占据照片旁边的像素。将该文件与具有更大显示尺寸的原始 SVG 进行比较，可以看到区别：放大导出会重新采样其网格，而放大 SVG 会重新计算其路径。该编辑器不会将第一个对象变成第二个对象。
栅格：彩色单元格网格 — PNG、JPEG 和 WebP 如何存储图片以及为什么放大会产生像素
光栅图像记录网格中位置的颜色。 PNG、JPEG 和 WebP 的编码和压缩方式有所不同，但导出的图片在显示时仍会解析为像素。单像素边界、抗锯齿曲线和小标题都是最终图像中的有限样本。向上扩展文件需要插值过程来估计额外的样本；它不恢复原始绘图指令。
当注释必须在多种尺寸下保持清晰时，该限制很重要。用于一个固定显示器的屏幕截图标注可以完全正确地作为光栅导出，而用于标志、印刷品和多个界面的品牌标记通常应作为矢量资源保留。使用合成图像的编辑器，而不是替代必须独立缩放的源图稿。
矢量：以数学方式描述的形状 — SVG 等格式的路径、笔触和填充，以及为什么它们可以无损缩放
向量描述几何形状，而不是存储每个显示的像素。 SVG 路径可以指定曲线、描边宽度、填充和变换；然后渲染器计算适合当前大小的像素。这就是为什么相同的简单标记在放置在多个维度时可以保持干净的原因。该解释是格式级背景，而不是声称该编辑器发出或保留此类指令。
浏览器编辑器临时使用线条和形状手势的几何信息，这使得预览在发布前跟随指针。手势完成后，结果将绘制到光栅图层中。 Export 合成可见图层并为 PNG、JPEG 或 WebP 调用 canvas.toBlob。此路径中没有 SVG 导出或矢量项目文档，因此几何图形不会作为独立对象存在。
为什么照片本质上是光栅——传感器捕获样本，而不是形状，并且没有转换改变
照片是光栅材料，因为相机记录穿过传感器的光样本并将这些样本存储为图像数据。将照片描述为矢量需要一种解释，用发明的形状取代其纹理、噪点、阴影和不规则细节。以不同方式升级或导出可能会更改网格，但这两种操作都不会更改原始捕获包含的信息类型。
这种区别也解释了为什么照片和徽标可以在一次编辑中共存，而不会成为同一事物。徽标可能在其他地方作为矢量开始，但在此编辑器中将其绘制到光栅照片上后，组合结果是像素网格。当将来重用时，单独保留原始徽标，并将浏览器导出视为当前用途的成品图像。
在光栅上绘图：编辑器的作用 - 编辑时注释可能是形状，但导出的图像是单个网格
在手势期间，线条和形状工具的行为类似于紧凑的几何指令：编辑器知道起点、终点、轮廓和当前预览。发布后，这些指令将渲染到栅格图层中。画笔标记在制作时就是光栅涂料，并且文本在放置时被光栅化，而不是保留为可移动文本对象。因此，该会话提供了便利，但不承诺以后的对象级可编辑性。
导出使边界变得明确。可见栅格图层合成到一张画布中，然后通过浏览器编码为 PNG、JPEG 或 WebP。重新打开该文件会显示照片并标记为普通像素；它不会为收件人提供可选择的矩形、可重复使用的路径或可编辑的标题。如果您可能需要更改注释而不仅仅是共享图片，请保留分层会话或源资源。
为工作选择正确的类型 - 何时要求矢量徽标以及何时光栅导出正是您想要的
当标记本身必须移动时选择矢量资源：徽标需要多种尺寸，图表可能需要修改，或者符号必须放置在多个背景上。当目标是准备共享的屏幕截图、带有标注的校样或包含可见注释的照片时，请选择光栅导出。正确的决定取决于下次使用，而不是相信一种格式总是优越的。
浏览器图像和绘图编辑器适合第二类。它可以在照片上放置画笔、线条、矩形、椭圆和光栅文本标记，然后将合成导出为光栅文件。它无法输出 SVG 或保留矢量对象模型。如果客户要求将徽标作为独立资产，请返回原始矢量源，而不是从编辑后的像素中提取更大的版本。
要点：知道您拿着哪一个 — 浏览器图像和绘图编辑器如何按设计编辑光栅图像并导出光栅图像
可靠的心智模型很简单：编辑器可以使用几何图形来描述手势，但文档及其导出是光栅图像。每个打开的照片和编辑器图层都有一个有限的像素网格。放大该网格会对现有信息进行重新采样，并将可见图层导出到另一个栅格中。此工作流程中的任何步骤都不会从已变成像素的线条创建可重用的矢量路径。
在绘制之前检查文件类型和预期收件人。如果接收者需要查看一张完成的图片，请导出光栅并以实际显示尺寸检查其边缘。如果接收者需要编辑标记、重新着色徽标或重复缩放图稿，请提供适当的矢量或分层源。这种区别可以防止技术上有效的导出被误认为是不同类型的可交付成果。