企业官网建设流程全解析

1. 从一张“要改的logo”说起

做设计或者搞前端的，十有八九都遇到过这种场景：甲方甩过来一个logo文件，说“帮我把这个蓝色改成红色”。你双击打开一看，文件后缀是.svg，另一个文件夹里还有个.eps，两个看起来都能打开，都能缩放，好像都能改颜色。于是你凭感觉选了一个，折腾半天发现要么图层全乱，要么字体丢失，要么导出的文件在别处打开直接变样。这时候你才意识到，svg和eps虽然都被叫做“矢量图”，但骨子里完全不是一回事。

这篇文章就把这两个格式彻底掰开揉碎讲清楚，包括它们的底层原理、各自适合什么场景、互相转换怎么避坑，以及一些网上翻不到的经验细节。无论你是做前端开发、平面设计、印刷排版，还是写论文要处理图件的科研党，看完都能搞清楚到底该用哪个，以及怎么用才不出问题。

我尽量用大白话加真实案例来讲，不堆术语，但涉及关键概念的地方会把原理讲透。毕竟这两种格式牵扯到Web和印刷两大阵营，用错地方返工成本非常高。

2. 底层逻辑完全不同：一个像会自解释的网页，一个像打印机的“方言”

2.1 SVG就是一段XML文本，本质是“用文字描述图形”

SVG的全称是Scalable Vector Graphics，中文叫可缩放矢量图形。它最要命的一个特点是：它是一个纯文本文件。你用记事本打开一个SVG文件，看到的不是乱码，而是一行行类似这样的内容：

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"> <circle cx="100" cy="100" r="50" fill="#ff0000" /> <rect x="200" y="50" width="120" height="80" fill="none" stroke="#0000ff" stroke-width="2" /> </svg>

这段代码描述了一个红色圆形和一个蓝色描边的矩形。就这么简单——SVG把这套语法定义成了一条国际标准（W3C），任何浏览器、编辑器、代码库只要遵循这个标准，就能把这段文字“画”成你看到的图形。

这就是SVG最核心的身份属性：它是Web世界的一员。它天生就长在HTML里，可以被CSS直接控制颜色、大小、动画，可以被JavaScript随意增删节点，可以内联在网页中实现交互。你甚至可以直接用document.querySelector('circle')把这个圆选中，然后改它的fill属性——这在设计软件里是不可想象的操作。

这一点很多从设计转过来的人容易忽略。设计师在AI里画了一张图，导出了SVG，但他脑子里的模型仍然是“这是一个图片文件”。而在前端工程师眼里，SVG就是DOM树的一部分，就是几个标签，就是CSS可以作用的对象。

2.2 EPS基于PostScript，本质是“给打印机看的指令”

EPS全称是Encapsulated PostScript，直译是“封装的PostScript”。PostScript是Adobe在1984年推出的一种页面描述语言，它的原始目的是告诉打印机怎么在纸上画东西。那个年代激光打印机刚起步，Adobe搞了一套解释器放在打印机里，电脑只需要把一份描述“怎么画”的文本发给打印机，打印机自己把它渲染成点阵打印出来。

所以EPS文件里装的是一段用PostScript语言写的程序，描述的是“从当前点移动到哪里，画一条曲线，用什么颜色填充”之类的底层绘图指令。它不像SVG那样有明确的“矩形”“圆形”这种几何标签，而是一堆路径操作、矩阵变换、颜色设置的低级命令。

还有一点很关键：EPS本质上是个“页面封装”概念。它不光可以包含矢量图形，还可以在文件内嵌入一张位图的预览图，这样在排版软件里不用真正解释PostScript就能快速显示缩略图。这个设计是80年代那套工作流里留下的老规矩——当时的屏幕显示能力和PostScript解释速度都不行，只能预生成一张低分辨率位图方便预览。

这也是我踩过的一个大坑：有时候在某个软件里看EPS缩略图，放大全是马赛克，但真正导入到排版软件或打印机里出来的却是清晰矢量。这不是文件坏了，是缩略图机制在作怪。

2.3 打个比方：SVG像矢量化的HTML，EPS像可封装的打印语言

用一个生活化的类比来总结：

