介绍
您需要将 SVG 文件转换为 PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？ 本文将指导您如何转换为所有这些类型的格式。
我们将使用 Node.js 和 Sharpnpm 包来完成大部分艰苦的工作。
安装 SharpNpm 包
SVG 转 PNG
SVG 转 JPEG
SVG 转 TIFF
SVG 转 WEBP
SVG 转 HEIF
安装 SharpNpm 包
首先你需要安装 npm 包。 您可以使用以下npm或yarn命令安装它：
尼普
1$ npm install sharp --save
纱
1$ yarn add sharp
现在我们准备开始编写一些代码并转换图像！
SVG 转 PNG
对于第一个反例，我们将 SVG 文件转换为可移植网络图形 (PNG) 文件格式。 确保项目目录的根目录中有一个可用的 SVG 文件。
这是完整的代码：
1// Node.js
2
3const sharp = require("sharp")
4
5sharp("file.svg")
6 .png()
7 .toFile("new-file.png")
8 .then(function(info) {
9 console.log(info)
10 })
11 .catch(function(err) {
12 console.log(err)
13 })
让我们分解一下代码的每个部分：
首先javascript 文件 格式，导出 Sharp 包并将其保存在 Sharp 变量中。
然后，我们使用 Sharp 包读取 file.svg 文件javascript 文件 格式，将其转换为 PNG 并使用 .toFile() 函数将新的 PNG 文件写入您的目录。
Sharp 方法是一个承诺，我们用它来获取文件的信息。
最后，我们使用 .catch() 方法来捕获和 console.log() 任何错误。
运行代码时，您应该得到类似于以下内容的输出：
1{
2 format: 'png',
3 width: 2500,
4 height: 527,
5 channels: 4,
6 premultiplied: false,
7 size: 47194
8}
您应该能够在项目目录中看到新的 PNG 文件。
还可以将其他选项传递给 .png() 方法来修改输出图像。 其中包括压缩级别、质量、颜色等。您可以在文档中查看它们。
SVG 转 JPEG
现在，让我们将 SVG 文件转换为 JPEG 格式。 确保项目目录的根目录中有可用的 SVG 文件。
这是完整的代码：
1const sharp = require("sharp")
2sharp("file.svg")
3 .png()
4 .toFile("new-file.jpg")
5 .then(function(info) {
6 console.log(info)
7 })
8 .catch(function(err) {
9 console.log(err)
10 })
运行代码时，您应该得到类似于以下内容的输出：
json{格式：'jpg'，宽度：2500，高度：527，通道：4，预乘：假，大小：47194}
您应该在项目目录中看到新的 JPEG 文件。
文档：#png。
SVG 转 TIFF
继续，让我们将 SVG 文件转换为标记图像文件格式 (TIFF) 文件。 确保项目目录的根目录中有一个我们可以使用的 SVG 文件。
这是完整的代码：
1const sharp = require("sharp")
2
3sharp("file.svg")
4 .tiff()
5 .toFile("new-file.tiff")
6 .then(function(info) {
7 console.log(info)
8 })
9 .catch(function(err) {
10 console.log(err)
11 })
运行代码时，您应该得到类似于以下内容的输出：
1{
2 format: 'tiff',
3 width: 2500,
4 height: 527,
5 channels: 3,
6 premultiplied: false,
7 size: 65778
8}
您应该在项目目录中看到新的 TIFF 文件。
文档：#tiff。
SVG 转 WEBP
接下来，将 SVG 文件转换为 WEBP 文件格式。 确保项目目录的根目录中有一个我们可以使用的 SVG 文件。
这是完整的代码：
1const sharp = require("sharp")
2
3sharp("file.svg")
4 .webp()
5 .toFile("new-file.webp")
6 .then(function(info) {
7 console.log(info)
8 })
9 .catch(function(err) {
10 console.log(err)
11 })
输出：
1{
2 format: 'webp',
3 width: 2500,
4 height: 527,
5 channels: 4,
6 premultiplied: false,
7 size: 35600
8}
您应该在项目目录中看到新的 WEBP 文件。
文档：#webp。
SVG 转 HEIF
作为最后一个反例，我们将 SVG 文件转换为高效图像文件 (HEIF) 格式。 确保项目目录的根目录中有一个可用的 SVG 文件。
这是完整的代码：
1const sharp = require("sharp")
2
3sharp("file.svg")
4 .png()
5 .toFile("new-file.heif")
6 .then(function(info) {
7 console.log(info)
8 })
9 .catch(function(err) {
10 console.log(err)
11 })
您还应该在项目目录中看到新的 HEIF 文件。
文档：#png。
推理
希望本文对您的编码工作有所帮助！
原来的：
下面是一些私货：其实你和高薪唯一的区别就是这张图
2019年，京城一灯课程体系全新上线。 这是我们第一次向公众开放所有课程列表。
祝你前程似锦，祝你年薪30K。 我们是认真的！
公众号回复“系统”查看高清大图
长按二维码强化彭沫沫老师好友
拉你加入后端技术交流群
聊如何拿高薪
过去的精选
发表评论