SVG tới PNG với nhiều lớp hình ảnh sử dụng PHP

Question

tôi chuyển đổi svg-png hình ảnh với mã này

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

này làm việc với một hình ảnh svg duy nhất.

Trên thực tế tôi có một hình ảnh svg trong đó có nhiều lớp hình ảnh như:

lớp 1 -: này là nền tảng hình ảnh áo thun hai mặt trong suốt

lớp 2 -: này là một hình ảnh áo phông khác có màu

Lớp thứ ba -: đây là hình ảnh dán nhỏ nên được đặt trên áo phông

đang svg của tôi là -:

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

Bây giờ tôi muốn tất cả svg lớp hình ảnh được kết hợp và thực hiện một png hình ảnh duy nhất.

Ngay bây giờ hình ảnh png đã chuyển đổi của tôi chỉ hiển thị màu nền. T-shirt và hình ảnh nhãn dán không hiển thị.

Answer 1

Sự cố bạn nhận được đến từ hai PNG được liên kết không giải quyết được từ trang web đó (mặc dù chúng có ở đó). Ví dụ: nếu bạn đã lưu hai hình ảnh đó từ "dothejob.in" cục bộ trong một thư mục có tên img và sau đó chỉ cần ném chúng vào xlink: href trong đánh dấu SVG là img/test.png và img/unnamed.png thay vào đó, bạn sẽ thấy rằng lệnh của bạn hoạt động tốt.

Điều này cũng gây bất tiện cho một vài người khác và có một số giải pháp khác nhau đang được thảo luận. Hãy xem this thread ở nơi khác trên stackoverflow để biết thêm thông tin. Cách bạn giải quyết điều này phần lớn sẽ phụ thuộc vào số lượng svgs bạn sẽ làm việc với, bạn cần xử lý nhanh như thế nào, v.v.

Answer 2

Vui lòng cài đặt mở rộng inkscape.

sau đó đặt hình ảnh của bạn (bạn đã sử dụng trong svg) trên cùng một thư mục nơi bạn lưu tệp svg của mình.

sau đó thay đổi đường dẫn hình ảnh trong tệp svg như thế.

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

sau đó chạy inkscape lệnh

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

sau đó bạn sẽ có được file png trong cùng một thư mục.