SVG Chinese garbled characters

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.