Skip to content

Generate PNGs from lila's SVGs using Inkscape 1.1.2 #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 12, 2024
Merged

Generate PNGs from lila's SVGs using Inkscape 1.1.2 #28

merged 1 commit into from
Jan 12, 2024

Conversation

@tiagoamaro
Copy link
Contributor

@tiagoamaro tiagoamaro commented Jan 11, 2024

Why?

Original images were generated through Python's cairosvg library, which doesn't handle well some SVG aspects, such as gaussian blurs, shadows and more detailed vector declarations.

This causes some piece sets to look really weird, such as the "cardinal" piece set.

Instead of using cairosvg, we're using Inkscape to convert SVGs to PNGs so we can keep their original aspects, such as gaussian blurs.

How?

Thanks to @bclehmann's Python script in that pull request! I converted that script to a bash script so I could use Inkscape 1.1.2 to convert SVGs to PNGs:

#!/bin/bash

SOURCE_DIR="./lila/public/piece"
DEST_DIR="./output"
SCALING_FACTORS=("1 ." "2 ./2.0x" "3 ./3.0x" "4 ./4.0x")

for dname in $(ls -d $SOURCE_DIR/*); do
    if [ -d "$dname" ]; then
        for factor_folder in "${SCALING_FACTORS[@]}"; do
            read -r -a factor_folder_array <<< "$factor_folder"
            factor=${factor_folder_array[0]}
            folder=${factor_folder_array[1]}
            for fname in $(ls $dname); do
                fpath="$dname/$fname"
                if [ -f "$fpath" ]; then
                    out_folder="$DEST_DIR/${dname##*/}/$folder"
                    echo $out_folder
                    mkdir -p $out_folder
                    fname_without_extension="${fname%.*}"
                    png="$out_folder/$fname_without_extension.png"
                    echo "Converting $fpath to $png"
                    size=$((128 * factor))
                    inkscape --export-type="png" --export-width="$size" --export-height="$size" --export-filename="$png" $fpath &
                fi
            done
        done
    fi
done

Caveats

This branch slightly increases asset sizes, as we have more detailed PNGs.

Using du, the difference from main was approximately 608KB: 24084 - 23476 = 608

  • main
$ du -h --max-depth=1 | sort -hr
23M	.
1.3M	./fantasy
1.2M	./celtic
1020K	./spatial
876K	./tatiana
876K	./maestro
868K	./leipzig
832K	./anarcandy
812K	./merida
800K	./fresca
796K	./dubrovny
796K	./companion
788K	./governor
784K	./staunty
756K	./gioco
732K	./chessnut
716K	./cardinal
712K	./libra
668K	./horsey
656K	./chess7
652K	./kosal
652K	./alpha
640K	./caliente
612K	./california
552K	./cburnett
544K	./riohacha
540K	./reillycraig
528K	./icpieces
504K	./kiwen-suwi
464K	./disguised
456K	./pirouetti
448K	./mpchess
400K	./letter
344K	./shapes
208K	./pixel
  • This branch
$ du -h --max-depth=1 | sort -hr                                                                                                    130 ↵
24M	.
1.3M	./fantasy
1.2M	./celtic
1.1M	./maestro
1012K	./spatial
960K	./cardinal
876K	./tatiana
872K	./leipzig
836K	./anarcandy
816K	./merida
804K	./fresca
796K	./companion
792K	./governor
788K	./dubrovny
784K	./staunty
756K	./gioco
732K	./libra
732K	./chessnut
668K	./horsey
656K	./chess7
656K	./alpha
652K	./kosal
644K	./caliente
616K	./california
548K	./riohacha
548K	./cburnett
540K	./reillycraig
528K	./icpieces
504K	./kiwen-suwi
500K	./shapes
464K	./disguised
456K	./pirouetti
448K	./mpchess
396K	./letter
208K	./pixel

Screenshots:

  • Diff between main and this branch "cardinal" piece set:

image

  • We can also see some small vector fixes, such as on "mpchess"

image

@tiagoamaro
Generate PNGs from lila's SVG using Inkscape 1.1.2
c273f64 
Instead of using `cairosvg`, we're using Inkscape to convert SVGs to
PNGs so we can keep their original aspects, such as gaussian blurs.
@veloce
Copy link
Collaborator

veloce commented Jan 11, 2024

Thank you for this!

I'm a little concerned with the "cardinal" piece set because of the added shadow (it applies to other piece sets that have a shadow). In the old app we had to remove it because piece movement was too slow.

Could you benchmark quickly the dragging performance (using flutter dev tools) between shadow and no-shadow pieces?

I'd like to ensure there is no problem before merging.

@tiagoamaro
Copy link
Contributor Author

tiagoamaro commented Jan 11, 2024

Just ran the app using flutter run --profile and kept dragging queens around the board. Hopefully this is the benchmark you were looking for (I don't have any hands on experience with Flutter):

  • Used the "Colin M.L. Burnett" as the no shadow piece set
  • Used the "Cardinal" as the piece set with shadows
Kazam_screencast_00002.webm

@veloce
Copy link
Collaborator

veloce commented Jan 12, 2024 •
edited
Loading

Yes perfect. I know it's not a real benchmark but it's enough to see that the timeline doesn't show a significant difference between the two pieces.

LGTM.

@veloce veloce merged commit 80b69eb into lichess-org:main Jan 12, 2024
@tiagoamaro tiagoamaro deleted the export-lila-svg-to-png-using-inkscape branch January 12, 2024 12:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@tiagoamaro @veloce