SVG轉圖片的多方面探究

一、SVG轉圖片在線

使用在線工具將SVG圖像轉換為PNG，JPG等它們它支持的其他圖像格式是一種快速便捷的方式。這些在線轉換工具通常提供友好的界面和易於使用的選項

其中一個典型的例子是CloudConvert，它支持將SVG轉換成PNG、JPG、GIF和BMP格式。下面是一個簡單的JavaScript代碼示例，它使用fetch和Blob對象將SVG文件轉換成PNG：

fetch('example.svg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      canvas.toBlob(blob => {
        const pngUrl = URL.createObjectURL(blob);
        // do something with pngUrl
      }, 'image/png');
    };
    img.src = url;
  });

二、PNG轉SVG圖片在線轉換

類似於SVG轉PNG的在線工具，還可以使用在線工具將PNG圖像轉換為SVG。這些工具通常將PNG轉換為SVG的矢量圖形以提高圖像質量和縮放能力。其中一個典型的在線工具是Online Converting，它可以將PNG、JPG和GIF轉換為SVG。

下面是一個簡單的JavaScript代碼示例，它使用DOMParser和Blob對象將PNG文件轉換為SVG：

fetch('example.png')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="' + img.width + '" height="' + img.height + '"><image xlink:href="' + url + '" width="' + img.width + '" height="' + img.height + '"></svg>';
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
      const svgBlob = new Blob([svgDoc.documentElement.outerHTML], { type: 'image/svg+xml' });
      const svgUrl = URL.createObjectURL(svgBlob);
      // do something with svgUrl
    };
    img.src = url;
  });

三、SVG圖片格式

SVG是一種矢量圖形格式，使用XML表示。與常見的圖像格式（如JPG和PNG）不同，它是基於圖形對象而不是像素。這意味著SVG圖像可以縮放到任意大小而不失真，並支持動畫、交互和可訪問性。

SVG圖像可以通過以下方式嵌入到HTML中：

<img src="example.svg" alt="Example SVG">

SVG圖像也可以作為HTML的背景圖像：

<div style="background-image: url('example.svg')"></div>

在JavaScript中，可以使用SVGElement和SVGGraphicsElement對象以編程方式處理SVG圖像。

四、SVG轉PNG

SVG轉PNG是非常常見的圖像轉換需求之一。使用JavaScript庫，可以方便地將SVG轉換為PNG。

其中一個流行的JavaScript庫是SaveSVGAsPNG，它使用Canvas API和Blob對象將SVG轉換為PNG。下面是一個簡單的代碼示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Save SVG as PNG</title>
  <script src="saveSvgAsPng.js"></script>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <rect x="10" y="10" width="180" height="80" fill="blue"></rect>
  </svg>
  <button onclick="saveSvgAsPng(document.querySelector('svg'), 'example.png')">Save as PNG</button>
</body>
</html>

五、JS SVG轉PNG

在沒有使用JavaScript庫的情況下，可以使用HTML5 Canvas和Blob對象將SVG轉換為PNG。

下面是一個使用Canvas和Blob對象將SVG轉換為PNG的JavaScript代碼示例：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect x="10" y="10" width="180" height="80" fill="blue"></rect></svg>';
const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    // do something with url
  }, 'image/png');
};
img.src = 'data:image/svg+xml;base64,' + btoa(svgString);

六、PNG轉SVG在線轉換器

除了將SVG轉換為PNG，還存在將PNG轉換為SVG的需求。這也可以通過在線工具來完成。其中一個在線工具是PicSVG，它可以將圖像文件（如JPG、PNG、GIF）轉換為SVG格式。

七、SVG轉PDF

使用JavaScript庫，可以將SVG轉換為PDF。

其中一個JavaScript庫是jsPDF，它可以將SVG轉換為PDF。下面是一個使用jsPDF將SVG轉換為PDF的JavaScript代碼示例：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect x="10" y="10" width="180" height="80" fill="blue"></rect></svg>';
const doc = new jsPDF();
doc.addSVG(svgString, 10, 10, { width: 180, height: 80 });
doc.save('example.pdf');

八、圖片轉SVG在線生成器

可以使用在線工具將JPEG、PNG和GIF等格式的圖像轉換為SVG格式。其中一個在線工具是Online-Convert，它可以將圖像轉換為SVG格式，並提供一些自定義選項。

九、SVG圖片轉流

在JavaScript中，可以使用XMLSerializer和Blob對象將SVG圖像轉換為流。

以下是一個使用XMLSerializer和Blob對象將SVG圖像轉換為流的JavaScript代碼示例：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect x="10" y="10" width="180" height="80" fill="blue"></rect></svg>';
const serializer = new XMLSerializer();
const svgBlob = new Blob([serializer.serializeToString(svgString)], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svgBlob);
// do something with url

以上就是SVG轉換圖片的多方面探究，每一個小標題都有對應的JavaScript代碼示例處理方式。

原創文章，作者：VZDH，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/149593.html