在不同浏览器上用svg效果不同,如何解决?

Dophin
  • 1k

这是chrome的效果图片描述
这是IE的效果图片描述

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

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


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

回复
阅读 7.6k
3 个回答

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

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

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

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

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

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

你知道吗?

宣传栏