Преобразование SVG в PNG без изменения шрифта - PullRequest
Новая
       13

Преобразование SVG в PNG без изменения шрифта

0 голосов
/ 28 августа 2018

Я пытаюсь создать простое приложение, которое принимает текст от пользователей и редактирует текст в SVG-файле (создан из иллюстратора) и отправляет обратно пользователю с окончательным результатом.

Я могу изменить текст файла SVG в javascript, но у меня возникают проблемы с преобразованием его в png. Когда я это делаю, он меняется на другой шрифт, похожий на робот.

Вот мой SVG 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2248.1 769.99">
    <defs>
        <style>
            .cls-1{
                font-size:350px;
                font-family:Granger-Regular, Granger;
            }
        </style>
    </defs>
    <title>test</title>
    <text class="cls-1" x="50%" y ="50%" >
        <tspan  text-anchor="middle">Example</tspan>
        <tspan  text-anchor="middle" x="50%" y ="50%" dy="300">SVG</tspan>
    </text>
</svg>

Вот код, который я использую для конвертации, 

var fs = require('fs')
  , gm = require('gm');

gm('./../src/images/test.svg')
    .write('./../src/images/test.png', function (err) {
        //console.log(err)
        if (!err) console.log('done');
    });

Svg выглядит примерно так,

enter image description here

Но когда я конвертирую это выглядит так, enter image description here

Так как я могу это исправить? (

1 Ответ

0 голосов
/ 30 августа 2018

У меня была похожая вещь в те дни, когда svg включал арабскую типографику, которая не только написана справа налево, но также имеет много лигатур. Я начал использовать imagemagick. Чтобы использовать правильный шрифт, шрифт должен быть установлен в системе, где должно происходить преобразование, в нашем случае это был веб-сервер, где мы не смогли установить шрифт. Но в локальной среде я заметил, что imagemagick не смог хорошо справиться с направлением текста и лигатурами, поэтому нам нужно было найти другое решение. Финальным победителем стал проект Apache Batik , который реализован на Java. Нам повезло в этом случае, так как shell_exec('java -jar …') был возможен со стороны php. Если вы зайдете в каталог примеров / тестов проекта, вы можете найти графику, которая использует внешние шрифты, включенные в директиву @fontface {}. При использовании батика, который делает большую работу, просто имейте в виду, что все пути должны соответствовать самой SVG .

...