search

gusbemacbe / suru-plus

Suru++ 25 — A cyberpunk, elegant, futuristic and Papirus-like third-party icons theme
GNU General Public License v3.0
344 stars 32 forks source link

Fixes icons with render issues on old systems #34

Closed SmartFinn closed 5 years ago

SmartFinn commented 5 years ago

I used the following command to reformat the path elements in the SVG files:

# Regroup
for file in **/*.svg(.); do
    inkscape -g "$file" --vacuum-defs \
        --verb=EditSelectAll \
        --verb=SelectionGroup \
        --verb=EditSelectAll \
        --verb=SelectionUnGroup \
        --verb=FileSave \
        --verb=FileQuit
done

Then I clean the modified SVG files with Papirus ffsvg.sh script. I don't know what do you using for clearing the SVG files, so I use svgo with our config for it.

gusbemacbe commented 5 years ago

I use Gravit Designer for the most of icons, but I exported to SVG and I am not sure if the Inkscape SVGO CLI commands, as your Papirus ffsvg, are compatible with Gravit-based and SVG-exported files.

I have to switch from Gravit to Inkscape, redesigning the icons to overwrite SVG codes and applying SVGO commands.

SmartFinn commented 5 years ago

@gusbemacbe I sure that the files are compatible with Gravit Designer because the SVG files do not use non-standard elements.

gusbemacbe commented 5 years ago

I would like to use your ffsvg.sh to plain and optimise all the colorised and monochromatic SVG files, removing useless metadata. In the terminal, do Inkscape and package svgo have both these options (plain and optimise) at the same time, @SmartFinn ? For example:

Multiple files

for file in **/*.svg(.); do
    svgo -o "$file"
done

Or

With a folder

svgo -f

But I did not find the option of plaining.

SmartFinn commented 5 years ago

@gusbemacbe

svgo have both these options (plain and optimise)

What option does this? I understand what "plain" means for Inkscape, but I can not understand what it means for svgo. Could you show an example?

I would like to use your ffsvg.sh

ffsvg.sh is a wrapper for another 5 scripts (see README.md there). One of these scripts, _fix_color_scheme.sh is incompatible with your theme, you have to change colors in the script if you want to support KDE color scheme or delete it from ffsvg.sh if you don't want.

gusbemacbe commented 5 years ago

What option does this? I understand what "plain" means for Inkscape, but I can not understand what it means for svgo. Could you show an example?

I will invent the inexistant commands:

for file in **/*.svg(.); do
    svgo -o "$file" --plain --optimize
done

Or

svgo -f --plain --optimize

Is the script _fix_color_scheme.sh for colourised or monochromatic icons? Can you explain the example of few Papirus icons run by this script?

SmartFinn commented 5 years ago

@gusbemacbe I still don't get... The plain SVG for Inkscape is an SVG without inkscape: and sodipodi: namespaces. What is the plain SVG for sgvo?

Is the script _fix_color_scheme.sh for colourised or monochromatic icons? Can you explain the example of few Papirus icons run by this script?

The script replaces matched colors to fill:currentColor and add the class class="ColorScheme-*" if an SVG file has a stylesheet. For example the script could fix this file camera-ready.svg by replacing style="fill:#808080;opacity:1" to style="fill:currentColor;opacity:1".

gusbemacbe commented 5 years ago

What is the plain SVG for sgvo?

It is why I did not find the option of plaining.

I want to plain firstly and then to optimise. I do not now if plain and optimise are the same.

The script replaces matched colors to fill:currentColorand add the class class="ColorScheme-*" if an SVG file has a stylesheet. For example the script could fix this file camera-ready.svg by replacing style="fill:#808080;opacity:1" to style="fill:currentColor;opacity:1".

I got it. But what the incompatibilities of the icons with _fix_color_scheme.sh?

Do I change only colours? Or do I have to readjust the codes in SVG of monochromatic and colourised icons?

gusbemacbe commented 5 years ago

Here is the CLI list: https://www.npmjs.com/package/svgo. There is not option of plaining. :-(

SmartFinn commented 5 years ago

Do I change only colours? Or do I have to readjust the codes in SVG of monochromatic and colourised icons?

Change colors in _fix_color_scheme.sh script only, or give me class-color pair and I'll change the script for you.

There is not option of plaining. :-(

I try to explain to you that is nonsense.

gusbemacbe commented 5 years ago

Dark (actions, apps, categories, mimetypes) ColorScheme-Text: #808080,#babdb6 ColorScheme-Highlight: #5294e2, #3daee9, #1d99f3 ColorScheme-PositiveText: #27ae60 ColorScheme-NegativeText: #da4453 ColorScheme-NeutralText: #f67400 ColorScheme-ViewBackground: #4f575f

Light (status) ColorScheme-Text: #F7F7F7, #FFFFFF

But there are small problems: many icons still use Inkscape metadata and some use RGB. Therefore, we need to use SVGO to convert RGB to HEX and optimising.

SmartFinn commented 5 years ago

@gusbemacbe the ffsvg for Suru++ is here

Clone it as git repo:

git clone https://gist.github.com/99c5bdff7bbb5132c83066f3cdc213f7.git ffsvg

Usage: path/to/ffsvh.sh <DIR|FILE>...

Be careful, the script broke some icons without full CSS stylesheets.

gusbemacbe commented 5 years ago

Instead of <DIR|FILE>..., can I use ffsvg.sh <DIR/> (I mean I want to ffsvgise all the files once in a while)?

SmartFinn commented 5 years ago

@gusbemacbe of course, the wrapper finds *.svg files in the specified path and does not touch other files.

gusbemacbe commented 5 years ago

Hi @SmartFinn, ffsvg optimised the colourful icons (apps/scalable) but did not remove Gravit metadata and base64.

<gravitDesigner:gravitElementRef xmlns:gravitDesigner="http://ns.gravit.io/" xlink:href="#...."/>
 <gravitDesigner:gravitGraphicSource xmlns:gravitDesigner="http://ns.gravit.io/" id="..." version="1">
  <![CDATA[...
 </gravitDesigner:gravitGraphicSource>

The <![CDATA[... is a base64. If we readapt the script, using regex, will it work?

SmartFinn commented 5 years ago

@gusbemacbe Hi. Unfortunately, that can't be made in a dumb way. Needs something that does parse XML files. SVGO can do it, but I don't find a plugin for deleting elements by name.

gusbemacbe commented 5 years ago

SVGO did not remove either. Inkscape does not remove, where exporting as optimised file. I will ask to programming forums.

gusbemacbe commented 5 years ago

Only one of elements' regex worked: http://refiddle.com/nz75

gusbemacbe commented 5 years ago

Another element with base64's regex also worked: http://refiddle.com/nz76

gusbemacbe commented 5 years ago

Finding the first element

image

Finding another element with base64:

image

gusbemacbe commented 5 years ago

I have wonderful news, @SmartFinn !

Using ffsvg, svgo (for regex) and regex to remove these elements, I have tested, applying the icons theme, icons of Albert, Brave, Insync, Latte, Vivaldi, etc. return to the normal. No broken icons. The mysterious bug is Gravit Designer metadata with base64 which caused rendering bug. All bugs are gone.

Thanks to ffsvg, svgo and regex, I have reduced icons theme size from 170MB to 150MB, but of course I will reduced a lot, because I have not finished yet.