矢量图

放大或缩小不变形的图像

矢量图

矢量图像(Vector graphics)是计算机图形学中的一种基于几何形状如圆形、长方形、线条和曲线等来创建的图像,这些形状是通过数学方程式定义的。与位图图像(也称为光栅图像)不同,矢量图像不依赖于像素网格,因此可以无限缩放而不会失真。矢量化或描摹是将位图图像转换为矢量图像的过程,允许进行无损放大、剪切、缝合、绘画和激光雕刻等操作​​。矢量图像的文件格式包括但不限于SVG(可缩放矢量图形)、EPS(封装式PostScript)、PDF(便携式文档格式)和AI(Adobe Illustrator),其中EPS格式是印刷行业的标准交换格式,而SVG格式是W3C标准的矢量图像格式。[0][4]矢量图是使用放置在笛卡尔平面内的几何形状创建的计算机生成的图像。平面设计师在他们选择的矢量设计程序中的画布上添加点、线和形状来创建矢量图。当在矢量文件格式中保存图像时,它会转换成描述各种点、线、曲线和多边形及其在画布上的大小、形状和位置的数学数据。打开矢量文件时,软件将存储的数据再次转换成图像,根据存储的坐标精确渲染。[5]

矢量图像(Vector graphics)是计算机图形学中的一种基于几何形状如圆形、长方形、线条和曲线等来创建的图像,这些形状是通过数学方程式定义的。与位图图像(也称为光栅图像)不同,矢量图像不依赖于像素网格,因此可以无限缩放而不会失真。矢量化或描摹是将位图图像转换为矢量图像的过程,允许进行无损放大、剪切、缝合、绘画和激光雕刻等操作​​。矢量图像的文件格式包括但不限于SVG(可缩放矢量图形)、EPS(封装式PostScript)、PDF(便携式文档格式)和AI(Adobe Illustrator),其中EPS格式是印刷行业的标准交换格式,而SVG格式是W3C标准的矢量图像格式。[1][5]

定义

矢量图是使用放置在笛卡尔平面内的几何形状创建的计算机生成的图像。平面设计师在他们选择的矢量设计程序中的画布上添加点、线和形状来创建矢量图。当在矢量文件格式中保存图像时,它会转换成描述各种点、线、曲线和多边形及其在画布上的大小、形状和位置的数学数据。打开矢量文件时,软件将存储的数据再次转换成图像,根据存储的坐标精确渲染。[6]

箭头矢量图
箭头矢量图

发展历史

矢量图的历史始于20世纪40年代中期,紧接着第一台计算机的发明。当时的平面设计先驱开始研究如何创建具有清晰线条和形状的高质量数字图像。由于早期计算机的存储空间有限,它们采用了线条和坐标来显示图像,而非像素化显示,从而催生了矢量图形的发展。矢量图形以其文件体积小且可无限缩放的特性,很快在数字图像领域中占据了一席之地。[5]

伊万·萨瑟兰,计算机辅助图形学的发明者之一,开发了Sketchpad,标志着矢量图形在技术和艺术应用中的双重用途的开始。与此同时,皮埃尔·贝塞尔为雷诺汽车设计车身时发明了贝塞尔曲线,进一步推动了矢量图形的发展。贝塞尔曲线通过控制点和数学方程定义曲线形状,使图像在尺寸变化时能够保持比例,从而实现完美的可扩展性。[5]

矢量图形在视频游戏领域也迎来了黄金时代,20世纪70年代Atari发布的《Asteroids》等街机风格游戏采用了矢量艺术,为视频游戏行业的创新开辟了新道路。随后,家庭计算机的普及,如20世纪80年代中期的苹果电脑和微软Windows操作系统,使得矢量图形更加普及,并促进了个人在家进行图形设计的能力。[5]

到了1999年,万维网联盟(W3C)采纳了SVG(可缩放矢量图形)作为标准文件格式,进一步推动了矢量图形在网页设计和数字媒体中的应用。SVG文件的文本可读性和可修改性,使其非常适合网络使用,从而确保矢量图形在视觉传达和设计中的关键作用。[5]

今天,矢量艺术已成为我们生活中不可或缺的一部分,无论是品牌设计、网页内容、动画、漫画,还是数字和平面广告,矢量图形都发挥着重要作用。其可扩展性和清晰度使得矢量设计成为展示细节和创造一致性视觉体验的首选方式,从而在多个领域内展现了其跨越时间的持久魅力和实用性。[5]

矢量数据模型

矢量数据模型把特定范围内的地理空间视为一个笛卡尔空间区域,在这一空间内,不同的地理要素以点(Point)、线(Line)、面(Polygon)三种基本几何体的形式存在。每个空间实体都通过一个或多个(x, y)坐标对来确立,这些坐标对定义的空间位置点被称为“顶点”(Vertices),顶点相连构成各种空间几何体的轮廓。线的端点或线相交的顶点称为“节点”(Nodes)。[7]

