feat: Add fill attribute to image widget for custom/dynamic svg color

[hypernova7]

Description

Added fill attribute to image widget for custom/dynamic svg color.

Note

This option is only for svg images

Usage

(image
  :fill "green"
  :path "./my-svg-icon.svg"
)

(image
  :fill "#0389ff"
  :path "./my-svg-icon.svg"
)

Showcase

Additional Notes

Anything else you want to add, such as remaining questions or explanations.

Checklist

Please make sure you can check all the boxes that apply to this PR.

• All widgets I've added are correctly documented.
• I added my changes to CHANGELOG.md, if appropriate.
• The documentation in the docs/content/main directory has been adjusted to reflect my changes.
• I used cargo fmt to automatically format all code before committing

[w-lfchen]

breaks image functionality for this svg (the first one i tried) without even using the new attribute
the image disappears when using the new function, same behavior as a wrong path being supplied

[w-lfchen]

i think the fill logic should only be invoked if the attribute is set, otherwise defaulting to the already existing code seems like a better option for performance reasons
in order to achieve that, it might help to mark the attribute as optional instead of relying on a default value
also, don't forget to document everything ^^

[hypernova7]

By the way, I forgot to mention that I previously made the mistake of defining image_height and instead I set image_width twice, which made me believe that set_size ignored the height value but that is not the case, and set_size is only work if both fields are greater than 0, so I added code to preserve the aspect ratio in case one of the two attributes is used.

Sorry for the delay of this message, I've been busy

[hypernova7]

That's the result with last code update

Example

(box
  :orientation "v"
  (image :fill "red" :image-height 36 :path "./src/rect.svg")
  (image :image-height 36 :path "./src/rect.svg")
)

Example 2

(box
  :orientation "v"
  (image :fill "red" :path "./src/rect.svg")
  (image :path "./src/rect.svg")
)

rect.svg

<svg fill="blue" width="130" height="300" viewBox="0 0 130 300" xmlns="http://www.w3.org/2000/svg">
  <rect width="130" height="300" x="0" y="0" rx="20" ry="20" />
</svg>

[w-lfchen]

the following code produces two differently sized icons, which shouldn't happen.

      (box
        :space-evenly false
        (image
          :fill "#cba6f7"
          :image-height 20
          :image-width 200
          :path "../github-icon.svg"
        )
        (image
          ;:fill "#0000ff"
          :image-height 20
          :image-width 200
          :path "../github-icon.svg"
        ))

also, i've looked into the gtk docs for this now, using the pixbufloader is not necessary here since it's purpose is incremental loading, but we have the full data available when constructing it.
i'll provide a code suggestion for what i'd consider a simpler solution

[w-lfchen]

this code results in the same scaling behavior when using and not using the fill attribute.
it also allows for easier maintenance, should, for example, a preserve-aspect-ratio property be added (which i might look into, since it seems to be rather easy judging from the gtk docs)
the second if's purpose is to decide how the pixbuf will be populated, which can be extended if needed, i've pulled it inside the first one since the first one decides whether to handle an animation or a static image.
since all data is known, we can, after altering the svg, directly load it from a memory stream, no need for the complicated incremental loader here.

also, if you think this suggestion is good, you can commit it directly from the github web interface

[w-lfchen]

superseded by #1148 now

[w-lfchen]

can be closed now that #1148 has been merged