I
I
Ivan Antonov2016-10-28 13:44:33
PHP
Ivan Antonov, 2016-10-28 13:44:33

How to save SVG with image to PNG?

There is a picture of the layout of the room, I write text on it using svg.
Next, I convert the resulting SVG to PNG.
The output is just text. How to convert with an image?
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>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
Ivan Antonov, 2016-10-28
@antonowano

Rewrote 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();

D
Denis Chistyakov, 2017-04-06
@Dioved

Thanks for the solution, it helped, but in my svg file the image tag was wrapped in a 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>

Because of this, both base64 encoding and specifying the local path to the files did not help - just a black background instead of pictures, and the browser displayed this svg normally, but Imagick did not. Removed pattern tags - everything worked. The final svg became like this:
for her, after converting the image to base64, normal jpg and png files were obtained.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question