在矢量模型中,点实体由单一的顶点定义,代表空间中最基本的不可分割地理实体,这些点可以代表具体的地理位置(如遗址、地标)或抽象的点(如坐标点、标注位置),既包括自然要素也包括人造要素;线实体由两个以上的顶点序列定义,具有确定的长度和方向,通过顶点确定其起止点及任何转折点的坐标。这种方向性是矢量数据结构的一个显著特点,用于表示河流、道路等线状地理特征;面实体则由三个以上顶点组成的封闭线段定义,构成多边形,用于表示如行政区划、土壤类型、植被分布等面状地理特征。面实体的定义同样具有方向性。[7]

矢量数据模型的一个核心概念是空间实体间的拓扑关系,即点与线、线与线、点与面、线与面及面与面之间的相互关系。这些关系通过顶点和节点的相对位置来定义,比如道路交叉点可以共享一个节点或完全不相交。点与面、线与面的关系通过是否相交或相离来确定,而面与面之间的关系通过是否共享顶点或边界来定义。[7]

GIS软件利用这些拓扑关系进行空间分析,同时提供工具管理这些关系,确保如多边形之间的正确相邻关系等。在GIS空间数据库中,相邻多边形共享的边界只记录一次,以提高存储效率。[7]

EPS

Adobe 的 EPS 格式(Encapsulated PostScript)可能是最常用的矢量图像格式。这是印刷行业的标准交换格式。该格式作为导出格式受到广泛支持,但由于完整格式规格的复杂性,并非所有声称支持 EPS 的程序都能导入该格式的所有变体。Adobe Illustrator 和 CorelDRAW 的较新版本对读取和写入 EPS 有很好的支持。Ghostview 能够很好地读取 EPS 格式,但没有任何编辑功能。Inkscape 只能导出 EPS 格式。[1]

SVG

W3C 标准矢量图像格式称为 SVG(可缩放矢量图形)。Inkscape 以及 Adobe Illustrator 和 CorelDRAW 的较新版本对读取和写入 SVG 有很好的支持。可在 SVG 官网查阅有关 SVG 格式的进一步信息。[1]

PDF

Adobe 的 PDF 格式(便携式文件格式)作为一般用途不依赖平台的文件格式被极为广泛地使用。尽管该格式并非专门用于此类用途,该格式也是一种很好的矢量图像格式。Adobe 免费提供 Acrobat PDF Reader,但出售创建 PDF 文件要求的工具(执行相同任务的第三方工具也用于出售)。此类工具可与任何能够打印的程序合用。读取和编辑 PDF 文件的支持很有限。[1]

AI

Adobe Illustrator 的原生格式是 AI 格式(Adobe Illustrator Artwork),此为较早的 EPS 格式的修改版本。AI 格式得到较为广泛的支持,但没有 EPS 格式普及,大多数能读取 AI 格式的程序也能读取 EPS 格式。[1]

DXF

绘制交换格式。Autodesk 提供的一种 CAD 格式,由很多不同供应商提供的 CAD 工具使用。一些程序在读取带曲线的 DXF 文件时会遇到困难,因此桌面版本支持线条 + 曲线以及单纯线条的输出模式。[1]

优点

可扩展性如前所述,这是矢量图形的主要优点。由于矢量图形源自数学向量关系或创建直线和曲线的点之间的关系,因此它们在任何尺寸下都显得干净而精确。文件大小:矢量图形通常具有较小的文件大小,因为它们仅存储少量的点以及它们之间的数学关系。这些关系用代码表示,与存储像素相比,代码占用的内存较少。易于编辑:矢量文件很容易编辑,因为用户可以快速更改矢量关系以交换颜色或更改线条形状等。这在需要大量编辑的迭代过程中非常有用,例如图形设计易于装载:由于文件尺寸较小,因此可以轻松地将矢量文件移植和加载到不同的设备和程序。易于复制:创建矢量图像的克隆并将一个图形的某些特征复制到另一个图形也很容易。精确:放大或缩小矢量图形的能力意味着它们具有精确的外观和感觉。

缺点

细节较少:矢量文件在处理复杂图像时受到限制。例如,照片需要颜色着色和混合,而矢量文件无法像光栅文件那样提供。技能和时间要求:创建矢量文件可能需要更多的技能和时间。浏览器支持有限:Web 浏览器上对矢量图形的支持少于对光栅图形的支持。不一致:矢量图像可能因应用程序而异,具体取决于渲染和创建应用程序的兼容性等因素。

数据来源:[8]

矢量与光栅的区别

文件存储方法是光栅图像和矢量图像的主要区别之一。光栅图形将视觉信息存储为像素的二维图,也称为位图。放大光栅图像,将看到它存储的信息 - 有关每个像素颜色的数据。缩小后,像素似乎无缝混合以创建图像。相比之下,放大矢量图像将不允许看到单个像素,而是可以看到图像中元素的平滑形状和曲线。[9]

光栅图形直接将比特映射到显示空间,由固定数量的像素组成,这使得它们的可伸缩性不如矢量图形。当光栅图像放大到一定程度时,边缘会变得参差不齐,图像会出现像素化现象——即像素变得可见。光栅图形在放大时无法不牺牲图像质量[8]

