如何使用 PHP 将 SVG 图像转换为 PNG 而不丢失尺寸

Question

我尝试使用 meyfa/php-svg PHP 库将 SVG 图像转换为 PNG。

这是代码

<?php
require __DIR__ . '/vendor/autoload.php';

use SVG\SVG;

$image = SVG::fromFile('new.svg');

$doc = $image->getDocument();

$rasterImage = $image->toRasterImage(1024,1024);

imagepng($rasterImage,'output.png');

?>

这是转换后的png输出

这是原始的 svg

svg 文件：https://drive.google.com/file/d/1jDNOzoU9aG2sDj-No_v-psjMiQ1wVPEA/view?usp=sharing

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px"
    y="0px" viewBox="0 0 320.8 417.7" xml:space="preserve" style="enable-background: new 0 0 320.8 417.7" width="1024"
    height="720">
    <style type="text/css">
        <![CDATA[
        @import url('https://online-qr-generator.com/themes/altum/assets/fonts/style.css?family=GT-Walsheim-Pro');

        .st1 {
            font-family: 'GT-Walsheim-Pro';
        }

        .st2 {
            font-size: 42px;
        }

        .black-area {
            fill: #000000;
        }

        .white-area {
            fill: #ffffff;
        }

        .text-color {
            fill: #FFF;
        }
        ]]>
    </style>
    <g>
        <path class="black-area"
            d="M320.8,14.9C320.8,4,317.2,0,306.9,0H13.6C4.6,0,2.3,1.9,0,10.5v396.3c0.5,5.7,2.8,9.9,9,11h302.4c3.6-1,7-2.3,8.3-6.3   c0.9-2.9,1.2-5.9,1.1-8.8v-49.3C320.8,240.5,320.8,127.7,320.8,14.9z M307.5,303.6c0,4.1-0.9,5.1-5.1,5.1   c-94.8-0.1-189.7-0.1-284.5,0c-4.1,0-5.1-0.9-5.1-5.1c0.2-47.5,0.1-94.9,0.1-142.4c0-47.6,0.1-95.3-0.1-142.9   c0-4.1,0.9-5.1,5.1-5.1c94.8,0.1,189.7,0.1,284.5,0c4.1,0,5.1,0.9,5.1,5.1C307.4,113.5,307.4,208.5,307.5,303.6z" />
        <path class="white-area"
            d="M307.5,303.6c0,4.1-0.9,5.1-5.1,5.1c-94.8-0.1-189.7-0.1-284.5,0c-4.1,0-5.1-0.9-5.1-5.1   c0.2-47.5,0.1-94.9,0.1-142.4c0-47.6,0.1-95.3-0.1-142.9c0-4.1,0.9-5.1,5.1-5.1c94.8,0.1,189.7,0.1,284.5,0c4.1,0,5.1,0.9,5.1,5.1   C307.4,113.5,307.4,208.5,307.5,303.6z" />
        <text x="55" y="0" transform="matrix(1 0 0 1 105.65 380.0901)" class="st1 st2 text-color"
            style="text-anchor: middle">Scan me!</text>
    </g>
    <g>
        <defs>
            <linearGradient id="linear">
                <stop offset="30%" style="stop-color: GLC1;" />
                <stop offset="70%" style="stop-color: GLC2;" />


            </linearGradient>

        </defs>
        <defs>
            <radialGradient id="radial">
                <stop offset="10%" style="stop-color: GRC1" />
                <stop offset="90%" style="stop-color: GRC2" />
            </radialGradient>
        </defs>
        <defs>
            <linearGradient id="linear-b">
                <stop offset="30%" style="stop-color: GLCB1;" />
                <stop offset="70%" style="stop-color: GLCB2;" />
            </linearGradient>
        </defs>
        <defs>
            <radialGradient id="radial-b">
                <stop offset="10%" style="stop-color: GRCB1" />
                <stop offset="90%" style="stop-color: GRCB2" />
            </radialGradient>
        </defs>
    </g>
    <image
        xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIyNTAiIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgZmlsbD0iI2ZmZmZmZiIvPjxnIHRyYW5zZm9ybT0ic2NhbGUoOC4wNjUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLDEpIj48Zz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjUsMy41KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLTMuNSAtMy41TDMuNSAtMy41TDMuNSAzLjVMLTMuNSAzLjVaTS0yLjUgLTIuNUwtMi41IDIuNUwyLjUgMi41TDIuNSAtMi41WiIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTS0xLjUgLTEuNUwxLjUgLTEuNUwxLjUgMS41TC0xLjUgMS41WiIgZmlsbD0iIzAwMDAwMCIvPjwvZz48L2c+PGc+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUuNSwzLjUpIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTS0zLjUgLTMuNUwzLjUgLTMuNUwzLjUgMy41TC0zLjUgMy41Wk0tMi41IC0yLjVMLTIuNSAyLjVMMi41IDIuNUwyLjUgLTIuNVoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0tMS41IC0xLjVMMS41IC0xLjVMMS41IDEuNUwtMS41IDEuNVoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9nPjwvZz48Zz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjUsMjUuNSkiPjxnIHRyYW5zZm9ybT0icm90YXRlKC05MCkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTS0zLjUgLTMuNUwzLjUgLTMuNUwzLjUgMy41TC0zLjUgMy41Wk0tMi41IC0yLjVMLTIuNSAyLjVMMi41IDIuNUwyLjUgLTIuNVoiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0tMS41IC0xLjVMMS41IC0xLjVMMS41IDEuNUwtMS41IDEuNVoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9nPjwvZz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDBMOSAyTDggMkw4IDhMOSA4TDkgOUw3IDlMNyA4TDIgOEwyIDlMMyA5TDMgMTBMMSAxMEwxIDhMMCA4TDAgMTBMMSAxMEwxIDExTDAgMTFMMCAxNEwxIDE0TDEgMTVMMCAxNUwwIDE2TDEgMTZMMSAxNUwyIDE1TDIgMTdMNCAxN0w0IDE2TDYgMTZMNiAxN0w3IDE3TDcgMThMNSAxOEw1IDIwTDIgMjBMMiAyMUw1IDIxTDUgMjBMNiAyMEw2IDIxTDggMjFMOCAyMkw5IDIyTDkgMjFMOCAyMUw4IDIwTDEwIDIwTDEwIDE4TDExIDE4TDExIDE5TDEyIDE5TDEyIDE3TDEzIDE3TDEzIDIwTDEyIDIwTDEyIDIyTDExIDIyTDExIDIxTDEwIDIxTDEwIDIzTDEyIDIzTDEyIDIyTDEzIDIyTDEzIDIwTDE0IDIwTDE0IDIxTDE1IDIxTDE1IDIzTDE0IDIzTDE0IDI0TDE1IDI0TDE1IDI1TDE0IDI1TDE0IDI2TDEzIDI2TDEzIDI0TDkgMjRMOSAyM0w4IDIzTDggMjdMOSAyN0w5IDI4TDggMjhMOCAyOUwxMCAyOUwxMCAyN0wxMSAyN0wxMSAyNkw5IDI2TDkgMjVMMTIgMjVMMTIgMjdMMTQgMjdMMTQgMjhMMTIgMjhMMTIgMjlMMTcgMjlMMTcgMjhMMTggMjhMMTggMjlMMjAgMjlMMjAgMjhMMTggMjhMMTggMjdMMTkgMjdMMTkgMjZMMTcgMjZMMTcgMjdMMTYgMjdMMTYgMjZMMTUgMjZMMTUgMjVMMTcgMjVMMTcgMjNMMTggMjNMMTggMjRMMTkgMjRMMTkgMjVMMjAgMjVMMjAgMjZMMjEgMjZMMjEgMjVMMjMgMjVMMjMgMjdMMjQgMjdMMjQgMjVMMjUgMjVMMjUgMjNMMjYgMjNMMjYgMjVMMjkgMjVMMjkgMjNMMjcgMjNMMjcgMjJMMjggMjJMMjggMjBMMjkgMjBMMjkgMTlMMjggMTlMMjggMThMMjkgMThMMjkgMTdMMjcgMTdMMjcgMThMMjYgMThMMjYgMTdMMjQgMTdMMjQgMTZMMjUgMTZMMjUgMTVMMjcgMTVMMjcgMTZMMjkgMTZMMjkgMTRMMjggMTRMMjggMTNMMjcgMTNMMjcgMTRMMjYgMTRMMjYgMTNMMjQgMTNMMjQgMTJMMjYgMTJMMjYgMTFMMjcgMTFMMjcgMTBMMjggMTBMMjggOUwyNyA5TDI3IDhMMjIgOEwyMiA5TDI0IDlMMjQgMTBMMjUgMTBMMjUgMTFMMTkgMTFMMTkgMTBMMjEgMTBMMjEgNkwyMCA2TDIwIDdMMTkgN0wxOSA0TDE4IDRMMTggM0wxNyAzTDE3IDRMMTYgNEwxNiAwTDE1IDBMMTUgMUwxNCAxTDE0IDBMMTMgMEwxMyAyTDEyIDJMMTIgMEwxMSAwTDExIDFMMTAgMUwxMCAwWk0xOSAwTDE5IDFMMTcgMUwxNyAyTDE5IDJMMTkgM0wyMCAzTDIwIDVMMjEgNUwyMSAzTDIwIDNMMjAgMUwyMSAxTDIxIDBaTTkgMkw5IDNMMTAgM0wxMCA0TDkgNEw5IDVMMTEgNUwxMSAzTDEyIDNMMTIgMkwxMSAyTDExIDNMMTAgM0wxMCAyWk0xNCAyTDE0IDNMMTMgM0wxMyA0TDEyIDRMMTIgNUwxMyA1TDEzIDdMMTIgN0wxMiA2TDExIDZMMTEgOEwxMCA4TDEwIDlMOSA5TDkgMTBMOCAxMEw4IDExTDYgMTFMNiAxMEw3IDEwTDcgOUw0IDlMNCAxMkw1IDEyTDUgMTNMNCAxM0w0IDE0TDMgMTRMMyAxMUwyIDExTDIgMTRMMyAxNEwzIDE2TDQgMTZMNCAxNUw2IDE1TDYgMTZMNyAxNkw3IDE3TDggMTdMOCAxNkw5IDE2TDkgMThMOCAxOEw4IDE5TDYgMTlMNiAyMEw4IDIwTDggMTlMOSAxOUw5IDE4TDEwIDE4TDEwIDE3TDExIDE3TDExIDE2TDkgMTZMOSAxNUwxMCAxNUwxMCAxNEw5IDE0TDkgMTNMMTEgMTNMMTEgMTRMMTIgMTRMMTIgMTJMMTEgMTJMMTEgOUwxMiA5TDEyIDhMMTMgOEwxMyA5TDE1IDlMMTUgOEwxNiA4TDE2IDZMMTcgNkwxNyAxMEwxOCAxMEwxOCA5TDIwIDlMMjAgOEwxOSA4TDE5IDdMMTggN0wxOCA2TDE3IDZMMTcgNUwxOCA1TDE4IDRMMTcgNEwxNyA1TDE2IDVMMTYgNEwxNCA0TDE0IDNMMTUgM0wxNSAyWk0xNSA1TDE1IDZMMTQgNkwxNCA4TDE1IDhMMTUgNkwxNiA2TDE2IDVaTTkgNkw5IDdMMTAgN0wxMCA2Wk0yNiA5TDI2IDEwTDI3IDEwTDI3IDlaTTkgMTBMOSAxMUw4IDExTDggMTJMNiAxMkw2IDExTDUgMTFMNSAxMkw2IDEyTDYgMTNMOSAxM0w5IDExTDEwIDExTDEwIDEwWk0xMiAxMEwxMiAxMUwxMyAxMUwxMyAxMFpNMTQgMTFMMTQgMTJMMTMgMTJMMTMgMTdMMTUgMTdMMTUgMTZMMTYgMTZMMTYgMThMMTggMThMMTggMTdMMTkgMTdMMTkgMTlMMTQgMTlMMTQgMjBMMTYgMjBMMTYgMjFMMTcgMjFMMTcgMjJMMTYgMjJMMTYgMjNMMTUgMjNMMTUgMjRMMTYgMjRMMTYgMjNMMTcgMjNMMTcgMjJMMTggMjJMMTggMjNMMTkgMjNMMTkgMjJMMjAgMjJMMjAgMjBMMTkgMjBMMTkgMTlMMjAgMTlMMjAgMThMMjEgMThMMjEgMTlMMjMgMTlMMjMgMThMMjQgMThMMjQgMTlMMjUgMTlMMjUgMjBMMjcgMjBMMjcgMTlMMjUgMTlMMjUgMThMMjQgMThMMjQgMTdMMjMgMTdMMjMgMThMMjEgMThMMjEgMTdMMjIgMTdMMjIgMTZMMTkgMTZMMTkgMTVMMjUgMTVMMjUgMTRMMjQgMTRMMjQgMTNMMjMgMTNMMjMgMTRMMjEgMTRMMjEgMTNMMjIgMTNMMjIgMTJMMjEgMTJMMjEgMTNMMjAgMTNMMjAgMTJMMTkgMTJMMTkgMTFMMTggMTFMMTggMTJMMTcgMTJMMTcgMTFaTTI4IDExTDI4IDEyTDI5IDEyTDI5IDExWk0xNCAxMkwxNCAxM0wxNiAxM0wxNiAxNEwxNSAxNEwxNSAxNUwxNCAxNUwxNCAxNkwxNSAxNkwxNSAxNUwxOSAxNUwxOSAxNEwxNyAxNEwxNyAxM0wxNiAxM0wxNiAxMlpNMTggMTJMMTggMTNMMTkgMTNMMTkgMTJaTTYgMTRMNiAxNUw4IDE1TDggMTRaTTE3IDE2TDE3IDE3TDE4IDE3TDE4IDE2Wk0wIDE3TDAgMjFMMSAyMUwxIDE3Wk0xOCAyMUwxOCAyMkwxOSAyMkwxOSAyMVpNMjEgMjFMMjEgMjRMMjQgMjRMMjQgMjFaTTI1IDIxTDI1IDIyTDI3IDIyTDI3IDIxWk0yMiAyMkwyMiAyM0wyMyAyM0wyMyAyMlpNMTQgMjZMMTQgMjdMMTUgMjdMMTUgMjhMMTYgMjhMMTYgMjdMMTUgMjdMMTUgMjZaTTI2IDI2TDI2IDI3TDI1IDI3TDI1IDI4TDI0IDI4TDI0IDI5TDI3IDI5TDI3IDI3TDI4IDI3TDI4IDI4TDI5IDI4TDI5IDI3TDI4IDI3TDI4IDI2Wk0yMSAyOEwyMSAyOUwyMyAyOUwyMyAyOFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9nPjwvc3ZnPgo="
        x="35" y="30" width="250" height="250" />
</svg>

如何将 svg 图像转换为具有正确尺寸的 png？

Answer 1

您可以尝试choowx/rasterize-svg和chillerlan/php-qrcode。样本：

注意事项： 图像转换模块使用sharp，需要nodejs。 Sharp lib 依赖于 libvips，您可以直接使用 [php-vips](https://github.com/libvips/php-vips]。使用 php-vips 的示例代码：

require __DIR__ . '/vendor/autoload.php';
use Jcupitt\Vips;

try {
    // Load the SVG file
    // You can specify the desired dimensions using the 'dpi' option
    $image = Vips\Image::newFromFile("input.svg", [
        "dpi" => 300  // Adjust DPI as needed for desired resolution
    ]);

    // Save as PNG
    $image->writeToFile("output.png");
} catch (Exception $e) {
    echo "Error: " . $e->getMessage() . "\n";
}