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

来源：SVG中国(ChinaSVG.COM)

  我们在制作SVG过程中，经常会遇到 SVG乱码问题，作为初入SVG的朋友更是对乱码感到无措。经过多次尝试后有人可能会发现制作的SVG，只有SVG中涉及到中文文字时才会出现乱码，而用 英文字符却没有这个问题。那么是什么原因造成了SVG中文乱码呢？本文章将详细介绍解决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文件。