背景移除将主体与其周围环境分离开来,这样你就可以将其放置在 透明背景上、更换场景或将其合成为新设计。在底层,你正在估算一个 alpha 遮罩——一个从 0 到 1 的每像素不透明度——然后将前景alpha 合成到 其他东西上。这是 Porter–Duff 的数学原理,也是“边缘”和 直接 alpha 与预乘 alpha 等常见陷阱的起因。有关预乘和线性颜色的实用指南,请参阅 微软的 Win2D 笔记、 Søren Sandmann 和 Lomont 关于线性混合的文章。
如果你能控制拍摄,将背景涂成纯色(通常是绿色),然后抠掉该色调。 这种方法速度快,在电影和广播中经过实战检验,非常适合视频。权衡之处在于灯光和服装: 彩色光会溢出到边缘(尤其是头发),所以你需要使用去溢工具来中和污染。 好的入门资料包括 Nuke 的文档、 Mixing Light 和一个实践性的 Fusion 演示。
对于背景杂乱的单张图片,交互式算法需要用户提供一些提示——例如,一个宽松的 矩形或涂鸦——然后收敛到一个清晰的蒙版。经典方法是 GrabCut (书籍章节),它学习前景/背景的颜色模型,并迭代使用图割来分离它们。 你会在 GIMP 的前景选择中看到类似的想法,它基于 SIOX (ImageJ 插件)。
抠图解决在纤细边界(头发、毛皮、烟雾、玻璃)处的部分透明度问题。经典的 闭式抠图 接受一个三元图(绝对前景/绝对背景/未知),并求解一个具有强边缘保真度的 alpha 线性系统。现代的 深度图像抠图 在 Adobe Composition-1K 数据集上训练神经网络(MMEditing 文档),并使用 SAD、MSE、梯度和连通性等指标进行评估(基准解释器)。
相关的分割工作也很有用: DeepLabv3+ 使用编码器-解码器和空洞卷积来细化边界 (PDF); Mask R-CNN 提供每个实例的蒙版 (PDF);以及 SAM (Segment Anything) 是一个 可提示的基础模型,可在不熟悉的图像上进行零样本蒙版生成。
学术著作报告了在 Composition-1K 上的 SAD、MSE、梯度和连通性错误。如果你正在选择一个模型,请查找这些指标 (指标定义; 背景抠图指标部分)。 对于人像/视频,MODNet 和 背景抠图 V2 很强大;对于一般的“显著物体”图像, U2-Net 是一个坚实的基线;对于棘手的透明度, FBA 可能更干净。
可缩放矢量图形 (SVG) 是一种广泛使用的标记语言,用于在 XML 中描述二维图形。与 JPEG、PNG 或 GIF 等存储图像为单个像素集合的栅格图形格式不同,SVG 通 过数学公式定义形状、线条和颜色。这种根本差异使 SVG 文件可以缩放至任何尺寸而不会损失质量,使其非常适合响应式 Web 设计、复杂的插图和需要在各种设备和分辨率上保持清晰度的徽标。
SVG 图形由矢量形状(如圆形、矩形、多边形和路径)组成,这些形状由二维空间中的点描述,以及使用 SVG 标记语言定义的笔触、填充和其他视觉属性。SVG 文件中的每个元素和属性都直接对应于 SVG 渲染模型的一部分,从而能够精细地控制图形的外观。SVG 文件可以用任何文本编辑器创建和编辑,因为它们是纯文本文件,并且还可以使用各种软件库以编程方式生成和操作它们。
SVG 的一个关键特性是其 DOM 接口。SVG 图像可以直接嵌入到 HTML 文档中,并且由于它们成为文档对象模型 (DOM) 的一部分,因此可以像 HTML 元素一样与它们进行交互。这种集成允许通过 JavaScript 和 CSS 动态更改 SVG 图像的属性,从而实现动画、交互性和图形的实时更新。例如,SVG 元素的颜色、大小或位置可以根据用户交互(例如鼠标移动或点击)或图形所表示数据的变化而改变。
SVG 支持广泛的图形效果,包括渐变、图案、剪切路径和蒙版,这些效果提供了创建复杂视觉演示的广泛选项。SVG 还包括滤镜效果,例如模糊、颜色操作和阴影,这些效果的定义方式类似于 CSS 滤镜,但专门设计用于矢量图形。这些效果允许开发人员和设计人员直接在 SVG 标记中应用复杂的视觉增强,从而可以在不诉诸栅格图像的情况下实现详细的插图和纹理效果。
交互性和动画是 SVG 最引人注目的用途之一。使用 <animate>、<set> 和 <animateTransform> 元素,SVG 提供了一个声明性语法,用于随着时间的推移对图形的属性和特性进行动画处理。此外,SVG 与 JavaScript 的集成扩展了其动画功能,从而能够实现更复杂和交互性的动画,这些动画对用户输入或其他动态事件做出反应。这种功能的结合允许创建引人入胜的 Web 应用程序、数据可视化和交互式信息图表,这些应用程序和图表可以利用 Web 技术的全部功能。
可访问性是 SVG 的另一个重要优势。SVG 图像中的文本是可选择和可搜索的,这与文本被展平的栅格图像形成对比。此功能不仅通过允许文本选择来改善用户体验,还增强了文档的可访问性,因为屏幕阅读器可以解释和朗读 SVG 图形中包含的文本。此外,SVG 支持元素的语义分组和描述性标签,这有助于向辅助技术传达图形的结构和目的。
优化和压缩对于 Web 性能至关重要,而 SVG 文件在这一领域提供了几个优势。由于基于文本,SVG 图形可以使用 GZIP 进行大量压缩,这可以极大地减小其文件大小,从而加快加载时间。此外,由于 SVG 是基于矢量的,因此它通常比高分辨率栅格图像需要的存储空间更少,特别是对于简单的图形或图标。但是,XML 的冗长性和过度复杂或编码效率低下的图形的可能性会导致 SVG 文件比必要的大。因此,SVGO(SVG 优化器)等工具通常用于清理和优化 SVG 文件,删除不必要的数据和格式,以使文件尽可能紧凑。
SVG 在响应式 Web 设计中也扮演着至关重要的角色。鉴于其可扩展性,SVG 图形可以轻松适应不同的屏幕尺寸、分辨率和方向,而不会出现质量损失或像素化问题。设计人员可以通过属性和 CSS 控制 SVG 图像的响应性,确保图形在所有设备上看起来清晰明了,从台式机显示器到智能手机。这种固有的可扩展性使 SVG 成为徽标、图标和其他需要在各种显示环境中保持视觉完整性的图形的绝佳选择。
尽管有许多优点,但 SVG 并非没有挑战和限制。例如,虽然 SVG 擅长表示形状、线条和文本等图形元素,但它不适合具有数千种颜色和渐变的复杂图像,例如照片。在这些情况下,JPEG 或 PNG 等栅格格式更合适。此外,SVG 在处理极其复杂或包含大量元素的图形时,其性能可能会受到影响,因为每个元素都必须渲染,并且可能需要对其进行动画处理或与之交互。
此外,跨浏览器兼容性历来是 SVG 面临的挑战。虽然现代 Web 浏览器已经改进了对 SVG 的支持,但不同浏览器在解释和显示 SVG 内容的方式上仍然可能存在差异。开发人员可能需要实施解决方法或后备方案,以确保其图形在所有平台上都能正确显示。辅助功能虽然强大,但需要仔细实施才能充分受益于 SVG 的功能,包括为辅助技术正确标记和构建图形。
SVG 与其他 Web 标准的集成为 Web 设计师和开发人员开辟了广泛的可能性。SVG 可以使用 CSS 进行样式化,使设计人员能够将熟悉的样式属性应用于矢量图形。它可以通过 JavaScript 进行操作,从而实现动态更改和交互。此外,由于 SVG 基于 XML,因此它可以与其他 XML 技术和数据格式(例如 RSS 源或 XML 数据库)结合使用。这种集成使 SVG 成为数据可视化的强大工具,能够生成动态的、数据驱动的图形,并实时更新。
展望未来,SVG 在 Web 开发中的作用可能会继续增长。Web 技术的进步和对高质量、交互式和响应式图形的需求不断增长,将推动 SVG 使用的进一步采用和创新。可能会开发新的特性和功能,例如改进的动画语法、更好的辅助功能和增强的性能优化,使 SVG 成为现代 Web 设计中更重要的元素。
总之,SVG 为在 Web 上创建和操作可缩放矢量图形提供了一组丰富的功能。它在不损失质量的情况下进行缩放的能力,加上对交互性、动画和可访问性的支持,使其成为设计人员和开发人 员的多功能工具。尽管存在一些挑战,例如跨浏览器兼容性和性能考虑,但 SVG 在可扩展性、响应性和与 Web 技术集成方面的优势使其成为创建动态且视觉上吸引人的在线体验的宝贵资产。