sharp
sharp copied to clipboard
lovell
Default bounding box for SVG without viewBox can result in clipped content
my environment： nodejs v14.15.0 sharp 0.26.3 svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="900">
<use xlink:href="#0" x="0" y="0"/>
<symbol id="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M204 88L28 88 28 45 260 45 260 80Q243 98 226 122 209 146 192 176.5 175 207 162.5 237.5 150 268 140 300L140 300Q128 345 124 399L124 399 78 399Q79 378 83 352.5 87 327 95 297L95 297Q111 237 140 181L140 181Q155 153 171 130 187 107 204 88L204 88Z"/>
</symbol>
<use xlink:href="#1" x="100" y="0"/>
<symbol id="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M254 128L210 132Q204 106 193 94L193 94Q175 76 149 76L149 76Q128 76 112 87L112 87Q91 103 80 131L80 131Q74 146 70.5 166.5 67 187 67 214L67 214Q83 190 106 178.5 129 167 154 167L154 167Q198 167 229 199.5 260 232 260 283L260 283Q260 316 245.5 345 231 374 206 389.5 181 405 148 405L148 405Q93 405 58.5 365 24 325 24 231L24 231Q24 127 62 80L62 80Q95 39 152 39L152 39Q194 39 221 62.5 248 86 254 128L254 128ZM74 283L74 283Q74 305 84 326 94 347 111 358 128 369 147 369L147 369Q174 369 194.5 346.5 215 324 215 286.5 215 249 195 227 175 205 145.5 205 116 205 95 226.5 74 248 74 283Z"/>
</symbol>
<use xlink:href="#2" x="200" y="0"/>
<symbol id="2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M26 305L72 301Q77 336 95 352.5 113 369 140 369L140 369Q172 369 194 344.5 216 320 216 281.5 216 243 194.5 221.5 173 200 140 200L140 200Q118 200 101.5 209.5 85 219 75 235L75 235 33 230 68 46 246
46 246 88 103 88 84 184Q100 173 117 167 134 161 151 161L151 161Q198 161 230.5 193.5 263 226 263 277L263 277Q263 325 234 361L234 361Q200 405 140 405L140 405Q91 405 60.5 377.5 30 350 26 305L26 305Z"/>
</symbol>
<use xlink:href="#3" x="300" y="0"/>
<symbol id="3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M26 304L70 298Q77 336 95 352.5 113 369 140 369L140 369Q171 369 192 347.5 213 326 213 295 213 264 193 244 173 224 143 224L143 224Q130 224 112 229L112 229 117 191 124 191Q153 191 175 176.5 197 162 197 131L197 131Q197 107 181.5 91.5 166 76 139.5 76 113 76 96 91.5 79 107 74 140L74 140 30 132Q38 87 67 63 96 39 138 39L138 39Q167 39 191.5 51.5 216 64 229.5 86 243 108 243 132 243 156 230.5 175 218 194 193 205L193 205Q225 212 242.5 235 260 258 260 293L260 293Q260 340 226 372.5 192 405 140 405L140 405Q92 405 61 377 30 349 26 304L26 304Z"/>
</symbol>
<use xlink:href="#4" x="400" y="0"/>
<symbol id="4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M81 357L256 357 256 399 20 399Q20 383 25 368L25 368Q30 356 37 344 44 332 54 320.5 64 309 78 295.5 92 282 111 266L111 266Q140 242 160 223.5 180 205 190 191L190 191Q211 163 211 137.5 211 112 192
94 173 76 142.5 76 112 76 93 94.5 74 113 73 148L73 148 28 143Q33 92 63 65.5 93 39 144.5 39 196 39 226 67.5 256 96 256 139L256 139Q256 161 247.5 180.5 239 200 218 225L218 225Q208 236 191 252 174 268 150 288L150 288Q130 304 118 316L118 316 99 333 89 345Q85 350 81 357L81 357Z"/>
</symbol>
<use xlink:href="#5" x="500" y="0"/>
<symbol id="5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M210 399L166 399 166 313 11 313 11 273 174 41 210 41 210 273 259 273 259 313 210 313 210 399ZM54 273L166 273 166 111 54 273Z"/>
</symbol>
<use xlink:href="#6" x="600" y="0"/>
<symbol id="6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M32 316L74 312Q80 342 95 355.5 110 369 134 369L134 369Q155 369 169.5 359.5 184 350 194 334.5 204 319 211 293L211 293Q214 280 215.5 266.5 217 253 217 239L217 239 217 230Q204 251 181.5 264 159 277 131 277L131 277Q87 277 56.5 245 26 213 26 159.5 26 106 57.5 72.5 89 39 138 39L138 39Q172 39 201.5 58 231 77 246 112 261 147 261 212L261 212Q261 281 246 321.5 231 362 201.5 383.5 172 405 133 405L133 405Q90 405 63.5 381.5 37 358 32 316L32 316ZM212 158L212 158Q212 120 191.5 98 171 76 142.5 76 114 76 92.5 99.5 71 123 71 162L71 162Q71 197 91.5 218 112 239 142.5 239 173 239 192.5 217 212 195 212 158Z"/>
</symbol>
<use xlink:href="#7" x="700" y="0"/>
<symbol id="7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 278 500">
<path d="M93 205L93 205Q39 185 39 132L39 132Q39 92 67 65.5 95 39 142 39 189 39 217.5 67 246 95 246 133L246 133Q246 185 193 205L193 205Q226 216 243.5 239.5 261 263 261 296L261 296Q261 343 228.5 374 196 405 143 405 90 405 57.5 374.5 25 344 25 295L25 295Q25 260 42.5 236.5 60 213 93 205ZM84 130L84 130Q84 156 100.5 172 117 188 142 188 167 188 184 172 201 156 201 132.5 201 109 184.5 92.5 168 76 142.5 76 117 76
100.5 92 84 108 84 130ZM70 295L70 295Q70 315 78.5 332 87 349 105 359 123 369 143 369L143 369Q159 369 172 363.5 185 358 195 348L195 348Q216 329 216 297 216 265 195 244.5 174 224 142.5 224 111 224 90.5 244 70 264 70 295Z"/>
</symbol>
</svg>
convert code
let png = await sharp(Buffer.from(svgstr)).flatten({ background: { r: 255, g: 255, b: 255, alpha: 255 } }).png().toBuffer();
fs.writeFileSync(`${fileDir}/test.png`, png);
convert result
What is the expected behaviour?
What is the output of running npx envinfo --binaries --system?
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1231 v3 @ 3.40GHz
Memory: 4.00 GB / 7.94 GB
Binaries:
Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Hi, this can be reproduced using rsvg-convert at the command line:
$ rsvg-convert in.svg > out.png
Using the same tool for SVG "clean up", we can see it is assuming the missing viewBox attribute has a value of "0 0 900 100".
$ rsvg-convert in.svg -f svg > out.svg
$ head -2 out.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900px" height="100px" viewBox="0 0 900 100" version="1.1">
The lack of centring is probably related to https://gitlab.gnome.org/GNOME/librsvg/-/issues/465
@lovell Thank you for your reply!i added viewBox,but still incorrect.
svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1100px" height="100px" viewBox="0 0 1100 100">
<use xlink:href="#0" x="0" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="0">
<path d="M65 681L65 681Q65 486 102 375L102 375Q141 258 219 195 297 132 414 132L414 132Q585 132 674 268L674 268Q716 331 740 427L740 427Q764 517 764 681L764 681Q764 775 755 851.5 746 928 725 987L725 987Q684 1104 608.5 1166 533 1228 414 1228L414 1228Q260 1228 170 1117L170 1117Q65 985 65 681ZM200 681L200 681Q200 946 260.5 1033 321 1120 414 1120L414 1120Q504 1120 566.5 1032.5 629 945 629 681 629 417 566 328L566 328Q506 241 413.5 241 321 241 267 318L267 318Q200 417 200 681Z"/>
</symbol>
<use xlink:href="#1" x="100" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="1">
<path d="M561 132L561 1210 429 1210 429 370Q381 415 303 460 225 505 165 529L165 529 165 402Q275 351 359 276L359 276Q399 238 429 202 459 166 476 132L476 132 561 132Z"/>
</symbol>
<use xlink:href="#2" x="200" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="2">
<path d="M599 277L72 277 72 150 768 150 768 253Q716 307 665.5 380 615 453 564 543.5 513 634 475 726.5 437 819 408 915L408 915Q371 1050 359 1210L359 1210 222 1210Q224 1147 236.5 1070.5 249 994 273 904L273 904Q320 724 408 558L408 558Q453 472 501 403 549 334 599 277L599 277Z"/>
</symbol>
<use xlink:href="#3" x="300" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="3">
<path d="M749 399L617 409Q599 331 567 297L567 297Q513 241 435 241L435 241Q372 241 324 276L324 276Q261 322 227 408L227 408Q209 451 199 513.5 189 576 189 657L189 657Q237 583 305.5 548.5 374 514 450 514L450 514Q581 514 674 611.5 767 709 767 862L767 862Q767 963 723.5 1050 680 1137 605 1182.5 530 1228 431 1228L431 1228Q266 1228 162.5 1109 59 990 59 708L59 708Q59 396 173 255L173 255Q273 132 443 132L443 132Q570
132 651 204L651 204Q731 273 749 399L749 399ZM210 862L210 862Q210 928 239.5 992 269 1056 320.5 1088 372 1120 429 1120L429 1120Q510 1120 571 1052.5 632 985 632 870L632 870Q632 760 572.5 695 513 630 423 630L423 630Q336 630 272 694L272 694Q210 759 210 862Z"/>
</symbol>
<use xlink:href="#4" x="400" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="4">
<path d="M65 928L203 918Q218 1021 272.5 1070.5 327 1120 408 1120L408 1120Q504 1120 570 1048L570 1048Q636 973 636 858.5 636 744 571.5 679.5 507 615 407 615L407 615Q342 615 292 643.5 242 672 212 718L212 718 87 703 191 151 725 151 725 277 297 277 239 565Q287 532 338 515 389 498 441 498L441 498Q582 498 679 594.5 776 691 776 846L776 846Q776 990 690 1098L690 1098Q587 1228 408 1228L408 1228Q261 1228 170 1147L170 1147Q77 1063 65 928L65 928Z"/>
</symbol>
<use xlink:href="#5" x="500" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="5">
<path d="M65 927L197 909Q219 1021 272.5 1070.5 326 1120 407 1120L407 1120Q500 1120 563.5 1055.5 627 991 627 897L627 897Q627 805 569 747L569 747Q507 687 417 687L417 687Q378 687 324 702L324 702 339 586Q347 586 352 587L352 587 360 588Q446 588 512.5 543.5 579 499 579 408L579 408Q579 336 532 288.5 485 241 404 241L404 241Q327 241 276 287.5 225 334 210 433L210 433 78 411Q102 276 188 205L188 205Q275 132 401 132L401 132Q488 132 563 171L563 171Q636 207 676 273 716 339 716 411 716 483 678.5 539 641 595 567 628L567 628Q662 651 715 720 768 789 768 894L768 894Q768 1033 665.5 1131.5 563 1230 407 1230L407 1230Q264 1230 171 1146 78 1062 65 927L65 927Z"/>
</symbol>
<use xlink:href="#6" x="600" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="6">
<path d="M618 1210L486 1210 486 954 21 954 21 832 510 136 618 136 618 832 764 832 764 954 618 954 618 1210ZM150 832L486 832 486 348 150 832Z"/>
</symbol>
<use xlink:href="#7" x="700" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="7">
<path d="M230 1084L756 1084 756 1210 47 1210Q47 1164 63 1119L63 1119Q78 1081 98.5 1046 119 1011 149 975.5 179 940 221.5 900.5 264 861 321 813L321 813Q408 741 467.5 685.5 527 630 558 586L558 586Q620 502
620 426.5 620 351 563.5 296 507 241 417 241L417 241Q323 241 266 298L266 298Q209 352 207 457L207 457 72 442Q86 289 176 210.5 266 132 420.5 132 575 132 665 217.5 755 303 755 430L755 430Q755 498 730 555.5 705
613 641 688L641 688Q611 723 560.5 770 510 817 438 877L438 877Q378 927 340.5 960.5 303 994 286 1012 269 1030 255.5 1047.5 242 1065 230 1084L230 1084Z"/>
</symbol>
<use xlink:href="#8" x="800" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="8">
<path d="M84 961L210 951Q227 1041 272 1080.5 317 1120 389 1120L389 1120Q452 1120 496 1092.5 540 1065 569.5 1018.5 599 972 620 892L620 892Q629 853 634 812.5 639 772 639 732L639 732 639 721Q639 714 638 705L638 705Q600 768 530 807L530 807Q464 846 381 846L381 846Q248 846 156.5 750 65 654 65 495L65 495Q65 331 160 231.5 255 132 402 132L402 132Q504 132 592 188 680 244 725 350 770 456 770 651L770 651Q770 858 725.5 979.5 681 1101 592.5 1164.5 504 1228 386 1228L386 1228Q258 1228 180 1159L180 1159Q99 1089 84 961L84 961ZM624 489L624 489Q624 375 562.5 308 501 241 417 241L417 241Q329 241 264 313L264 313Q200 382 200 499L200 499Q200 604 261 666L261 666Q324 730 415 730 506 730 565 665 624 600 624 489Z"/>
</symbol>
<use xlink:href="#9" x="900" y="0"/>
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 834 1500" id="9">
<path d="M267 628L267 628Q105 568 105 409L105 409Q105 289 189 210.5 273 132 414 132 555 132 640.5 215 726 298 726 412L726 412Q726 568 567 628L567 628Q666 661 718 732.5 770 804 770 903L770 903Q770 1042 672.5 1135 575 1228 416 1228 257 1228 159 1135L159 1135Q63 1045 63 900L63 900Q63 795 115.5 724.5 168 654 267 628ZM240 405L240 405Q240 483 289.5 530 339 577 417 577L417 577Q489 577 542 529L542 529Q591 483 591 412.5 591 342 541 291.5 491 241 416 241L416 241Q338 241 289 289 240 337 240 405ZM198 900L198 900Q198 958 223.5 1010 249 1062 305 1092L305 1092Q356 1120 417 1120L417 1120Q465 1120 503.5 1104.5 542 1089 573
1059L573 1059Q635 1000 635 904 635 808 572 746.5 509 685 413 685L413 685Q320 685 259 746 198 807 198 900Z"/>
</symbol>
</svg>
result