• SVG就像一篇用Markdown写的文档。源文件就是纯文字，任何文本编辑器都能打开修改，你改一个字它显示就变一个字。Web浏览器天生就会渲染它。
• EPS更像是一个Word文档导出的PDF/A或者是一个老的打印作业文件。它不是给人看的，是给“能解释PostScript的设备”（主要是打印机、发排机、排版软件）看的。

理解了这个根本区别，后面所有问题都顺了：为什么有的软件能打开SVG但打不开EPS？为什么EPS在网页上无法直接显示？为什么EPS里中文字体经常出问题？全部能从这个底层逻辑里推出来。

3. 适用场景的真正分野：Web交互选SVG，印刷出版选EPS

3.1 网页、APP、在线协作、动效，这些都是SVG的主场

SVG在Web和数字产品领域几乎是不可替代的。我整理一下它在这个领域里真正不可战胜的几个能力：

第一，可以做动画和交互。修改stroke-dasharray实现线条描边动画，用<animateTransform>做路径变换，甚至配合JavaScript做拖拽、点击、数据绑定的图表交互。你让EPS来做这些？EPS连在网页里怎么显示都是个大问题。

第二，体积小且极致可压缩。因为是文本格式，SVG可以走gzip压缩（前端常见的.svg.gz），一个复杂的图标压缩后可能只有几百字节。而EPS如果嵌入了预览图，体积会明显膨胀，同样内容的矢量图EPS可能比SVG大5到10倍。

第三，可编程。后端用Python的svgwrite生成饼图，前端用D3.js动态生成坐标轴，程序化生成SVG太方便了。你可以把一份SVG的坐标参数全部抽离，做成模板，数据一变图形就跟着变。这套玩法在“图表动态生成”“地图边界展示”“流程示意图自动绘制”等场景非常成熟。我看到最近很火的“SVG一次性接线图”——电力行业里的设备连接图纸用SVG来做，就是因为svg可以跟后台数据打通，设备状态一变，接线图颜色就能跟着变。

3.2 印刷、发片、成品输出，EPS仍然是老牌稳妥的选择

ESP在印刷领域扎根太深。报社、出版社、印刷厂的CTP流程（计算机直接制版）里，老旧系统对接的文件格式默认还是EPS。虽然PDF这些年抢了不少地盘，但EPS因为“封装”特性——把图形、字体、预览图都包在一个文件里——在某些工作流里反而更省事。

举一个实际场景：杂志排版时设计师用AI画了一张图，插画里用了10种特殊字体。如果导出PDF，字体嵌入逻辑不好控制；但导出EPS时可以选择“包含字体”“转曲线”等选项。很多订单的印刷厂就明文要求：“所有矢量图请存为EPS，文字请转曲。”这句话我听了不下几百遍，因为EPS格式在发排系统里最不容易出意外。

还有一个很多人可能不知道的场景：学术论文配图。很多SCI期刊的投稿系统对图片格式要求非常死板——不接受SVG，只接受EPS或TIFF。这就导致“Matlab导出EPS”成了科研党必备技能。理工科老哥应该都知道，论文里的曲线图、示意图，用Matlab导出成EPS，再插入LaTeX里排版，线条质量确实比直接导出PNG强太多。

另外像标识标牌制作、服装印花、雕刻切割这类工业场景，很多古老的数控设备只认EPS或是AI（AI的低版本本质也能转成EPS兼容格式），因为那些机器的控制软件压根不解析SVG。

3.3 一个现实矛盾：设计软件里的“万物源文件”陷阱

这里说一个很容易被误解的事情。很多人用Illustrator打开SVG，发现也能编辑，于是以为SVG就是AI的一种存储格式，这是不对的。AI能打开SVG，是因为Adobe做了兼容解析，但它能解析不代表别的软件也能完美解析。

反过来，很多设计师在AI里画图，用“另存为SVG”导出的文件，拿到前端手里经常出问题。为什么？因为AI的SVG导出选项里有一堆坑：可能把文字转成了轮廓，可能保留了AI特有的变换矩阵导致前端动画叠加出错，可能把投影效果转成了嵌套的模糊滤镜，体积巨大。而且AI某些版本导出的SVG还会带一堆垃圾命名空间和metatdata，前端要删半天。

