跳到正文

将SVG转换为JPG

总有某个上传表单、电商平台或印刷店只收JPG。按需要的尺寸渲染矢量图,背景色由您选择——因为JPG没有透明度——并且不存储任何文件。

  • 绝不存储
  • 无需排队,无需等待
  • 无需注册,无水印

使用方法

1

添加SVG

拖放任意数量的.svg文件。

2

选择尺寸和背景

设置像素宽度——矢量图在任何尺寸下都清晰——以及填充原透明区域的颜色。

3

下载

逐个保存或打包为ZIP,按您设定的画质。

JPG为什么和矢量图合不来,以及怎样损失最少

JPEG是为照片设计的:平滑渐变、没有硬边缘,它的8×8块变换和色度抽样处理起来得心应手。矢量作品恰恰相反——纯色填充、一像素的线条、锐利的拐角和小字——每一条边缘在JPEG里都会泛起一圈淡淡的波纹,饱和色与白色相接的地方还会出现彩色毛边,因为色彩只以一半的分辨率存储。画质90以上时波纹几乎看不见;75时任何Logo上都能看到。本页的画质滑块起点很高,正是出于这个原因。

背景色不是装饰。没有背景的SVG画在一片空白上,而JPEG的每个像素都必须有内容,所以空白区域会在编码前被填满。原本向透明过渡的抗锯齿边缘,现在改为向所选颜色过渡,所以在白底上渲染的Logo放到深色页面上会带着一圈浅色光晕。请选用目标位置的颜色,或者改用PNG——它的边缘不会和任何颜色混合。

所有自包含的内容都按原样渲染——渐变、滤镜、蒙版、剪切、内嵌的data URI图片。链接的图片和网络字体不会加载,因为作为图片渲染的SVG与网络隔离,脚本也不会运行。如果SVG只声明了viewBox,宽高比就取自viewBox,您设置的宽度决定高度。

如果您需要的是别的

先用rsvg-convert -w 1600 -b white in.svg -o out.png,再用cjpeg -quality 92,得到的JPEG比浏览器编码器更干净,文字背后还有真正的字体库支撑;Inkscape则能在命令行里按指定DPI和背景色批量导出整个文件夹。

在转换之前,先问问那个要JPG的地方能不能收PNG:几乎都可以,而Logo的PNG更小、更清晰、还透明。真正需要JPG的情形很窄——上传器苛刻的电商平台、部分印刷店,以及老到还不支持PNG的系统。

常见问题

是不是应该转PNG?

通常是的。矢量作品是纯色和硬边缘,JPG压缩得很差,PNG却完美无缺,而且只有PNG能保留透明背景。只有在对方明确要求JPG时——商品发布表单、老系统、印刷厂——才用这一页,否则请用SVG转PNG。

透明背景会怎样处理?

JPG没有透明度,所以SVG没有绘制的区域会在编码前填上您选择的颜色。默认是白色;请按图片最终放置位置的颜色来选。

应该按什么尺寸渲染?

按它将被显示或打印的最大尺寸,再乘以2以适配高像素密度屏幕。渲染得大没有任何画质代价,因为源文件是矢量图;代价只体现在文件大小上。

为什么文字和我设计软件里的不一样?

SVG只写了字体名称,渲染它的机器如果没有这款字体,就会用手头有的字体替代。导出前先把文字转为轮廓,问题就消失了。通过URL引用的网络字体不会被获取:渲染过程不会连接任何外部资源。

我的文件会被存储吗?

不会——任何环节都不会存储任何文件。

小贴士: 依赖外部图片或网络字体的SVG渲染时会缺少这些内容;脚本不会运行,动画按第一帧渲染。画质低时硬边缘会出现JPG光晕——图形类请保持在90以上。

把这个工具放到您的网站上

博客、课程页面或帮助文章均可免费使用。粘贴一段代码,访客就能直接在您的页面上使用。