<svg height="160" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="data:image/png;base64,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"/>
</svg>
对于<foreignObject>标签中的html元素也一样。
两者结合可以将html节点转换成为图片
<foreignObject>标签<foreignObject>是SVG的一个子标签,这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。举个例子:<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="50"> <body xmlns="http://www.w3.org/1999/xhtml">
随时随地将SVG转换为base64
如果像我一样,在开发时使用了大量的SVG,则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串,然后在需要时使用它。 该软件包正是这样做的-将SVG转换为base64。
该软件包可在浏览器和Node环境中使用。 请继续阅读以了解操作方法。
npm i svg64
yarn add svg64
只需下载此存储库并使用dist文件夹中的文件
或从unpkg.com取消设置
< script src =" https://unpkg.com/svg64 " > </ script >
在浏览器中:
// This is your SVG DOM element
const svg = document . getElementByI
let that = this;
let chart = document.getElementById('chart');
let svghtml = chart.innerHTML;
// let svg = document.querySele...
methods: {
onOK() {
//调用转换方法 svgBase64为svgbase64的数据 格式:data:image/svg+xml;base64,..................
let pngBase64Fun = this.svgBase64ToPngBase64(svgBase64);
pngBase64Fun.then((res) => {
// 将svg base64转 pngbase64后执行回调函数,res 为转换后的png
private function saveBase64($base64_image_content){
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
//图片后缀
$type = $r...
令人发指的构建包
看了很多相关的技术文章,大多数用 html2canvas.js 和 canvas.js 第三方包实现,有些用了像 D3.js 这样更大型的构建包,而实际用到的功能,却只是其中 1% 都不足,简直就是令人发指。
综合文章中转换过程的设计思想,自己干,10行代码搞定!
svg 先转 canvas 再转 base64
一:了解一下 canvas 转 Base64
con...
第一种是svg内部都是使用svg的方法进行绘制的,我们可以直接通过canvas的方法进行绘制下载,方法如下
第二种情况是在svg内部嵌套了一个image的图片,此时则无法使用第一种方法直接进行下载,下载的图片无内嵌图片,后来通过调查发下,需要把image引入的图片的路径更改微base64的方法后,再进行下载则可以实现,并解决问题。方法如下。
通过此种方法就可以解决svg内部嵌套image图片下载
转换链接:https://www.sojson.com/image2base64.html
2、使用两者区别
(1)使用一个63.8k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
(2)使用一个225k的svg与使用转base64之后的两个文件
a、使用svg
b、使用base64
3、svg转base64有什么好处吗?
(1)减少http
之前做了一个svg简易的编辑器!有个需求将编辑器编辑好的svmXml代码转成图片然后上传到图片服务器!在网上招了好多的例子!发现大部分都要用到第三方的js插件!所以为了方便就自己写了个简单点的!下面分享出来!也算自己的一个笔记吧!
直接上页面部分代码:
div中就是你的svg x...