Da SVG a PNG con più livelli di image usando PHP

Converto svg in image png con questo codice

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

Questo funziona con una singola image svg.

In realtà ho un'image svg che contiene più livelli di immagini come:

1 ° livello: questa è l'image della maglietta sullo background che è trasparente

2 ° livello: questa è un'altra image della T-shirt che contiene il colore

3 ° strato: questa è la piccola image adesiva che dovrebbe essere posizionata sulla maglietta

Il mio codice svg è -:

 <?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> 

Ora voglio tutti i livelli di image svg da combinare e creare una singola image png .

In questo momento la mia image png convertita sta mostrando solo il colore di background. La maglietta e l'image adesiva non vengono mostrate.

Si prega di installare estensione inkscape .

quindi metti le tue immagini (che hai usato in svg) sulla stessa cartella in cui hai salvato il tuo file svg.

quindi cambia il path dell'image nel file svg in questo modo.

  <?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> 

dopo di che esegui il command inkscape

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

allora otterrai il file png nella stessa cartella.

Il problema che ricevi proviene dai due PNG collegati, ma non si risolvono da quel sito (anche se sono lì). Per esempio se wheressi salvare queste due immagini da "dothejob.in" localmente in una cartella chiamata img e poi gettarle in xlink: href nel markup SVG come img / test.png e img / unnamed.png invece, tu scoprirai che il tuo command funziona bene.

Ciò ha scomodato anche altri e ci sono alcune soluzioni diverse là fuori in discussione. Dai un'occhiata a questo thread altrove su StackOverflow per maggiori informazioni. Il modo in cui risolverai questo dipenderà in gran parte da quanti svg lavorerai, quanto velocemente dovrai elaborarli ecc.