Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG cannot load remote resource URLs (image links, fonts, etc.) #2367

Open
1 task done
tuanha1305 opened this issue Mar 26, 2024 · 2 comments
Open
1 task done

SVG cannot load remote resource URLs (image links, fonts, etc.) #2367

tuanha1305 opened this issue Mar 26, 2024 · 2 comments
Labels
Images & Formats: SVG

Comments

@tuanha1305
Copy link

tuanha1305 commented Mar 26, 2024 •
edited
Loading

Issue or Feature

I'm having some issues when rendering an SVG file to PNG:

  • The style font doesn't support loading from a CSS font:

    <style type="text/css">
  @import url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/SVN-Aptima/SVN-Aptima.css)
</style>

  • If I register the font file path, it works: registerFont()

  • The image link doesn't support loading from a URL:

    <image width="5800" height="6000" xlink:href="https://blog.lubans.org/media/2/20190710-black-white-hat.jpg" />

Steps to Reproduce

const file = await fs.readFile(join(__dirname, 'input.svg'))
    const image = new Image();
    image.src = file;
    
    
    const canvas = createCanvas(7800, 10000);
    const ctx = canvas.getContext('2d');

    ctx.drawImage(image, 0, 0);

    const buffer = canvas.toBuffer('image/png');

    fs.writeFileSync('output.png', buffer);
