Closed algent-al closed 3 years ago
Ok, I still think, that would be easier and see for yourself how it works... Well on the last step and running last script, I get this:
<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="100%" height="100%" version="1.1" viewBox="0 0 16 16" xml:space="preserve">
<path style="fill:currentColor;" class="ColorScheme-Text" d="M8,2.137c3.236,0 5.863,2.627 5.863,5.863c0,3.236 -2.627,5.863 -5.863,5.863c-3.236,0 -5.863,-2.627 -5.863,-5.863c0,-3.236 2.627,-5.863 5.863,-5.863Zm3.893,2.683l-7.073,7.073c0.867,0.709 1.974,1.135 3.18,1.135c2.775,0 5.028,-2.253 5.028,-5.028c0,-1.206 -0.426,-2.313 -1.135,-3.18Zm-0.713,-0.713c-0.867,-0.709 -1.974,-1.135 -3.18,-1.135c-2.775,0 -5.028,2.253 -5.028,5.028c0,1.206 0.426,2.313 1.135,3.18l7.073,-7.073Z"/>
</svg>
so above first <path style=..... I need to replace with this:
<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="100%" height="100%" version="1.1" viewBox="0 0 16 16" xml:space="preserve">
<defs>
<style id="current-color-scheme" type="text/css">
.ColorScheme-Text { color:#dfdfdf; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
</style>
</defs>
Would be cool if you tried those scripts, then you would know exactly what is going on. And maybe you could do better and make one script.
I have an idea on how to do it with atom. It's more easy to me to experiment with it since I use it everyday.
If I'll succeed, I'll make a pull request.
@Digitalone1 That would be nice, thanks!
@algent-al I rolled back to old panel icons. And slowly going to resize and replace. Can you check if it looks normal now on Budgie?
Yes it looks fine for me.
Can't be done with atom, since it's not handling multiline search through directories.
But I still can't understand which substitution should be done.
This is panel 16:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<defs>
<style id="current-color-scheme" type="text/css">
.ColorScheme-Text { color:#dfdfdf; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NegativeText { color:#f44336; }
</style>
</defs>
<path style="fill:currentColor" class="ColorScheme-Text" d="m8 2.039c-3.27 0-5.961 2.691-5.961 5.961s2.691 5.961 5.961 5.961 5.961-2.691 5.961-5.961-2.691-5.961-5.961-5.961zm0 1.168c2.629 0 4.793 2.164 4.793 4.793s-2.164 4.793-4.793 4.793-4.793-2.164-4.793-4.793 2.164-4.793 4.793-4.793z"/>
<path style="fill:currentColor" class="ColorScheme-Text" d="m6.428.613h3.144c.436 0 .788.365.788.82v7.063l-.009.012s-1.171.817-1.171 1.368c0 .55 1.171 1.361 1.171 1.361l.009.015v3.315c0 .455-.352.82-.788.82h-3.144c-.436 0-.788-.365-.788-.82v-7.187s1.18-.783 1.18-1.31c0-.528-1.18-1.31-1.18-1.31v-3.327c0-.455.352-.82.788-.82z"/>
</svg>
And this is panel 22 after I applied both ffsvg
and replace
scripts.
<svg width="22px" height="22px" version="1.1" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<g id="surface1">
<path d="m11 2.804688c-4.496094 0-8.195312 3.699218-8.195312 8.195312s3.699218 8.195312 8.195312 8.195312 8.195312-3.699218 8.195312-8.195312-3.699218-8.195312-8.195312-8.195312zm0 1.605468c3.613281 0 6.589844 2.976563 6.589844 6.589844s-2.976563 6.589844-6.589844 6.589844-6.589844-2.976563-6.589844-6.589844 2.976563-6.589844 6.589844-6.589844z" style="fill:rgb(87.450981%,87.450981%,87.450981%)"/>
<path d="m8.839844 0.84375h4.320312c0.601563 0 1.085938 0.5 1.085938 1.125v9.714844l-0.011719 0.015625s-1.613281 1.121093-1.613281 1.878906 1.613281 1.871094 1.613281 1.871094l0.011719 0.023437v4.558594c0 0.625-0.484375 1.125-1.085938 1.125h-4.320312c-0.601563 0-1.085938-0.5-1.085938-1.125v-9.882812s1.625-1.078126 1.625-1.800782c0-0.726562-1.625-1.800781-1.625-1.800781v-4.578125c0-0.625 0.484375-1.125 1.085938-1.125z" style="fill:rgb(87.450981%,87.450981%,87.450981%)"/>
</g>
</svg>
As you can see, the files are different, but if I replace <g id="surface1">
with the style currect color scheme nothing will change because this styles are not present in the path tags unlike panel 16 icons. So I miss what you really need.
Maybe they should be redone at hand with Inkscape, but they are too much and there's no substitution script that can help here because it's not a matter of a simple string substitution, but adding classes to the path tag and place a style definition under the svg tag. This can only be done with Inkscape I think.
Anyway, since this issue is affection only Budgie, neither Gnome and Plasma, I think it's Budgie that should fix its panel rendering and we should have only one size, otherwise it's too difficult to handle with thousands of text files.
@bikass I changed the replace
script to act like the ffsvg
one.
With the following you can pass a directory and it will process all svg files under it, so you can avoid to repeat the same commad for multiple files:
#!/bin/sh
#
set -e
_run_helpers() {
echo "=> Working on '$1' ..."
sed -i -r \
-e '/([^-]color|fill|stop-color|stroke):(#444444|#dfdfdf)/I s/(style="[^"]+")/\1 class="ColorScheme-Text"/' \
-e '/([^-]color|fill|stop-color|stroke):#4285f4/I s/(style="[^"]+")/\1 class="ColorScheme-Highlight"/' \
-e '/([^-]color|fill|stop-color|stroke):#4caf50/I s/(style="[^"]+")/\1 class="ColorScheme-PositiveText"/' \
-e '/([^-]color|fill|stop-color|stroke):#ff9800/I s/(style="[^"]+")/\1 class="ColorScheme-NeutralText"/' \
-e '/([^-]color|fill|stop-color|stroke):#f44336/I s/(style="[^"]+")/\1 class="ColorScheme-NegativeText"/' \
$1
sed -i -r \
-e '/class="ColorScheme-/ s/([^-])color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/\1/' \
-e '/class="ColorScheme-/ s/fill:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/fill:currentColor;/' \
-e '/class="ColorScheme-/ s/stroke:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stroke:currentColor;/' \
-e '/class="ColorScheme-/ s/stop-color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stop-color:currentColor;/' \
$1
sed -i 's/;fill-rule:nonzero/;/g' $1
}
for i in "$@"; do
if [ -d "$i" ]; then
# it's a directory
echo "=> Directory '$i' will be processed."
echo " Press <CTRL-C> to abort (wait 1 seconds) ..."
sleep 1
# process all SVG files w/o symlinks
find "$i" -type f -name '*.svg' | while read -r file; do
_run_helpers "$file"
done
elif [ -f "$i" ] && [ ! -L "$i" ]; then
# it's a file and not a symlink
# continue if an extension is svg
[ "${i##*.}" = "svg" ] || continue
_run_helpers "$i"
else
continue
fi
done
Just copy it and past all inside replace.sh
Ok, thanks I'll try this. Regarding your previous post. I have different results And I think it's because I'm using SVGO not scour. I have correct style <path style="fill:currentColor" class="ColorScheme-Text" .... Then wat is left is to change just top part. I checked XFCE it also has this scaling issue. But strange that Budgie has, because they use lot of Gnome stuff. And Gnome doesnt have those issues. I think, we could consider it done. I left 16-new icons (and Gnome uses those), 22 and 24 old icons which I will be replacing slowly.
These correct styles are in the master branch now?
If yes, I'll try to make a script to add the definition style. I couldn't do it because after processing the icons didn't have the proper classes in path tag.
edit: anyway, yes, I did with scour, maybe svgo it's different, but I don't know where to install it, didn't found on Arch repository.
Yes in master everything is fine with styles. It's just after editing icons styles are lost and I need to edit code. No big deal I already did 50 icons 350 to go :)
I can't find an icon without the style tag, can you tell me one?
This is the icon how it looks straight after editing bitwarden-tray.zip
It's without classes in the path tag. If you add the style tag, nothing should change because there's no class specified.
Are you sure that file came out after you executed replace
script?
icon after cleanup: bitwarden-tray.zip
OK, now it's a good base to test a regular expression. I'll let you know.
Found the pattern. Try the following script as replace.sh
#!/bin/sh
#
set -e
_run_substitution() {
echo "=> Working on '$1' ..."
sed -i -r \
-e '/([^-]color|fill|stop-color|stroke):(#444444|#dfdfdf)/I s/(style="[^"]+")/\1 class="ColorScheme-Text"/' \
-e '/([^-]color|fill|stop-color|stroke):#4285f4/I s/(style="[^"]+")/\1 class="ColorScheme-Highlight"/' \
-e '/([^-]color|fill|stop-color|stroke):#4caf50/I s/(style="[^"]+")/\1 class="ColorScheme-PositiveText"/' \
-e '/([^-]color|fill|stop-color|stroke):#ff9800/I s/(style="[^"]+")/\1 class="ColorScheme-NeutralText"/' \
-e '/([^-]color|fill|stop-color|stroke):#f44336/I s/(style="[^"]+")/\1 class="ColorScheme-NegativeText"/' \
$1
sed -i -r \
-e '/class="ColorScheme-/ s/([^-])color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/\1/' \
-e '/class="ColorScheme-/ s/fill:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/fill:currentColor;/' \
-e '/class="ColorScheme-/ s/stroke:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stroke:currentColor;/' \
-e '/class="ColorScheme-/ s/stop-color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stop-color:currentColor;/' \
$1
sed -i 's/;fill-rule:nonzero/;/g' $1
sed -i -r -e 's/(<svg[^>]+>)\s*/\1\n <defs>\n <style id="current-color-scheme" type="text\/css">\n \.ColorScheme-Text { color:#dfdfdf; } \.ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } \.ColorScheme-PositiveText { color:#4caf50; } \.ColorScheme-NegativeText { color:#f44336; }\n <\/style>\n <\/defs>/' $1
}
for i in "$@"; do
if [ -d "$i" ]; then
# it's a directory
echo "=> Directory '$i' will be processed."
echo " Press <CTRL-C> to abort (wait 1 seconds) ..."
sleep 1
# process all SVG files w/o symlinks
find "$i" -type f -name '*.svg' | while read -r file; do
_run_substitution "$file"
done
elif [ -f "$i" ] && [ ! -L "$i" ]; then
# it's a file and not a symlink
# continue if an extension is svg
[ "${i##*.}" = "svg" ] || continue
_run_substitution "$i"
else
continue
fi
done
If it works, I can join all in one single script.
Disclaimer: use it only on icons without the style definition, otherwise it will be duplicated.
If it works, I'll make another pattern to not duplicate it on files that already have the style tag.
It worked to me, tested on the icon you gave.
OMG it's magic :)
I ran in folder bash replace2.sh *.svg
it worked. Is it right way to use it?
So, now workflow is: ffsvg.sh then replace.sh and then yours replace2.sh
And you can join all scripts in one?
I'm afraid you executed it on all files, now most of them have double style definition, LOL. Please, check.
Anyway, first of all, tell me if you use these script on all files or only on ones you made/modified.
I think you do them only on panel icons. I suppose app icons do not have style definition
Anyway you can run ffsvg and my replace script passing the directory and it will process all icons in it.
./replace2.sh directoryname
Or one only icon:
./replace2.sh iconfilename.svg
I have separate working directory where I'm fixing edited svg's and then coping them to themes directories.
Algient gave an idea to extend boundaries from 16 to 22. This way icons will be smaller, it's what we need (of course I need to check if they not too small). Problem is when I change to 22 icon is not in the center but in the corner. If this could be done in script, then days of manual work could be saved, and errors avoided.
if I add this transform="translate(40,40)"
icon moves. Just not sure it's ok to do. And we would need to find right numbers
I have separate working directory where I'm fixing edited svg's and then coping them to themes directories.
Later I'll try to do a single script that combine ffsvg and replace2 without duplicating the existing style.
if I add this
transform="translate(40,40)"
icon moves. Just not sure it's ok to do. And we would need to find right numbers
It's in the corner because the path is made for 16*16. I think it should be modified in Inkscape, but if you find the right transform, I can try to make a script to add in all files.
Transform behaves in a weird way. Preview shows icon in a corner and when you open its in center. When I put transform="translate(4,4)" However when I change view box from viewBox="-0 0 24 24" to viewBox="-4 -4 24 24" . Icon in center on preview an when opening. Just not sure if it's ok to do
I think it's because the preview does not support the translate function. For the other workaround, it has to be tested on Budgie. Anyway, I think also height and width property should be updated.
Try also viewport=-3 -3 19 19
Don't understand how "viewport=.." works. But there is at least 2 ways to do with translate and viewbox. I haven't seen such approach in other icon themes. But if it works...
They are the coordinate up left, up right, down right and left right.
Original svg draw path in a square between 0 0 16 16. If you change to - 3 - 3 19 19, the draw should be the same, but in a bigger square 22*22 and centered. Maybe with height and width 22 it's upscaled to 22px
I tested in vm on Budgie with "network wired" icon. Seams like both methods "translate" and "viewbox" works. And sizing is nice. So should we do it :) ?
So you don't need the all in one script now?
If it's the viewport, I can change it easily for all files with atom.
Edit: anyway the viewport method is more reliable for systems that does not support the translate function.
Which one is working better? - 3 - 3 19 19 or - 4 - 4 24 24?
No, I need that script, its different thing. For cleaning up svg's after editing. Last posts were talked about resizing from 16 to 22 and 24. And would be nice to have separate script. For resizing - some icons have "width" and "height" as 100% (doesn't need to change), and other as 16 16 - needs to change too, not only viewbox="-4 -4 24 24" .
Edit: And mabye I will do that because there is no need to change all icons. I didn't changed all of them just 460. Ocourse I could send you those file via wetransfer?
I'll try to make it later, I'm pretty busy now, but I think you need them separated if you intend to use them on app icons where styles are not needed because related classes are not present in the path.
Then you need also script to change viewport for 22 and 24 icons?
Yes, those scripts you did for actions and panel icons.
For app and others I use scour.sh although it doesn't do full job too :) Here is icon after edit and script I use. Mabye some day when you have time. icon and script.zip
And for resizing icons to 22 and 24, would be nice to have too (but I could do that in Atom?)
Here is The Beast :)
#!/bin/sh
#
# Written in 2016 by Sergei Eremenko <https://github.com/SmartFinn>
#
# To the extent possible under law, the author(s) have dedicated all copyright
# and related and neighboring rights to this software to the public domain
# worldwide. This software is distributed without any warranty.
#
# You should have received a copy of the CC0 Public Domain Dedication along
# with this software. If not, see
# <http://creativecommons.org/publicdomain/zero/1.0/>.
#
# Description:
# This script finds, fixes and cleans SVG files.
#
# Usage:
# ffsvg.sh PATH...
set -e
SCRIPT_DIR="$(dirname "$0")"
_run_helpers() {
echo "=> Working on '$1' ..."
# optimize a SVG
if command -v svgo > /dev/null 2>&1; then
# use SVGO
svgo --config="$SCRIPT_DIR/_svgo.yml" -i "$1" -o "$1".tmp
mv -f "$1".tmp "$1"
elif command -v scour > /dev/null 2>&1; then
# use scour
"$SCRIPT_DIR/_scour.sh" "$1"
else
cat >&2 <<-'EOF'
You have to install svgo or scour to use this script:
sudo npm install -g svgo
sudo apt-get install python-scour
EOF
exit 1
fi
# fix a color scheme
"$SCRIPT_DIR/_fix_color_scheme.sh" "$1"
# clear attributes
sed -r -i -f "$SCRIPT_DIR/_clean_attrs.sed" "$1"
# REPLACE
sed -i -r \
-e '/([^-]color|fill|stop-color|stroke):(#444444|#dfdfdf)/I s/(style="[^"]+")/\1 class="ColorScheme-Text"/' \
-e '/([^-]color|fill|stop-color|stroke):#4285f4/I s/(style="[^"]+")/\1 class="ColorScheme-Highlight"/' \
-e '/([^-]color|fill|stop-color|stroke):#4caf50/I s/(style="[^"]+")/\1 class="ColorScheme-PositiveText"/' \
-e '/([^-]color|fill|stop-color|stroke):#ff9800/I s/(style="[^"]+")/\1 class="ColorScheme-NeutralText"/' \
-e '/([^-]color|fill|stop-color|stroke):#f44336/I s/(style="[^"]+")/\1 class="ColorScheme-NegativeText"/' \
"$1"
sed -i -r \
-e '/class="ColorScheme-/ s/([^-])color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/\1/' \
-e '/class="ColorScheme-/ s/fill:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/fill:currentColor;/' \
-e '/class="ColorScheme-/ s/stroke:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stroke:currentColor;/' \
-e '/class="ColorScheme-/ s/stop-color:#([[:xdigit:]]{3}|[[:xdigit:]]{6});?/stop-color:currentColor;/' \
"$1"
sed -i 's/;fill-rule:nonzero/;/g' "$1"
# ADD STYLE IF MISSING
sed -i -r -e ':a;N;$!ba;s/(<svg[^>]*>[ ]*$)(([ ]*\n*[ ]*<defs>[ ]*)?(\n*[ ]*<style[^>]+>[ ]*)(\n*[^}<]+}[ ]*)*(\n*[ ]*<\/style>[ ]*)(\n[ ]*<\/defs>))*/\1\n <defs>\n <style id="current-color-scheme" type="text\/css">\n \.ColorScheme-Text { color:#dfdfdf; } \.ColorScheme-Highlight { color:#4285f4; } .ColorScheme-NeutralText { color:#ff9800; } \.ColorScheme-PositiveText { color:#4caf50; } \.ColorScheme-NegativeText { color:#f44336; }\n <\/style>\n <\/defs>/m' "$1"
}
for i in "$@"; do
if [ -d "$i" ]; then
# it's a directory
echo "=> Directory '$i' will be processed."
echo " Press <CTRL-C> to abort (wait 1 seconds) ..."
sleep 1
# process all SVG files w/o symlinks
find "$i" -type f -name '*.svg' | while read -r file; do
_run_helpers "$file"
done
elif [ -f "$i" ] && [ ! -L "$i" ]; then
# it's a file and not a symlink
# continue if an extension is svg
[ "${i##*.}" = "svg" ] || continue
_run_helpers "$i"
else
continue
fi
done
Hope it works. It should be run in place of ffsvg.sh
with all other scripts in the same folder. This adds the style and if rerun should not duplicate the existing style. Please, test it passing a directory or a file as argument.
The Beast works :) Do I also need script you made earlier replace2.sh? Or this one replaces it? Also ffsvg.sh is doing nothing now or I need to leave it?
Leave them for safety reasons, make a backup in another directory, maybe they will be needed alone in the future.
To change the viewport and the width/height, try it on atom. The work above couldn't be done in atom because it was a multiline substitution, but for single line substitution atom is very easy and give more powerful in your hand. I will explain step by step how to do it.
Open atom, then File menu, click Open Folder
Select your working directory, it will appear on the left bar. From the left bar select the panel 22 directory, right click and select Search in Folder
. Find in Project footer bar will be opened.
Let's consider this panel icon.
We have this single line inside it:
<svg xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="100%" height="100%" version="1.1" viewBox="0 0 22 22" xml:space="preserve">
In the first field of footer bar, "Find in Project", write viewBox="0 0 22 22"
, the click Find All
.
You now see all files in panel 22 folder that have the searched line.
In the second field, "Replace in Project", write the following: viewBox="-3 -3 19 19"
Click Replace All
and all files in the selected directory will have viewBox="-3 -3 19 19"
in place of viewBox="0 0 22 22"
.
Repeat the steps above and do it also for viewBox="0 0 24 24"
to viewBox="-4 -4 20 20"
for 24 panel icons.
Replace also
width="22"
towidth="100%"
width="24"
to width="100%"
height="22"
to height="100%"
height="24"
to height="100%"
And so on, it's not that difficult.
Yes I can do that, thanks! Just I will be changing from 16x16. And viewBox="-3 -3 22 22"
for 22. And viewBox="-4 -4 24 24"
for 24 worked for me.
Lots of commits today. Huge cleanup.
Other things might be fixed. When it's completed, the release should be 1.4.0.
@Digitalone1 Thanks! Ok, next release will be 1.4.0 @algent-al Could you test icons on Budgie? They have been replaced with our own scaled ones (22, 24). Also we need to check how 'action' and 'panel' icons looks in apps we use. Maybe some are off and needs fixing.
@bikass The panel icons are fine. About action icons here you can see how they look in two apps that I found they were changing.
There's an issue with Actions icons
[actions/scalable]
Context=Actions
Size=16
Type=Fixed
[actions/scalable@2]
Context=Actions
Size=16
Scale=2
Type=Fixed
[actions/symbolic]
SContext=Actions
Size=16
MinSize=16
MaxSize=512
Type=Scalable
Scalable icons miss mix/maxSize, Context on symbolic has a typo.
Should be like apps
[apps/scalable]
Context=Applications
Size=16
MinSize=16
MaxSize=512
Type=Scalable
[apps/scalable@2]
Context=Applications
Size=16
Scale=2
MinSize=16
MaxSize=512
Type=Scalable
[apps/symbolic]
Context=Applications
Size=16
MinSize=16
MaxSize=512
Type=Scalable
Anyway, index files are very error prone, I suggest to isolate Name and Comment to be changed on every file, then the rest has to be modified only on korla index and be pasted over the others.
@algent-al So Conkys icons good and timeshift wrong. And old version is other way around :D I' checking on VM Conky manager good. But there is no Timeshift package in repositories. Are you using snap or flatpack?
@Digitalone1 I'm afraid I did not understood. We need to fix index file?
@bikass timeshift is from a unofficial repository.
sudo eopkg add-repo Theca https://solus.davidepucci.it/eopkg-index.xml.xz
.
Then just install timeshift
as other packages. sudo eopkg it timeshift
.
Same here. But it's strange that conky manager good but before was wrong. I did changes to index, but then reverted back when we introduced back 22 24 icons. I have no idea why is this way...
@Digitalone1 I'm afraid I did not understood. We need to fix index file?
Sure. Context on symbolic actions is wrong and Min/MaxSize is missing on scalable actions.
A few icons are bigger than others. This is for
dropbox
,telegram
andwireless
so far.