SVG Chinese garbled characters

Http://www.chinasvg.com/svg/about-svg/svg-chinese-garbled-steps-and-methods.html

 

 

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, etc.), like I use inkscape, it can process Chinese well, but it cannot be displayed normally in the browser! I don't know why, but I thought it was a plug-in problem. View SVG
The technical specifications of the viewer are UTF-8-supported. 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 adbobe
SVG Viewer and Corel SVG
The viewer does not contain any Chinese font by default. Unlike inkscape, the viewer can display Chinese characters normally. Therefore, in this case, adding a certain font style to the Chinese character can be displayed normally.
It's not a box, including some SVG Chinese slides from W3C. Just add a Chinese font style to it!

The preceding two paragraphs reference Eureka.
He is right in his blog post, 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? See "how to optimize SVG produced by illustrator"
This article introduces how to adjust the saved options when saving SVG in illustrator, 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.