// etc.
<?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 version="1.1" focusable="false" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7800 10000">
    <defs>
        <mask id="image-mask">
            <image width="5800" height="6000" xlink:href="https://blog.lubans.org/media/2/20190710-black-white-hat.jpg" />
        </mask>
        <clipPath id="mask-DJPBK66022650f2045">
            <rect data-key="fOpKfO1934064411" data-layer="New_object__2" x="-1.5534973144531"
                y="0.057674400508404" width="7802.2143554688" height="10000.547851562" fill="none" />
        </clipPath>
        <clipPath id="mask-7XS1B66022650f206e">
            <rect data-key="fOpKfO1934064411" data-layer="New_object__2" x="-1.5534973144531"
                y="0.057674400508404" width="7802.2143554688" height="10000.547851562" fill="none" />
        </clipPath>
        <clipPath id="mask-Z8sVjm0077948007">
            <ellipse data-icon="circle" cx="585.582343164846" cy="596.6756787258979"
                rx="538.2018569814081" ry="543.367133250304" data-object="lW6plv1224437401"
                data-type="ellipse" fill="rgb(0, 0, 0)" stroke="none"
                stroke-width="31.94800087325349"></ellipse>
        </clipPath>
        <filter id="filter-BGG3V66022650f2079" color-interpolation-filters="sRGB">
            <feColorMatrix type="matrix" in="SourceGraphic" result="sepia-filter"
                values="0.39 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" />
            <feComponentTransfer in="sepia-filter" result="contrast-filter">
                <feFuncR type="linear" slope="1.25" intercept="-0.125" />
                <feFuncG type="linear" slope="1.25" intercept="-0.125" />
                <feFuncB type="linear" slope="1.25" intercept="-0.125" />
            </feComponentTransfer>
        </filter>
        <clipPath id="clip-path-EtTWAG1161026631-e982eedf448723ccfa2e2183c1c5b569">
            <rect data-key="" data-layer="" x="380.27548217773" y="415.0224609375"
                width="6990.7739257812" height="8539.1787109375" fill="#b8cce4" />
        </clipPath>
        <pattern id="pattern-QzpbxR8185504268-fb8bc777542a542affe27c6c240e9060"
            width="12038.18359375" height="12038.18359375" patternUnits="userSpaceOnUse"
            patternContentUnits="objectBoundingBox"
            patternTransform="translate(-1882.4877929688, -1310.8095703125)">
            <image
                xlink:href="https://ik.imagekit.io/7brsfmbfdcw/88/storage/personalizedDesign/starmap/202403/8321b1fd866f65c49fb2ffe4d72f5c76.preview.png"
                width="1" height="1" preserveAspectRatio="xMidYMid slice"></image>
        </pattern>
        <filter id="filter-vBwZd33133131911-filter">
            <feMorphology in="SourceAlpha" result="OUTLINE_DILATED" operator="dilate" radius="50"></feMorphology>
            <feFlood flood-color="rgb(255, 255, 255)" flood-opacity="1" result="OUTLINE_COLOR"></feFlood>
            <feComposite in="OUTLINE_COLOR" in2="OUTLINE_DILATED" operator="in" result="OUTLINE"></feComposite>
            <feMerge>
                <feMergeNode in="OUTLINE"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <style type="text/css">
            @import
            url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/SVN-Aptima/SVN-Aptima.css)</style>
        <filter id="filter-FCYkp68311113180-filter">
            <feMorphology in="SourceAlpha" result="OUTLINE_DILATED" operator="dilate" radius="100"></feMorphology>
            <feFlood flood-color="rgb(255, 255, 255)" flood-opacity="1" result="OUTLINE_COLOR"></feFlood>
            <feComposite in="OUTLINE_COLOR" in2="OUTLINE_DILATED" operator="in" result="OUTLINE"></feComposite>
            <feMerge>
                <feMergeNode in="OUTLINE"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <style type="text/css">
            @import
            url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/samantha_upright/samantha_upright.css)</style>
        <style type="text/css">
            @import
            url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/yellowtail/yellowtail.css)</style>
        <filter id="filter-I1Fdxn9173717771-filter">
            <feMorphology in="SourceAlpha" result="OUTLINE_DILATED" operator="dilate" radius="100"></feMorphology>
            <feFlood flood-color="rgb(227, 108, 9)" flood-opacity="1" result="OUTLINE_COLOR"></feFlood>
            <feComposite in="OUTLINE_COLOR" in2="OUTLINE_DILATED" operator="in" result="OUTLINE"></feComposite>
            <feMerge>
                <feMergeNode in="OUTLINE"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <style type="text/css">
            @import
            url(https://d1wgzwi9vgtgm8.cloudfront.net/88/storage/personalizedDesign/fonts/Dancing_Script_OT/Dancing_Script_OT.css)</style>
        <clipPath id="mask-X8Y6K660226516cdbb">
            <ellipse data-key="sAth5d3585431313" data-layer="Uploader_Test_Filter"
                cx="3863.4694824219" cy="7907.4692382812" rx="1148.2885742188" ry="1148.2885742188"
                fill="none" />
        </clipPath>
        <clipPath id="mask-VD283660226516cdd5">
            <ellipse data-key="sAth5d3585431313" data-layer="Uploader_Test_Filter"
                cx="3863.4694824219" cy="7907.4692382812" rx="1148.2885742188" ry="1148.2885742188"
                fill="none" />
        </clipPath>
        <filter id="filter-5H1UK660226516cddd" color-interpolation-filters="sRGB">
            <feColorMatrix type="matrix" in="SourceGraphic" result="bw-filter"
                values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
            <feComponentTransfer in="bw-filter" result="contrast-filter">
                <feFuncR type="linear" slope="1.5" intercept="-0.25" />
                <feFuncG type="linear" slope="1.5" intercept="-0.25" />
                <feFuncB type="linear" slope="1.5" intercept="-0.25" />
            </feComponentTransfer>
        </filter>
    </defs>
    <g data-document="design2d">
        <g clip-path="url(#mask-7XS1B66022650f206e)">
            <g transform="translate(-1.5534973144509 -12526.167238625) scale(86.483043930737)"
                data-image-uploader-key="fOpKfO1934064411">
                <rect x="0" y="0" width="400" height="400" opacity="0" data-role="image-placeholder"></rect>
                <image
                    xlink:href="https://ik.imagekit.io/7brsfmbfdcw/88/storage/personalizedDesign/customer_uploaded/20240314/L5Q1965f3acde9cd3e.thumb.jpg"
                    x="0" y="0" width="346" height="400" data-customer-uploaded="1"
                    filter="url(#filter-BGG3V66022650f2079)" />
            </g>
        </g>
        <image
            xlink:href="https://ik.imagekit.io/7brsfmbfdcw/88/storage/personalizedDesign/design/images/14.03.2024/1.7TMTV65f3ab86b52c1.preview.jpg"
            data-key="lMfL7a6614161699" data-layer="New_object__3" width="5647" height="3770"
            mask="url(#image-mask)"
            transform="translate(374.87768554688 419.95434570312) scale(1.2389601918054 2.2637260133455)" />
        <g data-key="QzpbxR8185504268" data-layer="STARMAP">
            <ellipse data-key="EtTWAG1161026631" data-layer="Map_Holder" cx="4136.6040039062"
                cy="4708.2822265625" rx="6019.091796875" ry="6019.091796875"
                fill="url(#pattern-QzpbxR8185504268-fb8bc777542a542affe27c6c240e9060)"
                clip-path="url(#clip-path-EtTWAG1161026631-e982eedf448723ccfa2e2183c1c5b569)" />
            <g data-starmap="QzpbxR8185504268" x="-1882.4877929688" y="-1310.8095703125"
                width="12038.18359375" height="12038.18359375"
                clip-path="url(#clip-path-EtTWAG1161026631-e982eedf448723ccfa2e2183c1c5b569)"></g>
            <text data-key="vBwZd33133131911" data-layer="Location"
                font-family="&#039;SVN-Aptima&#039;" font-size="800" font-weight="bold"
                font-style="italic" letter-spacing="0" word-spacing="0" text-anchor="middle"
                filter="url(#filter-vBwZd33133131911-filter)" fill="#205867" y="2593.6466064453"
                dominant-baseline="baseline">
                <tspan x="3975.3687744141" dy="0em" alignment-baseline="baseline">New York</tspan>
            </text>
            <text data-key="FCYkp68311113180" data-layer="LatLng"
                font-family="&#039;Samantha Upright&#039;" font-size="700" font-weight="bold"
                font-style="normal" letter-spacing="0" word-spacing="0" text-anchor="middle"
                filter="url(#filter-FCYkp68311113180-filter)" fill="#e36c09" y="5227.1245117188"
                dominant-baseline="baseline">
                <tspan x="3991.3588867188" dy="0em" alignment-baseline="baseline">40°42&#039;45&quot;
                    N 74°0&#039;21&quot; W</tspan>
            </text>
            <text data-key="vSWzxc3191115515" data-layer="Date" font-family="&#039;Yellowtail&#039;"
                font-size="700" font-weight="normal" font-style="normal" letter-spacing="0"
                word-spacing="0" text-anchor="middle" fill="#ffffff" y="3900.9979248047"
                dominant-baseline="baseline">
                <tspan x="4010.6066894531" dy="0em" alignment-baseline="baseline">March 26, 2024,
                    08:30</tspan>
            </text>
        </g>
        <text data-key="I1Fdxn9173717771" data-layer="Test_Fonts"
            font-family="&#039;Dancing Script OT&#039;" font-size="600" font-weight="normal"
            font-style="normal" letter-spacing="0" word-spacing="0" text-anchor="middle"
            filter="url(#filter-I1Fdxn9173717771-filter)" fill="#eeece1" y="1281"
            dominant-baseline="baseline">
            <tspan x="3948" dy="0em" alignment-baseline="baseline">Title here</tspan>
        </text>
        <img
            href="https://ik.imagekit.io/7brsfmbfdcw/88/storage/personalizedDesign/design/images/14.03.2024/1.57FT165f3abeaed2ae.preview.jpg"
            data-key="Z8sVjm0077948007" data-layer="Mask_by_ellipse" width="1152" height="1152"
            clip-path="url(#mask-Z8sVjm0077948007)"
            transform="translate(1865.3439941406 5806.0405273438) scale(3.4429168701172 3.4983819325765)" />
        <g clip-path="url(#mask-VD283660226516cdd5)">
            <g transform="translate(2715.1809082031 6376.4178059896) scale(7.6552571614583)"
                data-image-uploader-key="sAth5d3585431313">
                <rect x="0" y="0" width="400" height="400" opacity="0" data-role="image-placeholder"></rect>
                <image
                    xlink:href="https://ik.imagekit.io/7brsfmbfdcw/88/storage/personalizedDesign/customer_uploaded/20240325/8Q8RI6602256375aaa.thumb.jpg"
                    x="0" y="0" width="300" height="400" data-customer-uploaded="1"
                    filter="url(#filter-5H1UK660226516cddd)" />
            </g>
        </g>
    </g>
    <g data-svg-uploader-group="1" style="display: none">
        <g clip-path="url(#mask-DJPBK66022650f2045)">
            <g transform="translate(-1.5534973144531 0.057674400508404) scale(1)"
                data-image-uploader-key="fOpKfO1934064411">
                <rect x="0" y="0" width="10000.547851562" height="10000.547851562" opacity="0"
                    data-role="image-placeholder"></rect>

            </g>
        </g>
        <g clip-path="url(#mask-X8Y6K660226516cdbb)">
            <g transform="translate(2715.1809082031 6759.1806640625) scale(1)"
                data-image-uploader-key="sAth5d3585431313">
                <rect x="0" y="0" width="2296.5771484375" height="2296.5771484375" opacity="0"
                    data-role="image-placeholder"></rect>

            </g>
        </g>
    </g>
</svg>

Your Environment

  • Version of node-canvas: canvas@2.11.2
  • Environment: macOS 14.2.1
@tuanha1305
Copy link
Author

@zbjornson Can you help me? Please

@zbjornson
Copy link
Collaborator

Sorry for the slow reply. node-canvas definitely won't make network requests to load remote resources currently, and I don't know if librsvg provides a way to do it either (some info here). Is it possible for you to convert the remote URLs to data: URLs?

@zbjornson zbjornson changed the title SVG cannot load the image link & font CSS SVG cannot load remote resource URLs (image links, fonts, etc.) Jun 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Images & Formats: SVG
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zbjornson @tuanha1305