SVG file with viewbox not rendered correctly
Nobody has claimed this yet.
- 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:

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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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