哪些因素决定SVG能否被OpenLayers渲染及如何进行适配调整

• SVG根节点必须显式声明width和height属性，不能仅依赖viewBox做自适应。OpenLayers的Icon组件读取资源尺寸时，优先读取SVG自身定义的宽高值，缺失会导致尺寸计算错误无法渲染。
• SVG的viewBox属性需和宽高属性匹配，避免内容被裁切或缩放异常。
• 不能包含SVG动画、外部资源引用、未声明命名空间的自定义元素，这类内容在OpenLayers底层的canvas渲染链路中不支持。
• Data URI编码要正确，特殊字符必须经过encodeURIComponent转义，避免SVG解析失败。
• Image资源必须加载完成后再传入Icon组件，异步加载未完成的资源会被OpenLayers判定为无效。

SVG2修复方法 #

SVG2本身属性定义符合要求，渲染失败的核心原因是当前代码存在时序问题：new Image()设置src后是异步加载的，直接同步传给Icon会因为资源未加载完成导致渲染失效，修改加载逻辑即可：

var mysvg = new Image();
mysvg.onload = function() {
  // 资源加载完成后再创建样式
  var style = new Style({
    image: new Icon({
      img: mysvg,
      imgSize: [30, 30]
    })
  });
  // 此处将style赋值给对应要素/图层
}
mysvg.src = 'data:image/svg+xml,' + encodeURIComponent(svg2);

SVG3修复方法 #

SVG3根节点仅定义了viewBox，缺少width和height属性，OpenLayers无法识别其默认尺寸导致渲染失败，先补全SVG的宽高属性：

var svg3 = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="40" viewBox="0 0 384 512"><path fill="#156BB1" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>';

这里按viewBox的宽高比384:512=3:4设置了30px宽、40px高，你也可以根据需求调整，之后按上述SVG2的加载逻辑使用即可。

内容的提问来源于stack exchange，提问作者Jan