引自http://www.chinasvg.com/svg/about-svg/svg-chinese-garbled-steps-and-methods.html
好多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)
分享到:
相关推荐
思源SVG检查及故障排查方法
今天在研究Highcharts导出图片中文乱码的问题,不用官方的方式导出,所以整理之类使其在ASP.NET下载支持中文的导出
HTML5 SVG汉字书写笔画特效是一款一笔一画的书写汉字动画特效。
最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,他们之间详细的区别如下: Canvas 与 SVG 的比较(详见) 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •...
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
SVG与html的交互(svg的js与html的js互调用)
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
SVG与html的交互(svg的js与html的js互调用).pdf
svg转css,css转svg,svg与css互相转换并压缩
javascript实现svg导出图片
一款好看的CSS3 SVG房屋交易步骤流程图样式特效,合作、签署、付款、填写、交付房屋购买五步骤布局样式代码。支持类似开关灯效果的黑白背景切换。
你能熟练使用svg中的脚本吗,本文介绍了通过制作svg动画的过程及代码。
为了对基于可伸缩矢量图SVG的在线连续手写汉字进行有效的分割,提出一种基于图论的在线连续手写汉字多步分割方法。该方法以SVG格式存储的手写汉字为基本研究对象,根据汉字笔画间的坐标位置关系对手写笔画序列构建无...
vue项目中进行svg组件封装及配置方法步骤 最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用...
svg与js交互,主要讲解svg与js的交互,svg与js交互,主要讲解svg与js的交互
标签:arnx、wmf2svg、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。
Method-Draw, 方法绘制,SVG编辑器的操作方法 方法绘图是SVG编辑的一个 fork,一个基于web的SVG编辑器。方法绘制的目的是提高SVG编辑的可用性和用户体验。 它删除一些特性,例如交换图层和线帽/角以获得更简单和愉快...
纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表
vue2图标方案中多色svg图标的解决 v1.2.9 演示: : 特征: 不再需要在main.js中注入SVG 支持SVG的路径,圆,椭圆,矩形,线,折线,多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过...