在不同浏览器上用svg效果不同，如何解决？

Question

这是chrome的效果
这是IE的效果

图片是svg格式的，用ps做的。

问题：
1.我希望在主流览器上能正常显示该图片，需要如何调整？
2.手机上用svg格式图片好吗？

---

感谢各位的回答，涨姿势了。
之前不知道直接设置width和height可以在分辨率不变的情况下压缩图片。然后我用美图做了100*100的图，width和height设置成48px就这样愉快的解决了...

Answer 1

将文字转换为图形再输出svg

Answer 2

文字转曲在印刷来看很好（保证印刷效果与设计者一致），但在网络使用SVG上，转曲一是过于浪费带宽，二是丧失选择/复制SVG文字的功能。所以虽不至于踩这个答案，但必须说明：转曲肯定不是一个普适的思路。

SVG的文字有'font-family'的XML属性，用法和CSS差不多，可以打开SVG源代码找找看，并定义成自己想要的。对于题主的需求应该是改成Arial（大多数操作系统下都有）。

对于难以人工替换的复杂文件，可以考虑jQuery等类似方法，分析XML批量替换。

手机使用SVG做大图无疑是相当值得考虑的。如果把矢量图形的细节做得不复杂，那么SVG+gzip压缩出来的文件字节数，就很容易比点阵图有非常明显的缩小。

Answer 3

是这样的，你这个的svg图片里面，应该不是用path在画这两个字母，而是用的文字的方式。这样，当系统没有某种字体的时候就会出现这种情况。
你可以尝试用svg在线编辑器把文字用path表示出来，这样即使机器上面没相应字体也不怕。