将 svg 转换为 base64 [英] Convert svg into base64

问题描述

以编程方式创建的 SVG 无法正确转换为 base64.

在我的应用程序中，我有一个服务，它通过 g-element 获得响应，然后放入创建的 svg-element 并将其转换为 base64，但是如果我尝试打开一个链接，我发现 svg 没有呈现页面.

 var xmlns = 'http://www.w3.org/2000/svg',IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));IMAGE_TEMPLATE.setAttribute('id', 'svg');IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);测试 = 函数(){var s = new XMLSerializer().serializeToString(document.getElementById("svg"))var encodedData = window.btoa(s);console.log('data:image/svg+xml;base64,' + encodedData);}

https://jsfiddle.net/6sra5c5L/

解决方案

@guest271314 和我的回答的区别:

@guest271314 他的回答:

将 g 元素包装在 svg 元素中，以确保浏览器在加载时呈现 g 元素.

我的回答:

强制 #test 中的 svg 元素呈现 g 元素，因为 g 元素未在加载时呈现.

这种情况下的最佳答案:@guest271314

原因:g 元素应位于有效 html 中的 svg 元素内.

<块引用>什么时候应该使用我的答案?
在 g 元素不是 html 文档中的元素的情况下.

您没有使用 } 关闭 test().下面的代码返回一个 base64 编码的 svg:https://jsfiddle.net/seahorsepip/6sra5c5L/1/

svg 渲染问题是我之前遇到的问题，这是使用 jquery 进行的修复:https://jsfiddle.net/seahorsepip/6sra5c5L/3/

//强制刷新svg$("#test").html($("#test").html());

这是关于该问题的原始 SO 线程:jquery 的附加不适用于 svg元素?

我不知道我添加的 jQuery 代码的 javascript 等效项，我尝试编写它但它不起作用:/

编辑 2:

这是纯 js 等价物:

https://jsfiddle.net/seahorsepip/6sra5c5L/4/p>

//强制刷新svgvar svg = document.body.querySelector('#test').innerHTML;document.body.querySelector('#test').innerHTML = """;document.body.querySelector('#test').innerHTML = svg;

SVG which was created programmatically does not convert into base64 correctly.

In my application I've got a service which get a response with g-element and then put into created svg-element and convert it into base64, but if I try to open a link I find that svg does not render on the page.

    var xmlns = 'http://www.w3.org/2000/svg',
    IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
    IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
    IMAGE_TEMPLATE.setAttribute('id', 'svg');

    IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
    IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
    IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');

    document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);

    test = function(){
        var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
        var encodedData = window.btoa(s);
        console.log('data:image/svg+xml;base64,' + encodedData);
    }

https://jsfiddle.net/6sra5c5L/

解决方案

Difference between @guest271314 and my answer:

@guest271314 his answer:

Wrap the g element inside a svg element to make sure that the browser renders the g element onload.

My answer:

Forces the svg element inside #test to render the g element since the g element wasn't rendered onload.

Best answer in this case: @guest271314

Reason: A g element should be inside a svg element in valid html.

When should my answer be used?
In the case that the g element is not an element in the html document.

You didn't close test() with a }. Code below returns a base64 encoded svg: https://jsfiddle.net/seahorsepip/6sra5c5L/1/

Edit:

svg render issue is something I ran into myself before, here's the fix with a line of jquery: https://jsfiddle.net/seahorsepip/6sra5c5L/3/

//Force refresh svg
$("#test").html($("#test").html());

Here's the original SO thread about the issue: jquery's append not working with svg element?

I don't know the javascript equivalent for the jQuery code I added, I tried to write it but it didn't work :/

Edit 2:

Here's the pure js equivalent:

https://jsfiddle.net/seahorsepip/6sra5c5L/4/

//Force refresh svg
var svg = document.body.querySelector('#test').innerHTML;
document.body.querySelector('#test').innerHTML = "";
document.body.querySelector('#test').innerHTML = svg;

这篇关于将 svg 转换为 base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！