SVG for PNG with multiple image layers using PHP

Question

Convert svg to png image using 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 that contains several layers of images, such as:

Level 1 -: This is a transparent soccer card image

Level 2 -: This is another T-shirt image that contains color

Third layer -: This is a small sticker image that should be placed on the 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 all svg layers to be merged and make one png image.

Right now, my converted png image shows only the background color. T-shirts and stickers are not displayed.

Answer 1

Please install the inkscape extension.

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

then change the image path in the svg file like this.

  <?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 executing the inkscape command

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

then you will get the png file in the same folder.

Answer 2

The problem you are getting is related to two related PNGs that are not resolved from this site (although they are). For example, if you have to save these two images with "dothejob.in" locally in the img folder, and then just throw them in xlink: href in the SVG markup as img / test.png and img / unnamed.png instead, you will find that your team is working fine.

It also interfered with several others, and several different solutions are discussed there. Check out this thread elsewhere on stackoverflow for more information. How you decide this will largely depend on how many svgs you work on, how fast you need to process them, etc.