SVG Chinese garbled characters

Refer to the following method.

During dynamic generation, you can use the English name to specify the font in the program.

 

We often encounter SVG garbled characters during the process of making SVG. As a friend of the first SVG, we are still confused about the garbled characters. After several attempts, someone may find that the generated SVG is garbled only when it involves Chinese characters, but it is not possible to use English characters. So what causes SVG Chinese garbled characters? This article describes in detail the steps and methods to solve SVG Chinese garbled characters. Source: SVG China (chinasvg. com)

Many SVG editors do not support Chinese characters normally. They created SVG files manually, but they cannot be displayed normally in the browser plug-in. I thought it was a plug-in problem (such as Adobe SVG Viewer and Corel SVG Viewer). As I use inkscape, I can handle Chinese well, but it cannot be normally displayed in the browser! I don't know why, but I thought it was a plug-in problem. All the technical specifications of SVG Viewer support UTF-8. What is the problem? Is it a matter of text encoding. After several tests, it is still wrong to use various encoding and encoding headers.

Later, I finally figured out what went wrong. You had to add a Chinese font to the Chinese language. It seems that neither adbobe SVG Viewer nor Corel SVG Viewer supports certain Chinese fonts by default. Unlike inkscape, adbobe SVG viewer can display Chinese characters normally. Therefore, in this case, adding a certain font style to Chinese can be displayed normally rather than some boxes, including some SVG Chinese slides from W3C, add a Chinese font style to it!

The above two paragraphs reference Eureka's blog article. He is right, which causes Chinese garbled characters in SVG, mainly because of incorrect definitions of Chinese fonts in SVG. So how can we completely solve the SVG Chinese garbled problem? The steps and methods to solve SVG Chinese garbled characters are as follows:

1 first you need to save the SVG file into the UTF-8 encoding format.

Action: ultraedit File> convisions> ASCII to UTF-8

2. to display the Chinese font in svgviewer, the Chinese font name must be "internationalized ",

Change the Chinese font name to an English name. For example, change "sim" to "simsun" and "" to "simhei". The following lists some font control lists:

English name	Localized name
Simsun
Simhei	Simhei
Fangsong_gb2312	Imitation Song _ gb2312
Kaiti_gb2312	_ Gb2312
Youyuan	Youyuan
Stsong	文
Stzhongsong	文中
Stkaiti	文
Stfangsong	文
Stxihei	文
Stliti	文
Stxingkai	文
Stxinwei	Chinese New Wei
Sthupo	Mandarin amber
Stcaiyun	文 cloud
Fzyaoti	Simplified founder Yao Ti
Fzshuti	Simplified Chinese Simplified
Lisu	Shu

3. the SVG file should be written in the following format:

<? 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 ">
Displays Chinese characters.
</Text>
</SVG>

4. Pay special attention to the first line of code in the above example.

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

This line of code is to say that this SVG file is defined by UTF-8 encoding.

How to solve the coding problem if SVG is created in Illustrator? For more information, see "how to optimize SVG produced by illustrator". This article introduces how to adjust the saved options when illustrator saves SVG, to control the SVG encoding, font type, font subset, whether to compress the format, and generate SVG files suitable for different devices (such as mobile phones.

(The end)