svg 中文 亂碼

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檔案。