svg-blob怎么将svg字符串保存为.svg图片

要将SVG字符串保存为.svg图片，你可以使用SVG-Blob库。

你可以这样做：

1. 安装SVG-Blob：`npm install svg-blob`

2. 在你的代码中引入SVG-Blob：`import { SVGBlob } from 'svg-blob'`

3. 使用SVGBlob类的toBlob()方法将SVG字符串转换为Blob对象：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect x="10" y="10" width="100" height="100" fill="red"/></svg>';
const blob = new SVGBlob(svgString);
const blobUrl = URL.createObjectURL(blob);

4. 最后，你可以使用HTML5的`download`属性下载Blob对象作为.svg图片：

const link = document.createElement('a');
link.download = 'my-image.svg';
link.href = blobUrl;
link.click();

这样，你就可以将SVG字符串保存为.svg图片了。

相关问题

fileSaver SVG字符串导出svg图

FileSaver是一个JavaScript库，它允许你在浏览器端保存文件，而不仅仅是文本内容。当你需要将SVG（Scalable Vector Graphics）字符串转换为实际的SVG图像并下载时，可以结合FileSaver和一些SVG处理技术来实现。

以下是一个简单的步骤概述：

1. 首先，你需要创建一个包含SVG字符串的数据变量。例如，假设你有一个名为`svgString`的变量存储了SVG图形数据。

let svgString = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';

2. 使用`Blob`构造函数将SVG字符串转化为Blob对象，因为FileSaver操作的就是Blob对象。

let blob = new Blob([svgString], {type: 'image/svg+xml'});

3. 然后调用FileSaver库提供的`saveAs`方法，传入Blob对象和你想保存的文件名。

saveAs(blob, 'example.svg');

这将会触发浏览器的默认下载机制，用户会看到一个弹窗可以选择保存文件。

filesaver.js保存svg

filesaver.js是一个JavaScript库，它允许你在浏览器环境中创建文件并保存它们，无需用户干预。如果你想保存SVG (Scalable Vector Graphics) 文件，可以结合filesaver.js和HTML5 File API来实现。

以下是使用filesaver.js保存SVG的基本步骤：

1. 首先，确保已经在项目中引入了`FileSaver.min.js` 和 `jszip.min.js`，这两个库分别用于处理文件和压缩数据。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2021.0.4/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.18.0/jszip.min.js"></script>

2. 创建一个SVG元素，并将其转换为Base64编码的数据URI，因为直接保存SVG文本可能会有问题。

var svgData = '<svg>...</svg>'; // 你的SVG字符串
var blob = new Blob([atob(svgData.replace('data:image/svg+xml;charset=utf8;base64,', ''))], {type: 'image/svg+xml'});

3. 使用FileSaver.saveAs()方法将Blob保存为SVG文件。

saveAs(blob, 'your-svg-file.svg');

这将会下载一个名为"your-svg-file.svg"的新SVG文件到用户的设备上。