Skip to content

qt: live patch SVG for partial coloration

Pierre Lamot requested to merge chub/vlc:qt/color_svg into master

This patchset aims to provide a way to colorize or partially colorize SVG artwork, it relies on the fact that SVG is a plain text description format and it's easy to alter it doing simple string substitutions.

It doesn't intend to replace every colorized assets as the fontIcon works well for monochrone buttons.

But this removes the need of many hacks we needed such as:

  • using different code path for images where the source can either be a bitmap or a colorized icon.
  • using color overlay like in NetworkCustomCover
  • layering glyph like in A-to-B
  • drawing manually with Shape module like for "add service"

The picture is provided though an image provider, path and arguments are serialized in an url which is handled by the image provider. Changing any parameter will result in a different url which will regenerate an image. The generated path is usable with Image ScaledImage and RoundImage, so it will benefits from the same cache policy as the other assets used by theses classes, so using several time the same asset with the same settings in a view will not regenerate an image each time.

sample Usage

Image {
    width: 256
    width: 256
    source: SVGColorImage.colorize("qrc:///my/artwork.svg") //path to the media
                .color1(VLCStyle.colors.text) //change the placeholder color 1 (#FF00FF) with VLCStyle.colors.text
                .accent(VLCStyle.colors.accent) //change the accent color #FF8800 with VLCStyle.colors.accent
                .background("blue") //fill the background in blue
                .uri() //serialized media URI
}

limitations are:

  • SVG don't support RBGA colors, color opacity is usually defined in a separate attribute (fill-opacity for instance), supporting transparent color would require smarter SVG transformations (probably an XML parser)
  • this may not be suited to create animations (especially beware of the Image Cache)

the following states visualization is performed using a single SVG

Peek_2022-09-12_15-34

Merge request reports