Safari 显示 Base64 编码的 png 但不显示 svg答案

【问题标题】：Safari Displays Base64 encoded png but not svgSafari 显示 Base64 编码的 png 但不显示 svg
【发布时间】：2019-05-26 14:41:10
【问题描述】：

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

Safari 版本 12.0 (13606.2.11)

这是一个代码sn-p：

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的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 + PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjE1MCIgICBoZWlnaHQ9IjE1MCIgICB2aWV3Qm94PSIwIDAgMzkuNjg3NDk1IDM5LjY4NzQ5OCIgICB2ZXJzaW9uPSIxLjEiICAgaWQ9InN2ZzEwMDEzIiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMSByMTUzNzEiICAgc29kaXBvZGk6ZG9jbmFtZT0icGF0dGVybi5zdmciPiAgPGRlZnMgICAgIGlkPSJkZWZzMTAwMDciPiAgICA8bWFya2VyICAgICAgIGlua3NjYXBlOnN0b2NraWQ9IkRpYW1vbmRMIiAgICAgICBvcmllbnQ9ImF1dG8iICAgICAgIHJlZlk9IjAiICAgICAgIHJlZlg9IjAiICAgICAgIGlkPSJEaWFtb25kTCIgICAgI CAgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiICAgICAgIGlua3NjYXBlOmlzc3RvY2s9InRydWUiPiAgICAgIDxwYXRoICAgICAgICAgaWQ9InBhdGgxNDYwMSIgICAgICAgICBkPSJNIDAsLTcuMDcxMDc2OCAtNy4wNzEwODk0LDAgMCw3LjA3MTA1ODkgNy4wNzEwNDYyLDAgWiIgICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoxLjAwMDAwMDAzcHQ7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgICB0cmFuc2Zvcm09InNjYWxlKDAuOCkiICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gICAgPC9tYXJrZXI + ICA8L2RlZnM + ICA8c29kaXBvZGk6bmFtZWR2aWV3ICAgICBpZD0iYmFzZSIgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIgICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiICAgICBpbmtzY2FwZTp6b29tPSIzLjk2NjMzMTciICAgICBpbmtzY2FwZTpjeD0iODkuMDA1ODM0IiAgICAgaW5rc2NhcGU6Y3k9Ijg0LjkxMzYzNyIgICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJtbSIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIgICAgIHNob3dncmlkPSJ0cnVlIiAgICAgdW5pdHM9InB4IiAgICAgb2JqZWN0dG9sZXJhb mNlPSI1IiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMzgzIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTgyIiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjI2IiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjI2IiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIgICAgIGZpdC1tYXJnaW4tdG9wPSIwIiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIgICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9ImZhbHNlIiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iZmFsc2UiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkMTQ0OTAiICAgICAgIG9yaWdpbng9IjEuNDEwNzQ1OSIgICAgICAgb3JpZ2lueT0iMS40MTA3NDI0IiAvPiAgPC9zb2RpcG9kaTpuYW1lZHZpZXc + ICA8bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTEwMDEwIj4gICAgPHJkZjpSREY + ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI + ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlIC8 + ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY + ICA8L21ldGFkYXRhPiAgPGcgI CAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgICAgIGlkPSJsYXllcjEiICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjQxMDc0NjMsLTI1OC43MjMyMykiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJNIC0yLjY0NTgzMzcsMjU3LjMxMjQ5IDM5LjY4NzUsMjk5LjY0NTgyIiAgICAgICBpZD0icGF0aDg0NTgiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gMi42NDU4MzI5LDI1OC42MzU0IDM4LjM2NDU4MywyOTQuMzU0MTUiICAgICAgIGlkPSJwYXRoODQ2MCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgP HBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgZD0ibSA2LjYxNDU4MjksMjU4LjYzNTQgMzEuNzUwMDAwMSwzMS43NSIgICAgICAgaWQ9InBhdGg4NDYyIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIDEwLjU4MzMzMywyNTguNjM1NCAyNy43ODEyNSwyNy43ODEyNSIgICAgICAgaWQ9InBhdGg4NDY0IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kY XNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIDE0LjU1MjA4MywyNTguNjM1NCAyMy44MTI1LDIzLjgxMjUiICAgICAgIGlkPSJwYXRoODQ2OCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgICAgICAgZD0ibSAzOC4zNjQ1ODIsMjU4LjYzNTQgdiAwIiAgICAgICBpZD0icGF0aDg0NzAiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Im0gMTguNTIwODMzLDI1OC42MzU0IDE5Ljg0Mzc1LDE5Ljg0Mzc1IiAgICAgICBpZD0icGF0aDg0NzIiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwY XRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Im0gLTEuMzIyOTE3MSwyOTQuMzU0MTUgMy45Njg3NSwzLjk2ODc1IiAgICAgICBpZD0icGF0aDg0NzQiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gLTEuMzIyOTE3MSwyNjIuNjA0MTUgMzQuMzk1ODMzLDI5OC4zMjI5IiAgICAgICBpZD0icGF0aDg0NzYiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlL WRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Im0gLTEuMzIyOTE3MSwyNjYuNTcyOSAzMS43NTAwMDAxLDMxLjc1IiAgICAgICBpZD0icGF0aDg0NzgiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gLTEuMzIyOTE3MSwyNzAuNTQxNjUgMjYuNDU4MzMzLDI5OC4zMjI5IiAgICAgICBpZD0icGF0aDg0ODAiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Ik0gLTEuMzIyOTE3MSwyNzQuNTEwNCAyMi40ODk1ODMsMjk4LjMyMjkiICAgICAgIGlkPSJwYXRoODQ4MiIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yL WN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgZD0iTSAtMS4zMjI5MTcxLDI3OC40NzkxNSAxOC41MjA4MzMsMjk4LjMyMjkiICAgICAgIGlkPSJwYXRoODQ4NCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgZD0ibSAyMi40ODk1ODMsMjU4LjYzNTQgMTUuODc1LDE1Ljg3NSIgICAgICAgaWQ9InBhdGg4NDg2IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO 3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIDI2LjQ1ODMzMywyNTguNjM1NCAxMS45MDYyNSwxMS45MDYyNSIgICAgICAgaWQ9InBhdGg4NDg4IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIC0xLjMyMjkxNzEsMjgyLjQ0NzkgMTUuODc1MDAwMSwxNS44NzUiICAgICAgIGlkPSJwYXRoODQ5MCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW9wYWNpdHk6MDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgICAgICAgZD0iTSAxLjMyMjkxNjIsMjU4LjYzNTQgMzguMzY0NTgyLDI5NS42NzcwN yIgICAgICAgaWQ9InBhdGg4NDkyIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIDYuNjE0NTgyOCwyNTguNjM1NCAzMS43NDk5OTkyLDMxLjc1IiAgICAgICBpZD0icGF0aDg0OTQiICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1vcGFjaXR5OjA7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmUiICAgICAgIGQ9Im0gMTEuOTA2MjQ5LDI1OC42MzU0IDI2LjQ1ODMzMywyNi40NTgzNCIgICAgICAgaWQ9InBhdGg4NDk2IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0c m9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIDE3LjE5NzkxNiwyNTguNjM1NCAyMS4xNjY2NjYsMjEuMTY2NjciICAgICAgIGlkPSJwYXRoODQ5OCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW9wYWNpdHk6MDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgICAgICAgZD0ibSAyMi40ODk1ODMsMjU4LjYzNTQgMTUuODc0OTk5LDE1Ljg3NSIgICAgICAgaWQ9InBhdGg4NTAwIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIDI3Ljc4MTI0OCwyNTguNjM1NCAxMC41ODMzMzQsMTAuNTgzMzQiICAgICAgIGlkPSJwYXRoODUwMiIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I zAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW9wYWNpdHk6MDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgICAgICAgZD0ibSAzMy4wNzI5MTUsMjU4LjYzNTQgNS4yOTE2NjcsNS4yOTE2NyIgICAgICAgaWQ9InBhdGg4NTA0IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJNIC0xLjMyMjkxNzEsMjYxLjI4MTI0IDM1LjcxODc0OCwyOTguMzIyOSIgICAgICAgaWQ9InBhdGg4NTA2IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIC0xLjMyMjkxNzEsMjY2LjU3MjkgMzEuNzQ5OTk5MSwzMS43NSIgICAgICAgaWQ9InBhd Gg4NTA4IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJNIC0xLjMyMjkxNzEsMjcxLjg2NDU3IDI1LjEzNTQxNSwyOTguMzIyOSIgICAgICAgaWQ9InBhdGg4NTEwIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJNIC0xLjMyMjkxNzEsMjc3LjE1NjI0IDE5Ljg0Mzc0OSwyOTguMzIyOSIgICAgICAgaWQ9InBhdGg4NTEyIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eTowO3N0cm9rZS1taXRlc mxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIC0xLjMyMjkxNzEsMjgyLjQ0NzkgMTUuODc1MDAwMSwxNS44NzUiICAgICAgIGlkPSJwYXRoODUxNCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MCIgICAgICAgZD0iTSAtMS4zMjI5MTcxLDI4Ny43Mzk1NyA5LjI2MDQxNjEsMjk4LjMyMjkiICAgICAgIGlkPSJwYXRoODUxNiIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MCIgICAgICAgZD0ibSAtMS4zMjI5MTcxLDI5My4wMzEyNCA1LjI5MTY2NjYsNS4yOTE2NiIgICAgICAgaWQ9InBhdGg4NTE4IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub 2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIDMwLjQyNzA4MywyNTguNjM1NCA3LjkzNzUsNy45Mzc1IiAgICAgICBpZD0icGF0aDg0ODgtNiIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgZD0ibSAzNC4zOTU4MzMsMjU4LjYzNTQgMy45Njg3NSwzLjk2ODc1IiAgICAgICBpZD0icGF0aDg0ODgtMCIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjYyIgLz4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLW1pd GVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgICAgICAgZD0iTSAtMS4zMjI5MTcxLDI4Ni40MTY2NSAxMC41ODMzMzMsMjk4LjMyMjkiICAgICAgIGlkPSJwYXRoODQ5MC03IiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAgICAgICBkPSJtIC0xLjMyMjkxNzEsMjkwLjM4NTQgNy45Mzc1LDcuOTM3NSIgICAgICAgaWQ9InBhdGg4NDkwLTczIiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjIiAvPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpiZXZlbDtzdHJva2Utb3BhY2l0eToxO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiAgICAgICBkPSJtIC0xLjMyMjkxNzEsMjk4LjMyMjkgMCwwIiAgICAgICBpZD0icGF0aDg1NzkiICAgICAgIGlua3NjYXBlOmNvbm5lY 3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2MiIC8 + ICAgIDxwYXRoICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiICAgICAgIGQ9Im0gLTMuOTY4NzUwNCwzMDAuOTY4NzMgMS4zMjI5MTY3LDEuMzIyOTIiICAgICAgIGlkPSJwYXRoODU4MSIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4gIDwvZz48L3N2Zz4 =' P>

