I’m using SVGs and adding colors via the new api colorFilter and i think it’s impacting performance (calling save canvas layer), I’m wondering what is the recommended approach? importing my SVG’s colored from the start or is there a way to color them without impacting performance?
also if anyone knows good material to study optimization in general i would appreciate it.
thanks.
if there aren’t many variations, you should color them in advance
SVG in general are slow. I’ve tested in production™ both flutter_svg and the vector graphics compiler. The first is extremely slow and the second produces very bad output (lack of precision).
What I’ve done is a shell script that gets all my images and convert them to webp, applying the Resolution aware images. That script take the SVGs and create a webp (based on the width/height attributes). When I need something like a logo then a text in SVG that must respect the user theme (light/dark), I compose the images separately (example: a logo with a text underneath with some fancy font (in SVG) that must be black or white, depending on the theme, the logo goes as it is, the text part is colored with Image’s color. Work fine as long as the images can be drawn one on top of each other.
#!/bin/bash
mkdir -p assets/img/4.0x
mkdir -p assets/img/3.0x
mkdir -p assets/img/2.0x
magick mogrify -format webp -path assets/img/4.0x img/*.png
magick mogrify -resize 75% -format webp -path assets/img/3.0x img/*.png
magick mogrify -resize 50% -format webp -path assets/img/2.0x img/*.png
magick mogrify -resize 25% -format webp -path assets/img img/*.png
magick mogrify -format webp -path assets/img/4.0x img/*.jpg
magick mogrify -resize 75% -format webp -path assets/img/3.0x img/*.jpg
magick mogrify -resize 50% -format webp -path assets/img/2.0x img/*.jpg
magick mogrify -resize 25% -format webp -path assets/img img/*.jpg
magick mogrify -background none -format webp -path assets/img/4.0x img/*.svg
magick mogrify -background none -resize 75% -format webp -path assets/img/3.0x img/*.svg
magick mogrify -background none -resize 50% -format webp -path assets/img/2.0x img/*.svg
magick mogrify -background none -resize 25% -format webp -path assets/img img/*.svg
Gets all that is in the img folder, converts and puts them in the assets/img folder.
All original images (and SVG width/height) must be 4x what you intend to use (so, if you are showing a 24x24 SVG, width/height must be 96x96). Notice that for this trick to work, you MUST use viewBox in your SVGs. width/height are just for output resolution.
2 Likes
looks like that’s the only way for now. thank you.
thank you very much. that was very helpful. i will definitely use this in future projects.