介紹

你需要將SVG文件轉(zhuǎn)換為PNG、JPEG、TIFF、WEBP 和 HEIF 格式嗎？本文將指導(dǎo)你如何轉(zhuǎn)換為所有這些類型的格式。

我們將使用 Node.js 和Sharp npm 包來(lái)完成大部分繁重的工作。

目錄

1.  安裝 Sharp Npm 包
2.  SVG 轉(zhuǎn) PNG
3.  SVG 轉(zhuǎn) JPEG
4.  SVG 轉(zhuǎn) TIFF
5.  SVG 轉(zhuǎn) WEBP
6.  SVG 轉(zhuǎn) HEIF

安裝Sharp Npm Package

首先你需要安裝 npm 包。你可以使用下面的 npm 或 yarn 命令安裝：

Npm 

$ npm install sharp --save 

Yarn 

$ yarn add sharp 

現(xiàn)在我們已經(jīng)準(zhǔn)備好開始編寫一些代碼并轉(zhuǎn)換圖像了！

SVG 轉(zhuǎn) PNG

對(duì)于第一個(gè)例子，我們將 SVG文 件轉(zhuǎn)換為可移植網(wǎng)絡(luò)圖形（PNG）文件格式。確保你在項(xiàng)目目錄的根目錄中有一個(gè)可用的 SVG 文件。

這是完整的代碼： 

// Node.js  
const sharp = require("sharp")  
sharp("file.svg")  
    .png()  
    .toFile("new-file.png")  
    .then(function(info) {  
        console.log(info)  
    })  
    .catch(function(err) {  
        console.log(err)  
     }) 

讓我們分解代碼的每個(gè)部分：

1.  首先，導(dǎo)入 sharp 包并將其保存在 sharp 變量中。
2.  然后，我們用 sharp 包來(lái)讀取我們的 file.svg 文件，將其轉(zhuǎn)換為 PNG 并使用 .toFile() 函數(shù)將新的 PNG文件寫入你的目錄。
3.  sharp 方法是一個(gè) promise，我們用它來(lái)獲取文件的 info。
4.  最后，我們用 .catch() 方法來(lái)捕獲并 console.log() 所有錯(cuò)誤。

當(dāng)你運(yùn)行代碼時(shí)，應(yīng)該得到類似的輸出： 

{  
    format: 'png',  
    width: 2500,  
    height: 527,  
    channels: 4,  
    premultiplied: false,  
    size: 47194  
} 

你應(yīng)該能夠在項(xiàng)目目錄中看到新的 PNG 文件。

還可以將其他選項(xiàng)傳遞給 .png() 方法來(lái)更改輸出圖像。這些包括壓縮級(jí)別、質(zhì)量、顏色等。你可以在文檔中查看它們。

SVG 轉(zhuǎn) JPEG

現(xiàn)在，讓我們將 SVG 文件轉(zhuǎn)換為 JPEG 格式。確保項(xiàng)目目錄的根目錄中有一個(gè) SVG 文件可供使用。

這是完整的代碼： 

const sharp = require("sharp")  
sharp("file.svg")  
    .png()  
    .toFile("new-file.jpg")  
    .then(function(info) {  
        console.log(info)  
    })  
    .catch(function(err) {  
        console.log(err)  
    }) 

當(dāng)運(yùn)行代碼時(shí)，你應(yīng)該得到類似的輸出： 

{  
   format: 'jpg',  
   width: 2500,  
   height: 527,  
   channels: 4,  
   premultiplied: false,  
   size: 47194  
} 

你應(yīng)該在項(xiàng)目目錄中看到新的JPEG文件。

文檔：http://sharp.pixelplumbing.co...。

SVG 轉(zhuǎn) TIFF

接下來(lái)，讓我們將SVG文件轉(zhuǎn)換為標(biāo)記圖像文件格式（TIFF）文件。確保你在項(xiàng)目目錄的根目錄中有一個(gè)我們可以使用的SVG文件。

這是完整的代碼： 

const sharp = require("sharp")  
sharp("file.svg")  
  .tiff()  
  .toFile("new-file.tiff")  
  .then(function(info) {  
    console.log(info)  
  })  
  .catch(function(err) {  
    console.log(err)  
  }) 

當(dāng)你運(yùn)行代碼時(shí)，應(yīng)該得到類似的輸出： 

{  
    format: 'tiff',  
    width: 2500,  
    height: 527,  
    channels: 3,  
    premultiplied: false,  
    size: 65778  
} 

你應(yīng)該在項(xiàng)目目錄中看到新的TIFF文件。

文檔：http://sharp.pixelplumbing.co...。

SVG到WEBP

接下來(lái)，將 SVG 文件轉(zhuǎn)換為 WEBP 文件格式。確保你在項(xiàng)目目錄的根目錄中有一個(gè)我們可以使用的SVG文件。

這是完整的代碼： 

const sharp = require("sharp")  
sharp("file.svg")  
  .webp()  
  .toFile("new-file.webp")  
  .then(function(info) {  
    console.log(info)  
  })  
  .catch(function(err) {  
    console.log(err)  
  }) 

輸出： 

{  
  format: 'webp',  
  width: 2500, 
   height: 527,  
  channels: 4,  
  premultiplied: false,  
  size: 35600  
} 

你應(yīng)該在項(xiàng)目目錄中看到新的WEBP文件。

文檔：http://sharp.pixelplumbing.co...。

SVG到HEIF

最后一個(gè)例子，讓我們將 SVG 文件轉(zhuǎn)換為高效圖像文件（HEIF）格式。確保你在項(xiàng)目目錄的根目錄中有一個(gè)可用的SVG文件。

這是完整的代碼： 

const sharp = require("sharp")  
sharp("file.svg")  
  .png()  
  .toFile("new-file.heif")  
  .then(function(info) {  
    console.log(info)  
  })  
  .catch(function(err) {  
    console.log(err)  
  }) 

你還應(yīng)該在項(xiàng)目目錄中看到新的HEIF文件。

文檔： http://sharp.pixelplumbing.co...。

結(jié)論

希望本文能幫助你完成編碼工作！