关于加载svg 的代码，网上是少之又少，牛老师博客倒是有，但是只是核心代码，并没有给出完整的demo,而且核心代码中有个问题对于这个ol渲染不太理解的话的话应该做不出来效果，就是关于坐标转屏幕坐标的问题，必须需要地图渲染完成之后才能拿到否则没法转换，得出转换为空的结果。
放个图：
一、原理
通过静态加载图片的方式加载svg，给定初始化范围，更重要的是给定imageSize，关于imageSize是通过给定的范围求出图片的大小，用xmax-xmin得到宽度，用ymax-ymin得出来高度，作为imageSize的值。
介绍一个小知识关于3857和4326的：
1、'EPSG:4326'-经纬度坐标-WGS84
2、'EPSG:3857'- xy坐标-web墨卡托3、ol3默认的坐标系为3857，即在创建ol.map的时候，若不指定projection，则默认为EPSG:3857
4、代码示例：
var m_center=[116.35,39.9];//地图中心点-经纬度坐标//经纬度转至xym_center = ol.proj.transform(m_center,'EPSG:4326', 'EPSG:3857' );//反过来var m_center=[12914838.35,4814529.9];//地图中心点-xy坐标//经纬度转至经纬度m_center = ol.proj.transform(m_center, 'EPSG:3857' ,'EPSG:4326');
二、完整demo
加载SVG数据
参考资料：
三、关于解决map.getPixelFromCoordinate为null值
首先我们可以采用先同步渲染的方法map.renderSync()这样这样转换坐标也不会为出错，
在这我们可以通过事件的方式：
map.once('postrender', function() { // safe to call map.getPixelFromCoordinate from now on }); 参考资料：
四、总结
这和加载静态图片差别不大，关于地图图片添加到地图上的问题，主要有两种方式一通过arcgis导出jpg图片，图片四至和坐标系在数据给指定，二可以通过加载svg的方式