lovell / lovell/sharp

SVG file with viewbox not rendered correctly

Open
#2,629 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

blocked-upstream-dependency
Dominant language
JavaScript
Stars
32.7k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
5

Description

The following SVG is not rendered correctly. The girl in the image get's her handbag cropped as you can see in this PNG:

_sktwimmakmg3k2ve2 builder

To reproduce simply covert SVG to PNG using.

                    sharp(Buffer.from(svg, 'utf8'))
                        .png()
                        .toFile(pngFile)
                        .then(function (info) {

It's this part of the SVG code that is not working when I put an x greater than 0 in the viewbox.

<svg id="Head_3pt_svg" data-name="Head 3pt svg" xmlns="http://www.w3.org/2000/svg" **viewBox="20.858752808321043 0 127.20124719167896 283.46"** width="127.20124719167896" height="283.46"> </svg>

Below is the entire SVG code for the image above:

`




























<style type="text/css"><![CDATA[@font-face {
font-family: 'Alegreya Sans SC';
font-style: normal;
font-weight: 900;
src: url(../fonts/AlegreyaSansSC-Black.woff?v=10) format('woff');
};]]>
</style>






















<style>.body-32-cls-1 {
fill: #cce3ff;
}
.body-32-cls-2 {
fill: #5c8eff;
}
</style>






<style>.head-29-cls-1 {
fill: #cce3ff;
}
.head-29-cls-2 {
fill: #5c8eff;
}
</style>








<style>.body-53-cls-1 {
fill: #cce3ff;
}
.body-53-cls-2 {
fill: #5c8eff;
}
</style>






<style>.head-107-cls-1 {
fill: #cce3ff;
}
.head-107-cls-2 {
fill: #5c8eff;
}
.head-107-cls-3 {
fill: #020202;
}
</style>








<style>.body-04-cls-1 {
fill: #cce3ff;
}
.body-04-cls-2 {
fill: #5c8eff;
}
</style>

<path d="M148.06,194.45c0-4.85-1.75-14-3.83-17.83a1.54,1.54,0,0,0-.45-.5c-1.63-11.46-8.88-25.39-15.76-29.31a15,15,0,0,0,4.41-6.74c3.9,0,8.3-.62,9.41-1.74,1.83-1.82.85-5.32.32-7.19l0-.18c-.4-1.43-2.13-1.78-2.79-1.91-3.11-.61-14.84-.37-16.29,1.49-1.19,1.54-.2,3.71.85,6,.21.44.41.88.59,1.31.53,1.25,2,1.67,3.1,1.88.5.1,1.1.17,1.74.23a12,12,0,0,1-4.07,5.2,4.91,4.91,0,0,1-1.22.6h-.22a3.55,3.55,0,0,0-.66.17,3.08,3.08,0,0,1-1.64-.36c-3.57-1.83-6.64-12.62-7.92-19.73,3.32-1.13,6.32-3.17,7.79-6.22a1.48,1.48,0,0,0-.05-1.4c-2.11-3.7-3.83-7.09-5.34-10.07-3.29-6.47-5.67-11.15-9.12-13.1-3.9-2.2-7.09-1.64-11.9-.78-2.25.41-4.79.86-8.06,1.18l-.36,0V90.71a1.5,1.5,0,0,0-3,0v5c-1.53,0-3,0-4.26,0-4.78,0-8.56-.11-11.18,3.38-1.24,1.64-2.75,3.82-4.49,6.34-2.82,4.09-6,8.73-9.15,12.63a1.5,1.5,0,0,0-.32,1.13c.63,4.84,4,7.46,7.52,8.6a30.91,30.91,0,0,1-5.55,6.1c-1.13.92-3.56.33-6.24-.9-1.09-2.29-2.56-4-4.65-4.29a4.57,4.57,0,0,0-1.38,0,2.45,2.45,0,0,0,.08-.56c.1-4-9.88-10.58-12.78-11.4-4.92-1.37-7.47.2-8.74,1.76-2.48,3-1.75,8,.07,11.48a6.12,6.12,0,0,0,6,3.64,31.75,31.75,0,0,0,7.73-1.5c1.09-.3,2.28-.63,3.54-.94a38.73,38.73,0,0,0-6,8.3c-.6,1.05-3.74,7.63-6.59,13.8-4.19,9.08-5.36,11.93-5.55,13.11h0v0c0,.07,0,.14,0,.2-.13,1.64-.14,9.87-.07,29.33,0,2.1,0,3.64,0,4.25a1.53,1.53,0,0,0,.39,1c1.52,1.65,7.69,5.07,10.83,6a1.5,1.5,0,0,0,1.37-.28c.7-.56,1.82-1.43,3.14-2.45,5.41-4.19,10-7.8,11.12-9.5a1.5,1.5,0,0,0,.14-1.39,30.54,30.54,0,0,1-.77-3.15,8.9,8.9,0,0,0,5.43-2.37c2.11-1.83,4.4-5.14,3.89-8.43l-.28-1.89c-1-7.23-2.22-15.42-3.32-18.2a3.14,3.14,0,0,0-.9-1.19c0-.7,0-1.54.09-2.48.2-4.74.5-11.9-.81-17.09-.18-.7-.37-1.4-.57-2.09a11.62,11.62,0,0,0,3.29.55A5.29,5.29,0,0,0,58,136.2a34.28,34.28,0,0,0,6.84-7.79l.44,0A9.8,9.8,0,0,0,69,133.05a85.4,85.4,0,0,1-.5,13.55c-.76,6.27-4.06,12.48-5.83,15.82a1.34,1.34,0,0,0-.17.58,4.44,4.44,0,0,0,1.75,3.85c-1.2,7.6-.56,18.88,2,34.43a1.48,1.48,0,0,0,.82,1.11c2.68,1.31,7,2.26,11.94,2.8l1.24,7.51c-.06,2.89-.84,37.37-.11,48.18a60.37,60.37,0,0,1-5.41,9.59c-3,4.58-5.32,8.2-3,10.53,1.87,1.84,7.54,2.53,12.19,2.53,1,0,1.92,0,2.77-.09,6-.4,7.11-1.88,7.49-2.36,2.39-3.11-.53-6.12-3.63-9.32-2.85-2.93-6.39-6.59-7.31-11.28a2,2,0,0,0-.19-.48c-.67-11.64.15-47,.16-47.37,0-.09,0-.18,0-.28l-1.14-6.88c2.17.15,4.41.23,6.64.23,1.9,0,3.8-.06,5.64-.17.31,2.16,1,6.59,1.71,10.91a1.66,1.66,0,0,0,.06.21c.86,2.59,4.89,13.71,8.78,24.47,3.28,9,6.37,17.57,7.16,19.88-.11,4.48-3.42,9.3-5.85,12.83-2.3,3.34-3.69,5.36-2.26,6.91,2.14,2.31,6.84,2.81,10.52,2.81h.28c3.86,0,10.61-.77,12.3-2.65,1.19-1.33,1-3.59-3.79-10.34-2.66-3.74-6-7.84-8.37-10.53-.81-2.4-3.9-10.92-7.17-19.93-3.84-10.6-7.8-21.55-8.72-24.29-.72-4.13-1.34-8.35-1.66-10.53,5.1-.54,9.56-1.57,12.24-3.19a1.5,1.5,0,0,0,.64-1.77c-2.29-6.71-1.15-14.73-.14-21.81.73-5.1,1.4-9.91.72-13.69a5,5,0,0,0,.65-1.18,1.44,1.44,0,0,0,.07-.77,57.72,57.72,0,0,0-3.78-12.4,36.94,36.94,0,0,1-2.31-6.95c-.54-2.93.53-5.83,1.66-8.91a30,30,0,0,0,2.08-7.78c.5-.06,1-.13,1.52-.22.88,4.76,3.89,18.76,9.44,21.64-4,5.91-2.8,21.11-2,25.16.08,1.63,1.2,23.56,3,35.19a1.47,1.47,0,0,0,.61,1,10.45,10.45,0,0,0,6.12,2c4.83,0,9.15-3.4,11.83-5.51l.29-.23a1.56,1.56,0,0,0,.56-1,31.84,31.84,0,0,0,.08-6.8,11.63,11.63,0,0,0,7-2.56A1.48,1.48,0,0,0,148.06,194.45Zm-20.9-57.94c-.17-.39-.36-.8-.55-1.21a17,17,0,0,1-1.09-2.79c2.48-.66,11.77-1.2,13.81-.38.79,2.91.61,3.77.44,4C137.67,137.28,128.6,137.33,127.16,136.51Zm-91.79-7.27c-6.57,1.8-8.81,2.15-10.24-.62-1.59-3.08-1.77-6.53-.41-8.2a3.65,3.65,0,0,1,3-1.18,10.05,10.05,0,0,1,2.65.41c2.92.82,9.82,6.24,10.53,8.19h0C38.82,128.3,37,128.8,35.37,129.24Zm7.34,34.42,0-.16a1.56,1.56,0,0,0-.54-.91,6.79,6.79,0,0,0-3.49-1.28,6.72,6.72,0,0,1-1.59-1.58l1.54,0a65.57,65.57,0,0,1,9.87.26C46.68,161.67,43.64,163.92,42.71,163.66Zm-5.2.53.38.26c-2,1.72-6,3.27-7.53,3.85l-.75.29a5.18,5.18,0,0,1-4.31-1.69C27.74,165.77,33.7,164.05,37.51,164.19Zm-2.1,38c-1,.76-1.87,1.44-2.55,2a39.64,39.64,0,0,1-8.34-4.56c0-.8,0-2.05,0-3.61,0-5.94-.08-19.59,0-25.87a7.74,7.74,0,0,0,4.25,1.54c.26,3.87,1.61,21.49,1.94,24.35a1.5,1.5,0,0,0,1.49,1.33h.18a1.49,1.49,0,0,0,1.31-1.66c-.34-3-1.82-22.42-1.95-24.65,3.31-1.29,6.5-2.73,8.45-4.55,1.16,6.52,4.13,23,5.31,27.42C43.75,195.7,38.41,199.83,35.41,202.16Zm18.4-23.93.28,1.9c.26,1.67-.92,4-2.88,5.71-1.46,1.26-3.05,1.87-4.1,1.59-1.13-5.64-2.67-14-3.88-20.8A10.49,10.49,0,0,0,48,164.29a26.21,26.21,0,0,0,3-2.6C51.9,165,53,172.54,53.81,178.23Zm-4.88-38.66c1.21,4.77.92,11.67.73,16.23q0,.72-.06,1.35c-2.72-.58-6.61-.57-11.07-.45-1.18,0-2.2.05-2.77,0h-.15a3.13,3.13,0,0,0-2.25.9,6.82,6.82,0,0,0-1.64,4.17,46,46,0,0,0-5.83,1.62c2.9-6.72,9.56-20.89,10.45-22.43,3-5.21,5.1-7.55,6.51-8.59a41.46,41.46,0,0,0,4.72,2.81A36.73,36.73,0,0,1,48.93,139.57ZM88.4,273.85c2.86,3,4.13,4.45,3.4,5.39-.21.26-1.74,1-5.9,1.24-5.58.28-11.07-.64-12.07-1.62-.62-.62,1.88-4.46,3.37-6.76a80.7,80.7,0,0,0,4.34-7.23C83.24,268.53,86,271.42,88.4,273.85ZM124.63,279c-2.22,1.29-14.71,2.7-18.16,0a28.31,28.31,0,0,1,2.19-3.48c2.12-3.07,4.84-7,5.92-11.23C120.1,270.88,124.4,277.14,124.63,279ZM87.19,98.46c1.3-.13,2.5-.28,3.62-.44-.72,2.45-3.27,5.06-5.58,7.41-.78.8-1.54,1.58-2.23,2.34-1.78-2.81-3-6.83-2.7-9.07A63.09,63.09,0,0,0,87.19,98.46ZM71.47,147a87.7,87.7,0,0,0,.47-14.9,1.5,1.5,0,0,0-.91-1.29,6.61,6.61,0,0,1-3.19-4.09,1.4,1.4,0,0,0-.1-.35,10.37,10.37,0,0,1-.28-1.54c-.23-2.32.7-3.55,2-5.24a15.67,15.67,0,0,0,3.19-6.07,1.5,1.5,0,1,0-2.91-.73,13,13,0,0,1-2.67,5c-1.44,1.9-2.94,3.86-2.58,7.37l0,.24c-2.65-.38-6.43-1.83-7.29-6,3.06-3.86,6.13-8.32,8.86-12.27,1.72-2.5,3.21-4.65,4.41-6.25,1.4-1.85,3.33-2.17,6.81-2.19-.32,3.8,1.81,9,4,11.88a19.94,19.94,0,0,1-3.29,6.2c-1.48,2.11-2.87,4.1-2.87,6.55,0,3.36,3.94,7.4,6.43,9.42.12,1.84.22,5.88.25,9.76l-3.21-.21a1.14,1.14,0,0,0-1,.42c-.92,1.13,0,6.07,0,6.12a1,1,0,0,0,.65.63,28.44,28.44,0,0,0,3.55.51c0,.3,0,.57,0,.8,0,0,0,0,0,.06a.13.13,0,0,0,0,.06c0,2.11-1,12.09-1.56,17.16A55,55,0,0,1,72.19,167c-3.94-.87-6.5-2.21-6.7-3.47C67.39,159.91,70.67,153.57,71.47,147Zm35.62,31.12c-1,7-2.12,14.9-.11,22-2.63,1.2-6.75,2-11.4,2.4h-.22c-9.28.77-20.59,0-26.33-2.47-1-6.09-3.28-21.14-2-31.51a26.06,26.06,0,0,0,4.51,1.39,67.74,67.74,0,0,0,13.86,1.29,83.52,83.52,0,0,0,9.56-.54c4.47-.52,9.67-1.53,13.08-3.48A60.08,60.08,0,0,1,107.09,178.08Zm-2.83-44.5a24.69,24.69,0,0,0-2,8.21A40.87,40.87,0,0,1,94,143.15a1,1,0,0,0-1,.95,26.18,26.18,0,0,0,.41,5.09,1.17,1.17,0,0,0,.86.92,3.84,3.84,0,0,0,

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the report using sharp(Buffer.from(svg, 'utf8')).png().toFile(...) and the supplied SVG with a positive viewBox x value. Compare the generated PNG with the reference image and trace the SVG rendering path used by sharp and its libvips dependency. Done means the handbag is no longer cropped when converting this SVG to PNG.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.