Problem
When I put a standard SVG into wkhtmltopdf, it renders beautifully, just like in a browser.
However when I add a color gradient to the SVG (like with <linearGradient/>), then it creates a terribly choppy and pixelated line along the edge of the shape, making it unusable.
I have tried changing options like DPI, zoom, etc... but those are irrelevant to the issue.
Output Comparison
Standard SVG:
Problematic Color Gradient SVG:
SVG Comparison
Standard SVG:
<svg width="999" height="784" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0.000610352H999V782.575C999 782.575 698.108 820.603 570.006 503.87C441.904 187.138 0 193.643 0 193.643V0.000610352Z" fill="#71C696" />
</svg>
Problematic Color Gradient SVG:
<svg width="999" height="784" viewBox="0 0 999 784" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0.000610352H999V782.575C999 782.575 698.108 820.603 570.006 503.87C441.904 187.138 0 193.643 0 193.643V0.000610352Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="748.257" y1="647.475" x2="958.499" y2="173.824" gradientUnits="userSpaceOnUse">
<stop stop-color="#71C696"/>
<stop offset="1" stop-color="#83D6A8"/>
</linearGradient>
</defs>
</svg>
Important: The problem does not have anything to do with attributes on the SVG element such as width, height, viewbox, or any CSS.
Additionally, the SVG is being injected directly into the HTML. I tried putting it inside an <img/> (both as a src link and as a base 64 encoded src), to no avail.