同样，用在线转换工具把SVG转成EPS，套了个壳子，实际上是把SVG光栅化再封装成“含位图的EPS”也不是没有。这种文件拿去打印当然也能用，但严格来说已经不是纯粹的矢量EPS了。

4. 从实际操作看差异：透明度、字体、兼容性、内核机制

4.1 透明度和渐变：SVG是原生的，EPS是“层层妥协”的

SVG里的透明就是opacity="0.5"，或者颜色值rgba(255,0,0,0.5)，浏览器直接渲染，干脆利落。渐变用<linearGradient>标签定义，可以是任意角度、任意多级渐变点。

EPS里也有透明概念，但PostScript语言本身在早期不支持真正的Alpha透明通道——它只有完全不透明和完全透明（也就是“有没有画这个区域”）。后来Adobe加了一些扩展，但在很多老旧的EPS解析器里，透明和渐变会被自动“拍平”成近似色块，或者要在导出时勾选“兼容渐变和透明”的选项，然后文件里就会额外附带一段略愚笨的栅格化近似。

有经验的印前师傅都懂：EPS里做软阴影、多层半透明叠加，翻车风险极高。轻则渐变出现肉眼可见的色阶断层，重则直接导出成位图。所以很多印刷品的设计规范里干脆规定“渐变请用网格工具做，不要用不透明度和混合模式”。

4.2 字体处理：SVG依赖本机字体还是嵌入字体是个大问题

SVG里的文字默认是纯文本节点<text>，它自己不打包字体文件。你在SVG里写了个font-family="Arial"，到了没装Arial的机器上，浏览器就自动换成备选字体，可能字间距全乱、宽度全变。给SVG嵌入字体的方式有几种，比如把文字转成<path>，或者用@font-face引入外部字体文件，但都有成本和维护问题。

EPS设计上就考虑了“跨设备打印的一致性”：导出时可以选择“包含字体”或“将文本转成轮廓”。如果你勾选了包含字体，EPS文件里会真的一段一段嵌入字体子集；如果勾选了转轮廓，文字直接变成一堆路径曲线。这比SVG那个松散的字体机制要强在排版使用者不用在自己机器上装字体。

当然这个强大是有代价的——嵌入字体的EPS文件体积爆炸，而且字体授权问题多，不可以在没有授权的情况下随便散布。近年来也因为这个问题，印刷行业越来越倾向于PDF而不是EPS了。

4.3 兼容性玄学：为什么有的EPS直接不能用

说到兼容性，EPS是我接触过的文件格式里最“玄学”的一个。它的PostScript语言有多个版本（Level 1、Level 2、Level 3），有完全不同的解释器实现。同一个EPS，在Illustrator里打开没问题，放到CorelDRAW里就报错；在Windows上正常，到Mac里文字乱码；旧的发排机能认，新的反而认不出。

而且EPS还有一个锦上添花但偶尔变废墟的机制——DCS（Desktop Color Separation）。分色版的EPS是几份文件放在一起的，主文件只存预览图，四个颜色版的CMYK数据放在同目录下的单独文件里。如果你只拷走了主EPS文件，发到印刷厂打开一看是全灰色或者颜色不对，就是因为你漏掉了那四个分色文件。

SVG在兼容性上相对要好很多——只要是个现代浏览器，渲染结果基本一致。而且SVG已经进入HTML标准十几年，解析器的质量也比各种企业级的EPS库稳定得多。在Web世界里，SVG才是那个“不玄学”的卷子。

5. 实操指南：什么时候用SVG，什么时候用EPS

5.1 一张决策表解决选择困难

我把经验浓缩成一张表，新手可以直接照着选：

这里面我特别强调一下：如果只是“图片素材”，不要求交互和二次编程，那SVG和EPS基本都能用，选哪个看下游工具链支持。但如果是“要在浏览器上有生命力的图形”，根本没有讨论空间，直接用SVG。

5.2 工具链搭配建议（2025版）

说实话，纯做图形编辑的话，我现在常用的流程是这样的：

