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.

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.