Safari显示Base64编码的png，但不显示svg

Question

我正试图使用一个以base64字符串为源的image元素来显示一个base64编码的svg。我使用fabricjs将图案的来源设置为图像，然后使用该图案作为矩形的填充。这适用于Chrome、firefox、opera和edge。Safari将只显示base64编码的png。我已经尝试设置图像的交叉原点，并确保编码字符串以"="结尾。我还确保svg包含一个viewbox属性，并尝试删除该属性。我只是不知道为什么safari是唯一一个有这个问题的浏览器，也不知道下一步该怎么做。任何建议都会有帮助。

Safari 12.0版(13606.2.11)

下面是一个代码片段：

fabricConfig: {
width: 32,
height: 32,
scaleX: 1,
scaleY: 1,
originX: 'center',
originY: 'center',
lockScalingFlip: true,
stroke: 'rgb(0,0,0)',
fill: 'rgba(0,0,0,0)'
},

draw: function(canvas, options) {
var coords = canvas.getPointer(options.e),
pointX = coords.x,
pointY = coords.y,
encodedPattern = //this is the base64 encoded string,see below
rectanglePattern = new fabric.Rect(Ext.apply({
left: pointX,
top: pointY
}, this.fabricConfig)),
rectangle = new fabric.Rect(Ext.apply({
left: pointX,
top: pointY
}, this.fabricConfig));
fabric.util.loadImage(encodedPattern, function(img) {
var pattern =  new fabric.Pattern({
source: img,
repeat: 'repeat'
});
rectanglePattern.fill = pattern;
var patternGroup = new fabric.Group([rectangle, rectanglePattern], {
lockScalingFlip: true,
originX: 'center',
originY: 'center',
stroke: 'rgb(0,0,0)'
});
canvas.add(patternGroup);
canvas.setActiveObject(patternGroup);
return patternGroup;
});

Base64编码svg：'数据：图像/svg+xml；底座64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXlY29tbW9ucy5vcmcvbnMjIiAgIHhtb G5zOnJkZj0iaHR0 cDovL3d3dy53My5vcMCvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiagIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDawL3N2ZyIgICB4WxuczPZb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNVdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5RC2NhcGUub3JnL25hbWzcGFjZXMvaW5rc2nhcGUiICAgd2lkdGg9IjE1MCIgICBoZWlnaHq9Ije1MCIgICB2aWV3Qm94PSIwIDAgMzkuNjg3NDk1IDM5LjY4nzQ5OCI gICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzEwMDEzIiAgIGlua3NjYXBBlOnZlcnNb249IjAuOTiuMSByMTUzNzEiICAgc29kaXBvZGk6ZG9jbmFtZT0icGF0dGVybi5zdmicPiAgPGRlZnMgICAgIGlkPSJkZWZzMTAwMDciPiAgICA8bWFya2VyCAgICAgIGlua3NjYXBlOnN0b2NraWQ9IkRpYW1vbmRMiiAgICAgICBvcmllbnQ9ImF1dG8ICAgICAgIHJlZlk9IjAiICAgICAg IHJlZhg9IjAIICAgIGlkPSJEaWFtb25kTCIgICAgICAgc3R5bGU9Im92ZXJmbG93onZpc2libGUiICAgIGLua3NyYXBlzc3RvY2s9InRydWUiPiAgICAgIDID xwYXRoICAgICAgWQ9InBhdGgxNDYwMSIgICAgICBkPSJNIDAsLTCuMDcxMDc2OCAty4wNzEwodk0LDAgMCw3LjA3MTA1ODkgNy4wNz EwNDYyLDAgWiIgICAgICAg ICBzdHlsZT0iZmlsbDogMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbgwtcnVsZTpldmVub2RkO30ccm9rZTojMDAwMdO30ccm9 rZS13aWR0aDoxLjAwMDaMDAzcHq7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICB0cFuc2Zvcm09InNjYWxlKDAuOCkiICAgICAgW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gICAgPC9tYXx JrZXI+ICA8L2RlZnM+ICA8c29kaXBvZGk6bmFtZWR2aWV3ICAgICBpZD0iYmFzZSIgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIgICAgIGlua3NjYXBloOnBhZ2VzaGFkb3c9IjIICAgICBpbmtzY2FwZTp6b29tPSIzLjk2NjMzMTciICAgICBPBmtzY2F wZTpjeD0iODkuMDA1ODM0IiAgicagaW5rc 2NhcGU6Y3k9Ijg0LjkxMzYzNyIgICAgIglua3NYXBlomRv3VtZW50 LXVuaXRzPSJtbSIgICAgIGlua3NjYXBloomN1cnJlbnQtbGF5ZXI9ImxheWyMSIgICAgIHNob3dncmlkPSJ0cnVlIiAgICAgdW5pdHM9InB4IAgICAgb2JqZWN0dG9sZXJbmNlPSI1IAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMzgzIiAgICAgaW5rc2NhcGU6d2LuZG93LWhlaWdodD0iOTgyIiAgicagaW5rc 2NhcGU6D2luZG93 LXg9IjI2IiagICAgaw5rc2NHCGU6d2lu ZG93LXk9IjIiagicagaw5rc 2NHCGU6D2lu ZG93 LW1heGltaXplZD0iMCIgICAgIGZpdC1tYXJnaW4tdG9wPSIwIiagZml0LW1hcmdpbi1sZwZ0PSIwIiAgZml0 LW1hcmdpbi1yaWdodD0iMCIgICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIiAgICAgaW5rc2NhcGU6c2vd3BhZ2VzaGFkb3c9ImZhbHNlIAgICAgaw5rc2NHCGU6cGFnZWNoZWNrZXJib2FZD0iZmFsc2UiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkMTQ0OTAiICAgIG9yaWdpbng9IjEuNDewNzQ1OSIgICAgICAgb3JpZ2lueT0iMS40MTA3NDI0IiAvPiAgPC9zb2RpcG9kaTpuYW1lZHZpZXc+ICA8bWV0YWRhdGEgICAgIglkPSJtZXRhZGF0YTEwmDwIj4gICAg PHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICByZGY6YWJvdXQ9Ii+ICAgicagICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAg IDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9dGlsbEltYWdlIiAvPiAgICAgICAg PGRjOnRpdGxlIC8+ICAgICAcPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGCGICAgIGlua3njYXBlxhYmVsSJMYXllciAxIAgICAgaW5rc2NhcGU6Z3Jvdvdy XBtb2RlPSJsYXllciIgICAgIGlkPSJsyXllcjEiICAgICB0cFuc2Zvcm09InRyYW5zbGF0ZSgxLjQxMDc0NjMsLTI1OC43jMyMykiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbPub25lO30c9rZTojMDAwMDAwO30cm9rZS13aWR0aDowLjU7c3 Ryb2tlLWxpbmVjYXA6c3F1YXJlO30cm9 rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O0cm9r ZS1kYXNoYXJyYXk6bm9uZTtzdHJVa2Utb3BhY2l0eToxIiagICAgICBkPSJNIC0yLjY0NTgzMzcsMjU3LjMxMjQ5IDM5LjY4NzUsMj5Ly0NTgyIi AgICAgICBpZD0icGF0aDg0NTgiICAgICAgIGlua3NjYXBlomNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAg ICAgIHNvZGlwb2RpOm5vZGV0eXBlocz0iY2MiIC8+ICAgIDxwYXRoICAgICAg-ICAgIHN0eWxlPSJmaWxsOm5vbmU7c3 Ryb2tlOiMwMDAwMDA7c3 Ryb2tl LXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3赖b2tlLWxpbmVqb2luOmJldmVsO30cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJhePub25lO30cm9 rZS1vcGFjaXR5OjEiICAgIGQ9IkgMi42NDU4Mz5LDI1OC42MzU0IDM4LjM2NDU4MyOTQuMzU0MTUICAg ICAgIGlkPSJwYXRoODQ2MCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAg ICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJVa2Utd2lkdGg6MC41O30cm9rZS1saW5lY2FwOnNxdWFyZTtzdHjva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHzVa2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWWNpdHk6MSIgICAgZD0ibSA2LjYx4MNDUjksMjU4LjYzNTQ gMzEuNzUwMDAwMSwzMS43NSIgICAgICAgaWQ9InBhdGg4NDYiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbPub25lO30cm9rZTojMDAwMDAwO30c9rZS13aWR0aDowLjU7c3 Ryb2tlLWxpbmVjYXA6c3YXJlO30m9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O0c9r ZS1kYXxNoYXJyYXk6bm9uZTtzdHJVa2Utb3hY2l0eToxIiagICAgICBkPSJtIDEwLjU4MzMywyNTguN jM1NCAyNy43ODEyNSwyNy43ODEy NSIgICAgICAgaWQ9InBhdGg4NDY0IIAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIIAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbPub25lO30cm9rZTojMDAwMDAwO30c9rZS13aWR0aDowLjU7c3 Ryb2tlLWxpbmVjYXA6cF1YXJlO30cm9rZS1saW5lam9pbjZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O30c9r ZS1k

Base64编码的png:'数据：图像/png；底座64，iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsSAAALEgHS3X78AAACR0lEQVR4nO3RuZECQRBE0TQBUzAJ0zAJU/BgVlmBmJiGPuqK6C+U9pXKJ0mHpMdxHGqdpEdnd5f0LtzdJL0kPQt33ODEtEnjg2KczczNiiO3ezYoDh1K2OD4tCtjg2KcWcxNiiGXTMEJaeT4dig2HSmY4Oy3pmPDcpK5zQ2KJOd59igTHTeYy 4My2EWMDcpAFzU2Kj1d5NigdHTNEJQcFCWMDcr3LmVsUNpd2tigXHXJY4nyBQJKHZQqY4nyBJJKPkq1sbdHqTj21ijNEJQc FEm6Fx17VxS9QSmFogcohVA+ngalAMr5aVCSUa6eBiURpfU0KEko354GJQHl19OgBKM0Q1ByUNQ5NihxKN1jgxKDMjQ2KN7dxNigOHazY4Pi1K2MDYpDtzo2KMadxdigGHZWY4Ni1DVUHI6GY8NynpnPjYoa53L2KDMdo5jgzLReY8NymAXMTYoA13U2KB0dpFjg9LRRY8Nyo+uGYKSg6KksUFpd2ljg3LdpY4yrkrMDYoZ5ACY4NyBikwNihnkAJjb49SceytOvS1KMyww9pYoonQrpPaOKHqBUgp FT1AKofzHoBRB+YxBKYByjkFJRrmKQUlEacWgJKF8i0FJGmGoOSgqGNsUGJRusYGJQ6le2xQirrBsUFx7mbGBsWxmx0bFKduZWxQHLrVsUEx7izGBsWwa4ag5HQyHBsUm850bFDWO/OxQVnpnMYGZbLzHBuUic7bFAGu4ixQRnoosYGpbOLHBuUjq4ZgpKDooSxQfnS/QFooemaz5aVewAAAABJRU5ErkJggg==='

Answer 1

值得一提的是，您的svg在Macintosh上的Safari中运行良好。

但是您从Inkscape导出的SVG代码非常臃肿。通过优化SVG可以节省大量带宽。例如：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu
Zz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
cmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUw
IDE1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0
cm9rZS13aWR0aD0iMS44OSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZD0iTS0xNTAgMGwx
NTAgMTUwTS0xMzUgMGwxNTAgMTUwTS0xMjAgMGwxNTAgMTUwTS0xMDUgMGwxNTAgMTUwTS05
MCAwbDE1MCAxNTBNLTc1IDBsMTUwIDE1ME0tNjAgMGwxNTAgMTUwTS00NSAwbDE1MCAxNTBN
LTMwIDBsMTUwIDE1ME0tMTUgMGwxNTAgMTUwTTAgMGwxNTAgMTUwTTE1IDBsMTUwIDE1ME0z
MCAwbDE1MCAxNTBNNDUgMGwxNTAgMTUwTTYwIDBsMTUwIDE1ME03NSAwbDE1MCAxNTBNOTAg
MGwxNTAgMTUwTTEwNSAwbDE1MCAxNTBNMTIwIDBsMTUwIDE1ME0xMzUgMGwxNTAgMTUwTTE1
MCAwbDE1MCAxNTAiLz48L3N2Zz4="/>