• 日常矢量编辑：Inkscape（免费开源，SVG原生支持非常好）或者Figma（直接在Web里出SVG）。Figma导出的SVG比较干净，适合前端直接用。
• 需要发印刷厂的物料：从AI里导出EPS时，文字必须“创建轮廓”，不要学名“转曲”。
• 科研图表：Matplotlib和Matlab都支持直接导出EPS。注意Matlab的高版本导出EPS前要先把图窗里的字体统一设成嵌入友好的类型，不然到了LaTeX里中文字体经常乱码。我一般建议直接在Matlab脚本里执行exportgraphics(gcf, 'plot.eps', 'ContentType', 'vector')，这样导出的EPS是纯矢量，不带底图白边。
• 位图转EPS：说实话这是个伪需求非常多的操作。如果你手头是一张照片或扫描图，那“转成EPS”对打印没有任何好处，因为打印始终是按像素点输出的。但有时候印刷设备就只认EPS封装，那就只能在转换时注意保留足够的DPI（建议300dpi以上），然后在转换工具里选择“不压缩”或“无损压缩”。用Inkscape导入位图后再导出EPS，或者直接用Ghostscript命令行工具来做，都比较稳。

5.3 转换格式的几个经验心得

第一，别用那种网页在线转换工具直接转带文字的EPS文件。它们十有八九会把文字变成像素轮廓，甚至直接把整张图栅格化。转换完还要仔细看放大边线，不然踩坑都不知道。

第二，从SVG转EPS，首推Inkscape。用Inkscape导入SVG，再“另存为EPS”，底层调用的是Ghostscript做PostScript解释，质量可控得多。在导出对话框里建议勾选“Convert text to paths”，这样到了印刷厂不会因为缺字体而大翻车。

第三，从EPS转SVG，麻烦事更多一点。主要是EPS里的渐变、剪贴蒙版、混合模式、复合路径这些，SVG都能表示，但映射规则不是一对一的，转换完经常出现“同类对象被拆成几百个小组件”或者“路径锚点乱了”的问题。我的实操经验是用Adobe Illustrator打开EPS再另存为SVG，比任何自动转换工具都可靠。如果没有AI，退一步用Inkscape转，但转完要抽查几个锚点位置和曲线方向。

第四，无论怎么转，都要复查。我会用一段脚本批量检查转换后的SVG里是否存在<image>标签或base64字样，如果出现，说明某个对象被光栅化了。同理，EPS文件如果大小从几十KB变成几MB，大概率也嵌入了一张大位图。

6. 性能与体积：真实项目里的一手数据

我看网上很多人只讲原理，不讲实测数据，我这里补一组自己项目中整理的对比。同一份图标素材，包含36个图标，分别导出为SVG和EPS：

注意看，EPS的预览图占了大量体积。如果你只是把EPS用于Web或者屏幕端，这完全是在浪费带宽。反过来这些EPS发印刷厂的时候，预览图又挺有用，排版软件里拖动能实时看到内容而不用等待解析。

另外补充一点：SVG的文件大小高度依赖路径的锚点数量和精度。从高精度GPS坐标导出的SVG（比如广西乡镇边界svg这种带复杂地理边界的文件），数据量可以大到几十MB。这种情况下SVG反而不如一幅压缩过的EPS或矢量PDF体积有优势。处理这类高复杂度SVG时，一般要先用简化工具抽稀锚点（比如simplify算法），前端加载才会顺滑。

7. 常见问题与排查技巧实录

这里把我在实际工作和社区答疑中遇到的问题整理成一个速查表，按频率排序，含解法：

7.1 用AI打开SVG时文字全变方块

原因多半是：这个SVG里用了本机没有的字体，或者SVG的文字节点被写成了某种不兼容的编码。解决办法是：先用浏览器打开确认文本内容，再用Inkscape导入（它的字体渲染会做一些兜底处理），最后在AI里最好直接重新打字绘制。

7.2 EPS在浏览器里打不开，是不是文件坏了

不是。浏览器不原生支持EPS，除非你装插件或者用在线预览服务。验证EPS是否损坏，最靠谱的姿势是在Adobe Illustrator或Ghostscript里跑一下，能正常解释就是好的。Ghostscript打开EPS的经典命令是：

gswin64c -dSAFER -dBATCH -dNOPAUSE -sDEVICE=png16m -r150 -sOutputFile=preview.png input.eps

如果这行命令能输出一个清晰的PNG，那EPS文件本身没问题。