Base64 编码的 png: '数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsSAAALEgHS3X78AAACR0lEQVR4nO3RuZECQRBE0TQBUzAJ0zAJU / BgVlmBmJiGPuqK6C + U9pXKJ0mHpMdxHGqdpEdnd5f0LtzdJL0kPQt33WODEtENjg2KczczNiiO3ezYoDh1K2OD4tCtjg2KcWcxNiiGXTMEJaeT4dig2HSmY4Oy3pmPDcpK5zQ2KJOd59igTHTeY4My2EWMDcpAFzU2KJ1d5NigdHTNEJQcFCWMDcr3LmVsUNpd2tigXHXJY4NyBQJKHZQqY4NyBQJKPkq1sbdHqTj21ijNEJQcFEm6Fx17VxS9QSmFogcohVA + ngalAMr5aVCSUa6eBiURpfU0KEko354GJQHl19OgBKM0Q1ByUNQ5NihxKN1jgxKDMjQ2KN7dxNigOHazY4Pi1K2MDYpDtzo2KMadxdigGHZWY4Ni1DVDUHI6GY8NynpnPjYoa53L2KDMdo5jgzLReY8NymAXMTYoA13U2KB0dpFjg9LRRY8Nyo + uGYKSg6KksUFpd2ljg3LdpY4NyrkrMDYoZ5ACY4NyBikwNihnkAJjb49SceytUaqOvS1KMyww9pYoknQrPPaOKHqBUgpFT1AKofzHoBRB + YxBKYByjkFJRrmKQUlEacWgJKF8i0FJQGmGoOSgqGNsUGJRusYGJQ6le2xQIrrBsUFx7mbGBsWxmx0bFKduZWxQHLrVsUEx7izGBsWwa4ag5HQyHBsUm850bFDWO / OxQVnpnMYGZbLzHBuUic57bFAGu4ixQRnoosYGpbOLHBuUjq4ZgpKDooSxQfnS / QFooemaz5aVewAAAABJRU5ErkJggg ==' P>

【问题讨论】：

标签： safari svg base64

【解决方案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="/>

【讨论】：