SVG to PNG with multiple image layers using PHP

Question

I convert svg to png image with this code

<?php 
exec('/usr/bin/rsvg-convert -w 1000 -h 1000 tshirt.svg -o tshirt.png');
?>

This works with a single svg image.

Actually i have an svg image which contains multiple layers of images like:

1st layer -: this is the background T-shirt image which is transparent

2nd layer -: this is another T-shirt image which contains color

3rd layer -: this is the small sticker image which should be placed on the T-shirt

My svg code is -:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg crossOrigin="anonymous" width="1000px" height="1000px" version="1.1"   xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <g class="canvas_background">
        <rect class="canvas_variant_color" width="998" height="998" x="0" y="0" style="" fill="#008080"/>
        <rect real_size="16,22" height="547" class="canvas_border" width="343" y="160" x="335" fill="#008080" />        
    </g>

    <g class="canvas_objects" style="" mask="url('#Sibnip5tjg')">
        <g style="display: block;" transform="matrix(1,0,0,1,-146.5,-236.3909)">
            <image style="display: block; opacity: 1;" height="175" width="308" y="461" x="501" crossOrigin="anonymous" xlink:href="http://dothejob.in/teerrific/img/front/unnamed.png"/>
        </g>
    </g>

    <g class="canvas_mockups">
        <g class="canvas_styles">
            <g class="canvas_style">
                <g  style="opacity: 1;">
                    <image  xlink:href="http://dothejob.in/teerrific/img/front/test.png"  x="0" y="0" width="1000" height="1000" />
                </g>
            </g>
        </g>
    </g> 
</svg>

Now i want to all svg image layers to be combined and make a single png image.

Right now my converted png image is showing only the background color. T-shirt and sticker image are not showing.

Orangeade

Answer 1

Please install inkscape extension.

then put your images (which you used in svg) on same folder where you save your svg file.

then change image path in svg file like that.

 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg crossOrigin="anonymous" width="1000px" height="1000px" version="1.1"   xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <g class="canvas_background">
        <rect class="canvas_variant_color" width="998" height="998" x="0" y="0" style="" fill="#008080"/>
        <rect real_size="16,22" height="547" class="canvas_border" width="343" y="160" x="335" fill="#008080" />        
    </g>

    <g class="canvas_objects" style="" mask="url('#Sibnip5tjg')">
        <g style="display: block;" transform="matrix(1,0,0,1,-146.5,-236.3909)">
            <image style="display: block; opacity: 1;" height="175" width="308" y="461" x="501" crossOrigin="anonymous" xlink:href="unnamed.png"/>
        </g>
    </g>

    <g class="canvas_mockups">
        <g class="canvas_styles">
            <g class="canvas_style">
                <g  style="opacity: 1;">
                    <image  xlink:href="test.png"  x="0" y="0" width="1000" height="1000" />
                </g>
            </g>
        </g>
    </g> 
</svg>

after that run inkscape command

exec( 'inkscape --without-gui --export-png=all.png tshirt.svg' ); 

then you will get png file in same folder.

Microgroove

Answer 2

The issue you're getting comes from the two linked PNGs just not resolving from that site (even though they are there). For example if you were to save those two images from "dothejob.in" locally in a folder called img and then just throw them into xlink:href in the SVG markup as img/test.png and img/unnamed.png instead, you'll find that your command works fine.

This has inconvenienced a few others as well and there's a few different solutions out there being discussed. Check out this thread elsewhere on stackoverflow for more information. How you solve this will largely depend on how many svgs you'll be working with, how fast you need to process them etc.

Allin