7.3 SVG在网页端显示时边缘模糊

这个大概率是viewBox和width/height比例不匹配造成的。SVG的缩放机制是这样的：它先把viewBox定义的坐标系映射到width/height定义的画布上。如果宽高比不一致或者viewBox里有小数坐标，光栅化时就会出现抗锯齿模糊。最稳的做法是保证viewBox的宽高比和元素的实际显示宽高比一致，并且尽量让路径坐标是整数或半像素（比如0和0.5）。

7.4 SVG导出EPS后颜色变了

常见于CMYK和RGB颜色模式没对齐的问题。SVG里的颜色定义通常是sRGB，但印刷用的EPS需要用CMYK描述颜色。直接转换时颜色值被系统按sRGB转CMYK，没有做色彩管理，出来的品红偏灰、草绿偏暗都很正常。解决办法：在AI或Inkscape里先把文档颜色模式改成CMYK再转EPS，并且保留原始ICC配置。

7.5 EPS里的照片/位图被裁切了

老生常谈的问题：EPS的BoundingBox（边界框）没包住所有内容。原因是某些软件生成EPS时把边界盒算小了，或者单位不一致（比如毫米和磅弄混了）。解决办法是：在AI里打开后全选，然后“对象”→“画板”→“适合画板”，再重新导出。Ghostscript命令行下可以加-dEPSCrop参数修正边界：

gswin64c -dSAFER -dBATCH -dNOPAUSE -dEPSCrop -sDEVICE=pdfwrite -sOutputFile=output.pdf input.eps

7.6 用Python处理SVG时要注意什么

如果你用Python生成或修改SVG，优先用svgelements这个库，它把SVG的路径解析做得比较好。cairosvg适合SVG转PNG/PDF，渲染结果比Pillow自己手动搞要好得多。而且cairosvg支持命令行，一行命令就能批量转：

cairosvg input.svg -o output.pdf --output-width 1000

但是注意：cairosvg对滤镜、混合模式的支持不完整，复杂特效的SVG转换后可能会有视觉差异。图像处理里带SVG的，还可以考虑专门为.NET生态准备的ImageSharp，它对SVG的支持做得比System.Drawing好不少。

7.7 收到一张EPS但太小打不开怎么办

如果你是Windows用户且没装Adobe全家桶，免费的Ghostscript+Inkscape组合是最可行的道路。先把Ghostscript装好，然后在命令行里用它把EPS转成PDF，再把PDF拖进浏览器查看，或者转到Inkscape里继续编辑。这是纯免费、无破解、稳定的一条链路。

8. 一些关于未来的观察

说完实操，最后聊点行业趋势。

EPS作为一套诞生于80年代的格式，理论上是应该“退休”的。但印刷行业供应链极其保守，尤其是那些十几年前的CTP流程和发排系统，只要还在运转，EPS就很难退出历史舞台。这就导致一个有意思的现象：在一线互联网公司里SVG已经成了默认配置，但做印刷外包的师傅还在反复强调“发EPS转曲”。两个圈子对话时经常鸡同鸭讲。

SVG在数字领域的地位只会越来越稳固。从字体（WOFF2本质上就是压缩的SVG字体）到图形界面（诸如Figma这类工具的底层渲染），到处都有SVG的影子。“在线实时协作”和“程序化设计”这两个大趋势全部是SVG的主场——因为只有文本结构、可嵌入DOM的格式才能被代码操作。

我个人在实际操作中的体会是：不需要在这两者之间分个胜负，而是要看清你手里的活是在哪条链上。做网站、做界面、做动态数据可视化，SVG是命根子；做印刷、做包装、做老系统对接，EPS的老规矩还是要尊重。学会在合适的地方用合适的格式，比无脑拥护某一种省心得多。

另外再分享一个实用的小习惯：每次交付矢量图时，尤其是在跨团队协作的场景里，我除了给源文件外，还会同时导出一份SVG和一份EPS转曲版。原因很简单——你永远不知道下游工具是哪个年代的产物。多给一份通用格式，能省掉未来无数个沟通成本。这个习惯我保持了很多年，救急过不下十次。

SVG还是EPS？答案不在网上，在你项目的落点上。搞清楚了这一点，你就再也不会在这件事上纠结了。