使用 PHP 将 SVG 转换为具有多个图像层的 PNG答案

【问题标题】：SVG to PNG with multiple image layers using PHP使用 PHP 将 SVG 转换为具有多个图像层的 PNG
【发布时间】：2015-09-24 13:54:48
【问题描述】：

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

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

这适用于单个 svg 图像。

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

第一层-：这是透明的背景T恤图片

第 2 层 -: 这是另一个包含颜色的 T 恤图像

第三层-：这是应该放在T恤上的小贴纸图片

我的 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 图像。

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

【问题讨论】：

标签： php svg png inkscape rsvg

【解决方案1】：

您遇到的问题来自两个链接的 PNG，只是没有从该站点解决（即使它们在那里）。例如，如果您要将这两个图像从“dothejob.in”本地保存在名为 img 的文件夹中，然后将它们作为 img/test.png 和 img/unnamed.png 放入 SVG 标记中的 xlink:href 中，您'会发现你的命令运行良好。

这也给其他一些人带来了不便，并且正在讨论一些不同的解决方案。在 stackoverflow 的其他地方查看 this thread 以获取更多信息。如何解决这个问题在很大程度上取决于您将使用多少 svg，处理它们需要多快等。

【讨论】：

【解决方案2】：

请安装inkscape 扩展。

然后将您的图像（您在 svg 中使用）放在保存 svg 文件的同一文件夹中。

然后像这样更改 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="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命令

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

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

【讨论】：