Gradient Part 6 - Pattern fills

[Dherse]

Tracking issue: #2282

Implements basic pattern fills with an purposefully small API based on the PDF as the common denominator (as it has the most basic support). It is implemented for SVG, PNG with 100% compatibility and in PDF where some readers are slightly buggy but I will be opening bug reports shortly (most notably with mupdf).

The api is as follow

• New pattern function and type
• The constructor takes:
  • a Content as body
  • an array of two absolute sizes as the bounding box, the size of the content (required) creates an error if it has em set
  • an optional spacing (same rules as the bbox)
  • an optional relative that works the same as gradients

Some limitations:

• In SVG we need to render the body twice, this is unfortunate but required because we cannot write subtrees of the XML with xmlwriter, I suggested on Discord opening a PR that replaces xmlwriter with our version that supports this, since it would allow us writing the defs at the top (for compatibility with some SVG readers) and would allow to render patterns only once
• The SVG change means that file sizes are now slightly higher but I think this can be fixed in a second PR.
• In PDF there can be some (albeit small) artefacts, it's unclear whether this is a bug (although I think it is since some PDF viewers work perfectly: Acrobat, PDF.js, XPDF, poppler), only mupdf and pdfium seem to be impacted (will open issues in their respective repos)
• I had to change the way text paths are encoded in SVG, this solves the issue of text having gigantic scaling values, this helps readers with patterns on text (unclear why), at the same time it makes SVG text source a bit more readable and reusable.

Here is an example:

#rotate(45deg, scale(x: 50%, y: 70%, rect(
  width: 100%,
  height: 100%,
  stroke: 1pt,
)[
  #set text(
    fill: pattern(
      (30pt, 30pt),
      relative: "parent",
      square(size: 30pt, fill: gradient.conic(..color.map.rainbow))
    )
  )

  #lorem(10)
]))

Which looks like this:

I would generally consider the implementation a success, perhaps there is a way we could implement a work around for PDFs and I'd be intereted to hear your opinion/ideas. Here is a test PDF file that shows these small issues for those that want to try it:

test.pdf

[Dherse]

As a draft because there is an SVG bug I am still tracking down.

[Dherse]

Ok, the SVG bug is solved and I have updated the original comment to reflect that. I just need to add some automated tests now!

[Dherse]

Ok, it all looks good on my end, just needs some review :D

[Dherse]

Thanks to @EpicEricEE for pointing out a bug that could occur in PNG rendering that was due to using .ceil() instead of .round(), it was fixed in 6249bb4

[Dherse]

@laurmaedje I am thinking of adding a fill parameter for setting the background of the pattern, what do you think?

[laurmaedje]

Thank you! 🎉