使用PHP将SVG转换为具有多个图像层的PNG [英] SVG to PNG with multiple image layers using PHP

问题描述

我使用此代码将svg转换为png图像

I convert svg to png image with this code

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

这适用于单个svg图像.

This works with a single svg image.

实际上我有一个svg图像，其中包含多层图像，例如:

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

第一层-:，这是透明的背景T恤图像

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

第二层-:，这是另一种包含颜色的T恤图像

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

第三层-:，这是应该放在T恤上的小贴纸图像

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

我的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>

现在，我希望将所有svg个图像层组合在一起，并制作单个png个图像.

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

现在，转换后的png图像仅显示背景颜色. T恤和贴纸图像未显示.

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

推荐答案

请安装 inkscape 扩展.

然后将图像(在svg中使用的图像)放在保存svg文件的同一文件夹中.

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

然后像这样更改svg文件中的图像路径.

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>

在运行inkscape命令之后

after that run inkscape command

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

然后您将在同一文件夹中获得png文件.

then you will get png file in same folder.

这篇关于使用PHP将SVG转换为具有多个图像层的PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！