@antonowano
Профессиональный самоучка

Как сохранить SVG с картинкой в PNG?

Есть картинка планировки помещения, на ней средствами svg я пишу текст.
Далее полученный SVG конвертирую в PNG.
На выходе получаю только текст. Как конвертировать с изображением?

index.php
$svg = __DIR__ . '/scheme.svg';
$imagic = new Imagick();
$imagic->readImageBlob(file_get_contents($svg));
$imagic->setImageFormat("png24");

header('Content-Type: image/png');
echo $imagic;

$imagic->clear();
$imagic->destroy();


scheme.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="flat.png" x="0" y="0" width="600" height="400"/>
    <text y="0" font-size="15" class="complex-text" text-anchor="middle" transform="matrix(1 0 0 1 219.375 156.875)">
        <tspan x="0" dy="">Общая</tspan>
        <tspan x="0" dy="16.5">комната</tspan>
        <tspan x="0" dy="16.5">15.81м²</tspan>
    </text>
    <text y="0" font-size="15" class="complex-text" text-anchor="middle" transform="matrix(1 0 0 1 373.125 189.375)">
        <tspan x="0" dy="">Кухня</tspan>
        <tspan x="0" dy="16.5">8.28 м²</tspan>
    </text>
</svg>
  • Вопрос задан
  • 2236 просмотров
Решения вопроса 1
@antonowano Автор вопроса
Профессиональный самоучка
Переписал index.php
$svg = __DIR__ . '/scheme.svg';
$svg_blob = file_get_contents($svg);
$absolute_path = __DIR__;

$svg_blob = preg_replace_callback('/<image xlink:href="([^"]+)"/i', function($match, $a, $b) use ($absolute_path) {
    $path_to_image = $absolute_path . '/' . $match[1];
    $image_base64 = base64_encode(file_get_contents($path_to_image));
    list($w, $h, $type) = getimagesize($path_to_image);

    switch ($type) {
        case IMAGETYPE_PNG:
            $type = 'image/png';
            break;
        case IMAGETYPE_JPEG:
            $type = 'image/jpeg';
    }

    return "<image xlink:href=\"data:$type;base64,$image_base64\"";
}, $svg_blob);

$imagic = new Imagick();
$imagic->readImageBlob($svg_blob);
$imagic->setImageFormat("png24");

header('Content-Type: image/png');
echo $imagic;

$imagic->clear();
$imagic->destroy();
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Dioved
@Dioved
web-разработчик
Спасибо, за решение, помогло, но у меня в svg-файле тег image был обернут в pattern:
<pattern id="kitchen_washbasin_pattern" patternUnits="userSpaceOnUse" x="579" y="187" width="100%" height="100%">
    <image xlink:href="/images/skinali/kitchen_elem_06.png" width="170" height="172"></image> 
</pattern>

Из-за этого и кодирование в base64 и указание локального пути к файлам не помогало - просто черный фон вместо картинок, причем браузер эту svg нормально отображал, а Imagick нет. Убрал теги pattern - все заработало. Итоговая svg стала такой:
<image xlink:href="/images/skinali/kitchen_elem_06.png" width="170" height="172" x="579" y="187"></image>

для неё после преобразования картинки в base64 получились нормальные jpg и png файлы.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы