SVG中文乱码解决步骤与方法

  好多SVG编辑器都有不能正常支持中文,后来自己手工创建SVG文件,却也不能在浏览器插件里正常显示。还以为是插件问题(如adobe svg viewer和corel svg viewer等),象我用inkscape,就能很好的处理中文,但却不能在浏览器里正常显示!不知为什么,还真以为插件问题。查看svg viewer的技术规范,都说是支持utf-8的,那是什么问题呢?难道是文字编码问题,后来几经测试,用各种编码及encoding头,还是不对劲。


  后来我好不容易总算琢磨出问题所在,原来你必须给中文加上中文字体。看来adbobe svg viewer和corel svg viewer缺省都没有带支持某种中文字体的,不象inkscape,能正常显示中文。因此,在这种情况下,给中文加上某种字体的样式,就可以正常显示而 不是一些框框了,包括从W3C来的一些SVG中文幻灯片,给它加上中文某中字体的样式才行!

  以上两段引用了eureka 的blog文章,他说得没错,造成SVG的中文乱码问题,主要是由于在SVG中对中文字体的定义有误造成的。那怎样才能彻底解决SVG中文乱码问题呢?下面是解决SVG中文乱码的步骤及方法:

  1 首先要将SVG文件保存成UTF-8的编码格式。

  操作:UltraEdit file->convisions->ASCII to UTF-8

  2 要在svgviewer中显示中文字体,需要将中文字体名称进行“国际化”,

  即将汉字字体名称改为英文名称,如将“宋体”改为“Simsun",“黑体”改为"Simhei"等,下面是部分字体对照列表:

English Name  Localized Name
SimSun 宋体
SimHei 黑体
FangSong_GB2312 仿宋_GB2312
KaiTi_GB2312 楷体_GB2312
YouYuan  幼圆
STSong 华文宋体
STZhongsong 华文中宋
STKaiti 华文楷体
STFangsong 华文仿宋
STXihei 华文细黑
STLiti 华文隶书
STXingkai 华文行楷
STXinwei 华文新魏
STHupo 华文琥珀
STCaiyun 华文彩云
FZYaoTi 方正姚体简体
FZShuTi 方正舒体简体
LiSu  隶书

  3 SVG文件应该像下面这种格式编写:

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="400"
     xmlns="http://www.w3.org/2000/svg">
  <desc>sdfasdf</desc>
  <rect x="1" y="1" width="350" height="350"
        fill="none" stroke="blue" />
  <text style="fill:black;" font-size="30" font-family="SimSun" x="100" y="100" width="200" height="30">
    显示的是中文
  </text>
</svg>

  4 你还应该特别注意上面示例中的第一行代码

  <?xml version="1.0" encoding="UTF-8"?>

  这行代码是说这个SVG文件是UTF-8编码来定义的。

  如果是Illustrator中制作的SVG怎样解决编码问题?那可以参见"怎样对Illustrator制作的SVG进行优化",文章介绍了Illustrator保存SVG时,我们对保存的选项进行调节,来控制SVG的编码、字体类型、字体子集、是否压缩格式以及生成适用于不同设备(如手机)的SVG文件。

(THE END)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值