Chinese and special characters

[martinratinaud]

Hi all

I was trying to use your module and it's very convenient and easy to use, but I can't seem to make it work with special characters such as 作為以下歌曲的投資人，持有該上市歌曲的股票： or “

Do you have any idea ?

[xmqywx]

Get the same issue.. @martinratinaud have you fixed this?

[neocotic]

Can you provide an small example?

[xmqywx]

         **<svg xmlns="http://www.w3.org/2000/svg" encoding="UTF-8"  width="720px" 
                    height="1280px" class="ks-canvas-container" viewBox="0 0 7200 12800" >

                <g class="colorbg background"> <rect width="7200" height="12800" fill="#ffffff"></rect></g><desc>Created with Snap</desc><g objectid="52924384-da22-4819-bcd4-366f56ff81b9" data-x="3719.753976051001" data-y="9834.544197539459" data-w="2410" data-h="480" class="element son text h1" transform="translate(3719.75,9834.54)" index="0" style="opacity: 0.5;"><g ffamily="SimHei" fontbold="0" fsize="480" fstyle="normal" linespace="0" fontspace="0" fontalign="center" fontcolor="#333333" fontcontent="添加正标题" ispathfont="true" class="fontData"></g><g opacity="1" class="paragraph">
             <foreignObject width="2410" height="480" x="0" y="0">
                <a href="#52924384-da22-4819-bcd4-366f56ff81b9" class="bsl-a-text" style="text-decoration: unset;">
                    <div xmlns="http://www.w3.org/1999/xhtml" contenteditable="false" id="id_52924384-da22-4819-bcd4-366f56ff81b9" textid="52924384-da22-4819-bcd4-366f56ff81b9" style="font-size: 479px; text-align: center; font-feature-settings: &quot;liga&quot; 0; letter-spacing: 0px; color: rgb(51, 51, 51); line-height: 479px; font-style: normal; user-select: text; font-family: SimHei;" class="initDiv">添加正标题 </div>
                 </a>
              </foreignObject>
            </g></g><g objectid="70931dc2-7a73-4053-b8db-7ebb80ade69a" data-x="2395" data-y="4267" data-w="2410" data-h="480" class="element son text h1" transform="translate(2395,4267)" index="1" style="opacity: 1;"><g ffamily="SimHei" fontbold="0" fsize="480" fstyle="normal" linespace="0" fontspace="0" fontalign="center" fontcolor="#333333" fontcontent="添加正标题" ispathfont="true" class="fontData"></g><g opacity="1" class="paragraph">
             <foreignObject width="2410" height="480" x="0" y="0">
                <a href="#70931dc2-7a73-4053-b8db-7ebb80ade69a" class="bsl-a-text" style="text-decoration: unset;">
                    <div xmlns="http://www.w3.org/1999/xhtml" contenteditable="false" id="id_70931dc2-7a73-4053-b8db-7ebb80ade69a" textid="70931dc2-7a73-4053-b8db-7ebb80ade69a" style="font-size: 479px; text-align: center; font-feature-settings: &quot;liga&quot; 0; letter-spacing: 0px; color: rgb(51, 51, 51); line-height: 479px; font-style: normal; user-select: text; font-family: SimHei;" class="initDiv">添加正标题 </div>
                 </a>
              </foreignObject>
            </g></g>

            </svg>**

` this svg will create a png like: https://svg-prod.oss-cn-shenzhen.aliyuncs.com/png_43325bf0-9974-11e8-bb39-e11bbfda76d5.png

@neocotic

[neocotic]

Is it possible to create a simpler example that clearly demonstrates the problem you're having?

Also, does the SVG look as expected when opened in Chrome?

[xmqywx]

@neocotic https://jsfiddle.net/xmqywx/0s5fw6cr/2/ I added all code the this. Just a demo. After steps , the node server will create a png, but png will be wrong characters.

[xmqywx]

I'm terribly sorry to waste your time @neocotic , I removed the code const utf8 = require('utf8');let xx= utf8.encode(req.body.svg) And it's works now. @martinratinaud Please confirm the request header is utf-8 headers: { 'Accept-Charset': 'utf-8', 'Accept': 'application/json;charset=utf-8', 'Content-Type': 'application/json;charset=utf-8' },

Thanks your comment @neocotic ,sorry again. I read your code, //Converter.js line187 async [_convert](input, options) { console.log(input) input = Buffer.isBuffer(input) ? input.toString('utf8') : input; the code already formated.

[neocotic]

Glad to hear it. I was surprised that it wasn't working.

[xmqywx]

@neocotic sorry again :) I confirm again. It's important that Maybe you need add <head> <meta charset="UTF-8"> </head> in Converter.js line 194 let html = <!DOCTYPE html><head> <meta charset="UTF-8"> </head><base href="${options.baseUrl}"

[xmqywx]

New tip, another system: https://github.com/GoogleChrome/puppeteer/issues/1143

[martinratinaud]

Thanks a lot for the follow up. I finally used rsvg but will definitely make sure the headers are like this if I try this library again.

Cheers

[luisbraganca]

Ok I was struggling with this and I figured out a way to fix it. Also @xmqywx using the meta tag on Converter.js didn't work for me. I also had specified the enconding on my SVG content but still nothing. What I did was, before putting raw text content on my SVG, I passed through a function to replace the raw text with HTML unicode sequences. The formatting issues disappeared after I made this.

/**
 * Receives a text and returns a string with its unicode sequence for HTML use.
 * Example: "Cómídá" -> "Cómídá"
 * @param {String} text - A text to be converted into a unicode sequence
 */
var toHTML = function (text) {
    var content = "";
    for (var i = 0, len = text.length; i < len; i++) {
        content += "&#" + text.charCodeAt(i) + ";";
    }
    return content;
};

[neocotic]

I'm sorry for the incredibly long delay in replying in responding to you but life sometimes gets in the way of OSS development. I thank you for your patience and, although I'm closing this issue out, I hope you'll be glad to know that I believe this issue has been resolved in with today's 0.6.0 release with the introduction of UTF-8 support.

If you continue to have this problem, please raise a new ticket with an SVG to reproduce the problem and, where possible, an expected and actual file of the output. I hope you can understand my delay.