import { Document, Page, Svg } from '@formepdf/react';
export default function Invoice() {
return (
<Document title="Invoice INV-2026-001" author="Acme Design Co">
<Page size="Letter" margin={48}>
<Svg viewBox="0 0 661 176" width={500} height={176} content='<path d="M 141.344,42.742 C 135.108,48.933 135.232,49.049 129.121,55.355" stroke-width="3.091" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 129.121,55.355 C 121.798,63.053 121.885,63.118 114.898,71.113" stroke-width="2.653" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 114.898,71.113 C 108.029,77.982 108.739,78.309 103.004,85.867" stroke-width="2.598" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 103.004,85.867 C 99.993,90.326 100.637,89.581 100.113,94.313" stroke-width="3.233" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 100.113,94.313 C 100.879,98.079 100.188,96.804 103.395,98.824" stroke-width="3.909" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 103.395,98.824 C 112.853,101.538 111.941,101.356 122.238,100.867" stroke-width="2.869" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 122.238,100.867 C 143.491,98.742 143.316,99.362 164.320,94.473" stroke-width="1.850" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 164.320,94.473 C 193.434,88.364 193.384,88.516 222.023,80.414" stroke-width="1.386" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 222.023,80.414 C 242.268,74.024 242.456,74.733 262.363,67.211" stroke-width="1.490" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 262.363,67.211 C 272.165,64.267 268.280,65.205 274.047,62.777" stroke-width="2.364" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 274.047,62.777 C 270.973,62.392 274.964,62.052 267.961,62.781" stroke-width="3.663" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 267.961,62.781 C 254.983,64.038 255.123,64.439 242.348,66.871" stroke-width="2.451" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 242.348,66.871 C 226.207,70.225 226.434,70.439 210.863,75.582" stroke-width="2.058" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 210.863,75.582 C 204.177,78.385 204.183,77.914 198.301,82.250" stroke-width="2.626" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 198.301,82.250 C 193.838,84.642 195.921,83.815 194.352,86.441" stroke-width="3.560" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.352,86.441 C 197.109,90.151 195.025,88.802 200.676,90.570" stroke-width="4.216" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 200.676,90.570 C 208.808,90.799 208.197,91.455 216.527,89.051" stroke-width="3.203" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 216.527,89.051 C 227.095,86.577 226.914,86.699 236.887,82.371" stroke-width="2.667" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 236.887,82.371 C 245.187,74.735 244.200,79.230 250.738,74.355" stroke-width="2.767" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 250.738,74.355 C 251.398,78.040 253.265,74.183 253.043,81.266" stroke-width="4.059" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 253.043,81.266 C 255.079,88.864 256.195,87.448 260.332,93.172" stroke-width="3.258" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 260.332,93.172 C 271.872,102.599 271.155,102.046 285.195,107.629" stroke-width="2.342" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 285.195,107.629 C 304.583,115.230 304.001,114.729 324.590,117.434" stroke-width="1.819" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 324.590,117.434 C 347.167,121.222 346.005,119.792 368.039,116.754" stroke-width="1.594" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 368.039,116.754 C 390.910,109.772 390.542,111.937 411.340,98.863" stroke-width="1.525" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 411.340,98.863 C 422.421,93.320 420.147,94.161 426.512,85.531" stroke-width="2.132" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 426.512,85.531 C 427.828,77.720 428.753,81.263 424.004,74.750" stroke-width="2.889" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 424.004,74.750 C 415.090,70.261 417.371,69.599 405.598,69.289" stroke-width="2.711" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 405.598,69.289 C 377.737,66.499 378.086,66.472 349.996,67.172" stroke-width="1.497" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 349.996,67.172 C 328.713,67.819 329.089,67.679 308.301,71.648" stroke-width="1.536" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 308.301,71.648 C 293.889,73.730 301.612,72.903 295.793,77.340" stroke-width="2.379" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 295.793,77.340 C 306.438,89.855 299.975,85.271 320.473,94.730" stroke-width="2.770" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 320.473,94.730 C 356.176,104.972 354.838,106.668 392.594,110.965" stroke-width="1.238" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 392.594,110.965 C 434.393,117.550 434.137,117.801 476.395,120.387" stroke-width="1.125" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 476.395,120.387 C 502.807,121.542 502.491,122.149 528.789,120.164" stroke-width="1.245" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 528.789,120.164 C 538.832,118.230 533.377,119.921 537.535,117.145" stroke-width="2.286" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 537.535,117.145 C 529.701,114.895 535.275,115.253 521.676,114.211" stroke-width="2.676" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 521.676,114.211 C 491.041,111.516 491.109,111.604 460.352,110.563" stroke-width="1.400" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 460.352,110.563 C 429.322,109.865 429.377,109.600 398.348,110.379" stroke-width="1.262" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 398.348,110.379 C 382.522,111.194 390.365,110.511 382.438,111.855" stroke-width="2.087" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 382.438,111.855 C 390.335,113.447 382.354,112.502 398.012,112.996" stroke-width="3.257" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 398.012,112.996 C 403.169,112.746 402.431,112.736 406.629,110.434" stroke-width="3.541" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 406.629,110.434 C 409.506,107.974 408.767,109.004 409.207,105.512" stroke-width="3.962" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 409.207,105.512 C 408.078,100.788 408.725,101.548 405.066,97.582" stroke-width="3.764" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 405.066,97.582 C 397.602,91.010 398.377,90.460 389.805,84.855" stroke-width="2.788" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 389.805,84.855 C 379.114,77.578 379.729,76.902 369.320,69.367" stroke-width="2.381" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 369.320,69.367 C 362.362,64.284 366.661,67.138 364.898,63.977" stroke-width="3.317" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 364.898,63.977 C 382.490,63.775 377.641,62.434 399.879,65.668" stroke-width="2.882" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 399.879,65.668 C 428.451,69.707 428.533,68.787 456.984,74.000" stroke-width="1.476" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 456.984,74.000 C 494.140,78.193 493.861,79.549 530.699,85.352" stroke-width="1.186" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 530.699,85.352 C 560.208,91.276 560.052,91.099 588.809,99.813" stroke-width="1.186" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 588.809,99.813 C 609.807,105.338 598.626,102.743 607.535,108.285" stroke-width="1.894" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 607.535,108.285 C 592.610,114.659 604.143,112.686 577.480,114.508" stroke-width="2.509" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 577.480,114.508 C 552.471,112.633 552.944,114.263 528.203,107.492" stroke-width="1.644" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 528.203,107.492 C 510.697,103.786 511.215,103.893 494.969,97.027" stroke-width="1.779" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 494.969,97.027 C 489.124,94.192 490.271,95.009 487.352,89.938" stroke-width="2.674" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 487.352,89.938 C 486.586,85.170 485.938,86.545 488.598,81.734" stroke-width="3.363" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 488.598,81.734 C 492.946,75.809 492.102,75.748 498.383,71.094" stroke-width="3.067" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 498.383,71.094 C 506.916,64.927 506.300,64.227 515.305,58.570" stroke-width="2.657" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 515.305,58.570 C 520.858,54.203 520.935,54.304 526.422,49.848" stroke-width="2.934" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 526.422,49.848 C 530.898,45.131 528.526,48.201 530.641,46.566" stroke-width="3.728" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 530.641,46.566 C 526.930,53.760 529.868,50.879 524.363,61.344" stroke-width="4.084" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 524.363,61.344 C 521.581,69.352 521.678,69.278 520.137,77.602" stroke-width="3.116" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 520.137,77.602 C 517.817,87.178 518.493,86.991 518.188,96.621" stroke-width="2.773" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 518.188,96.621 C 518.949,105.165 518.512,104.881 521.527,113.008" stroke-width="2.816" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 521.527,113.008 C 523.372,117.278 522.915,117.230 526.121,120.750" stroke-width="3.322" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 526.121,120.750 C 527.888,123.567 527.661,122.696 530.105,123.844" stroke-width="3.974" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 530.105,123.844 C 533.001,122.786 532.809,124.181 535.965,121.977" stroke-width="4.646" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 535.965,121.977 C 539.111,120.128 538.978,121.153 542.059,120.578" stroke-width="4.880" stroke="black" fill="none" stroke-linecap="round"></path>'/>
</Page>
</Document>
);
}
What happened?
Rendering svg paths with
stroke-linecap="round"does not make the line caps round.What did you expect?
Round line caps.
Reproduction
Minimal TSX template that reproduces the issue:
Output
Environment