矢量图形和光栅图形在外观上也有所不同。这是因为矢量图形每种颜色阴影都必须有一个独立的形状,而光栅图像的每个像素都可以是不同的颜色,更清楚地显示出细腻的色彩渐变和深度。在较大尺寸时,光栅图像的边缘会变得参差不齐,图像会像素化。矢量图像具有更好的可伸缩性。[8]

每个像素与光栅图形在计算机上占用的内存之间有一对一的关系。计算机必须存储光栅图像的每个像素的信息,而矢量图像只存储需要通过线条、曲线等连接的一系列点。因此,矢量文件通常比光栅文件小。由于这个原因,矢量图像文件比光栅图像文件更容易修改。[8]

使用合适的软件,矢量图像和光栅图像可以相互转换。Adobe Illustrator和Adobe Photoshop是允许用户将一种图像格式转换为另一种格式的软件示例。某些文件类型可以同时包含矢量和光栅元素——PDF和SVG文件就是例子。[8]

支持矢量图的软件

软件名简介
Adobe Illustrator[10]该软件为创建徽标、图形和插图提供了强大的工具,这些工具可以缩放到任何尺寸而不会失去清晰度。它专为专业人士设计,包含品牌资产创建、布局设计等高级功能。Adobe Illustrator 是 Adob​​e Creative Cloud 订阅服务的一部分​​。
Affinity Designer[11]以其无订阅模式而闻名。它提供一次性付款选项,可在 Windows、macOS 和 iPad 上使用。Affinity Designer 提供了矢量光栅设计功能的组合,允许进行广泛的创意工作,包括像素的设计和用于布局设计的无限画板。
Vectr[11]一款免费的在线矢量图形编辑器,旨在易于使用和访问。它的特点是学习曲线低,适合初学者。Vectr 允许实时协作,并提供人工智能驱动的工具来简化设计流程。对于那些刚接触矢量图形或从事协作项目且没有陡峭学习曲线的人来说,这是一个绝佳的选择。
CorelDRAW[12]它通过各种许可模式提供灵活性,包括订阅模式和一次性购买选项。CorelDRAW 以其用户友好的界面和广泛的工作流程优势而闻名。

网页设计

自2010年起,响应式网页设计逐渐成为主流,这使得网页上的图像在各种尺寸的屏幕上(从智能手机到超大型高清显示器)都需要展现出良好的视觉效果。矢量图形以其可无限缩放的特性和较小的文件体积,在网页元素设计中占据了重要位置。网页设计师虽可能不直接创建矢量图形,但必须掌握如何在网页模板中有效利用这类文件。[4]

平面设计

矢量图形在平面设计领域发挥着不可替代的作用,它使设计师能够自如地创建及缩放图形,以适应各种印刷和数字媒介的需求。设计师会根据项目需求和最终展示平台,灵活选择光栅图形或矢量图形。光栅图适合呈现高度详细的图片,而矢量图更适用于创建平面设计、插画及大幅面复制的艺术作品。[4]

广告与营销

在广告和营销领域,矢量图形因其可在多种物理和数字平台上无损放大的特性,成为设计师的首选。无论是巨型广告牌、网络广告、贴纸、产品包装、T恤设计,还是社交媒体图像,使用矢量图形都能确保品牌营销材料在任何尺寸下保持清晰。[4]

印刷业

印刷业的本质要求与图形设计、营销和广告紧密相关,高度依赖矢量图形的可扩展性。尽管某些印刷物使用光栅图像,但在大尺寸打印时可能面临质量挑战。相比之下,矢量图形使得宽幅打印能够毫无质量损失地实现,特别是在需要打印宽达六英尺的精美设计时。矢量图形软件支持创建包括宣传册、传单、菜单、海报、标志及明信片在内的各类印刷材料。[4]

新闻与编辑

尽管新闻报道和编辑领域依赖摄影和光栅化图像,但许多印刷和在线出版物也利用矢量图形或手绘作品来补充文章内容,展示了编辑图像的多样性。[4]

工程

工程师使用CAD(计算机辅助设计)软件,这是一种基于矢量的3D绘图工具,来绘制技术图纸。这些图纸包括建筑平面图、基础设施设计、电气原理图和产品模型等,需要极高的精确度。利用专业CAD软件(如CorelCAD),即便是最复杂的模型也能保持无损缩放,显示出矢量图形在工程设计中的关键作用。[4]

参考资料 12

  1. 轻轻松松 把 JPG、PNG、GIF 文件 转换成 PDF、SVG、EPS 矢量图像 — vectormagic
  2. The History of the Sketchpad Computer Program – A Complete Guide — history-computer
  3. 处理栅格图像和矢量图像 — AdobeSupport
  4. Vector Art in the World of Business — coreldraw
  5. History of Vector Graphics — .coreldraw
  6. How Do Vector Graphics Work? — coreldraw
  7. 矢量数据模型基本了解 — OSGeo中国中心
  8. What are vector graphics? — techtarget
  9. Raster vs. Vector — What’s the Difference? — coreldraw
  10. adobe
  11. Free Vector Graphics Editor — Vectr
  12. Choosing the Right Vector Graphics Software — coreldraw
广告位:底部(ad-bottom)—— 请到中台「公共区块」编辑此内容