Vector Themes

[Badruzeus]

4 hours ago, Slice said:

Inkscape is not working in macOS 10.11+. Pity.

My last try under 10.11.6, Inkscape v0.92.3 is still working using brew:

brew install caskformula/caskformula/inkscape

.. plus XQuartz 2.7.11

 

But on my case, it was running damn slow.. seems my Fermi got no Graphics accell with X11.

Edited July 1, 2018 by Badruzeus

[Badruzeus]

I get a simpler way running Inkscape v0.9.22 (latest official package for mac) under 10.11+:

1. Go to /Applications/Inkscape.app/Contents/MacOS

2. Right click "Inkscape" binary, choose "Open with" and select XQuatrz.app

 

The problem is, it won't run by directly selecting the app from Launchpad or /Applications folder, better idea? Thanks.

Edited July 1, 2018 by Badruzeus

[Slice]

Since rev 4588 gradients are shown.

 

[Badruzeus]

49 minutes ago, Slice said:

Since rev 4588 gradients are shown.

 

 

 


 

 

 

@Slice Sorry, I still wonder why it looks different here.. on my case, I lost vector coloring (nor even gradient). Sample.svg below actually contains Orange-Yellow gradient colors, it's generated with Illustrator > File > Export for Screens. Or, if you're using different SVG options when saving, plz let me know. Thanks.

Sample.svg

Edited July 3, 2018 by Badruzeus

[blackosx]

I had been testing in QEMU with the SVG file from here but Clover crashes when pressing F8. To rule out QEMU I tested on my hack and also experienced a crash.

 

Testing with the two .svg files posted by Badruzeus works though I also only see just the solid black filled graphic rather than colour images.

[Slice]

1 hour ago, Badruzeus said:

 

@Slice Sorry, I still wonder why it looks different here.. on my case, I lost vector coloring (nor even gradient). Sample.svg below actually contains Orange-Yellow gradient colors, it's generated with Illustrator > File > Export for Screens. Or, if you're using different SVG options when saving, plz let me know. Thanks.

Sample.svg

I see non-supported feature

<style>.cls-1{fill:url(#linear-gradient);}

class="cls-1"

 

Try to set SVG 1.0. I will think how to support this.

1 minute ago, blackosx said:

I had been testing in QEMU with the SVG file from here but Clover crashes when pressing F8. To rule out QEMU I tested on my hack and also experienced a crash.

 

Testing with the two .svg files posted by Badruzeus works though I also only see just the solid black filled graphic rather than colour images.

GoogleChrome open this svg just fine.

[blackosx]

Yeah, chrome and all other software renders that svg file just fine. It’s Clover that crashes when trying to.

[Slice]

24 minutes ago, blackosx said:

I had been testing in QEMU with the SVG file from here

Good article! We should recommend it to SVG creators.

 

16 minutes ago, blackosx said:

Yeah, chrome and all other software renders that svg file just fine. It’s Clover that crashes when trying to.

The work in progress.

[Slice]

@Badruzeus

I may propose to you manually edit your svg files with follow rules:

1. Exclude

	<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{fill:url(#linear-gradient-6);}</style>

2. Replace

<path class="cls-2"

to

<path style="fill:url(#linear-gradient-2)"

and so on

 

 

What is "Advanced options-> CSS Properties? What can be choosen?

 

 

EDITED.

Now this style is supported. Don't need to remove it.

[Badruzeus]

2 hours ago, Slice said:

@Badruzeus

I may propose to you manually edit your svg files with follow rules:

1. Exclude

	<style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{fill:url(#linear-gradient-6);}</style>

2. Replace

<path class="cls-2"

to

<path style="fill:url(#linear-gradient-2)"

and so on

 

 

What is "Advanced options-> CSS Properties? What can be choosen?

OK, it seems illustrator stuffs. I'm trying to repoduce it with diff. options, or diff. vector editor.. just read a good article given by @blackosx too.

[Slice]

Yes, gradients is still not fully supported

 

EDITED.

Now it is good.

[Badruzeus]

OK, got it to works finally.. with original SVG colors & gradients.

Sample.svg

Edited July 4, 2018 by Badruzeus

[Slice]

Since rev 4589 complex gradients are supported. Anyway CSS features must be excluded.

So making export from Illustrator do "CSS Properties = NO"

[Slice]

On 7/3/2018 at 8:42 AM, Badruzeus said:

 

@Slice Sorry, I still wonder why it looks different here.. on my case, I lost vector coloring (nor even gradient). Sample.svg below actually contains Orange-Yellow gradient colors, it's generated with Illustrator > File > Export for Screens. Or, if you're using different SVG options when saving, plz let me know. Thanks.

 

 

Sample.svg

Since rev 4593 this file played fine.

Now CSS style class supported as illustrator do.

It is not my invention, it is from pull requests from github project. But initially there was a little mistake.

[Badruzeus]

30 minutes ago, Slice said:

Since rev 4593 this file played fine.

Now CSS style class supported as illustrator do.

It is not my invention, it is from pull requests from github project. But initially there was a little mistake.

@Slice Awesome works! Thank you. 

[Slice]

Next step will be vector font support.

[Slice]

Topic edited with some instructions.

[Matgen84]

Hi

 

Can vector themes use the same rules as normal themes (icon sizes, scale, etc). What about background format, Please.

[Badruzeus]

13 hours ago, Matgen84 said:

Can vector themes use the same rules as normal themes (icon sizes, scale, etc). What about background format, Please.

It' s still under early devel. and not ready yet, I guess..

[Slice]

On 7/13/2018 at 6:27 PM, Matgen84 said:

Hi

 

Can vector themes use the same rules as normal themes (icon sizes, scale, etc). What about background format, Please.

I am ready to accept good ideas 

[Matgen84]

2 hours ago, Slice said:

I am ready to accept good ideas 

 

Sorry for my bad english. What I meant: will vector themes use the same rules as the classic themes described in clover wiki? I do not have special skills to find good ideas.

[Slice]

19 hours ago, Matgen84 said:

 

Sorry for my bad english. What I meant: will vector themes use the same rules as the classic themes described in clover wiki? I do not have special skills to find good ideas.

I think there will be some new rules because of scalability.

[Matgen84]

1 hour ago, Slice said:

I think there will be some new rules because of scalability.

I hope someone do a tutorial for this "great" Vector Themes. Thanks

[Slice]

The final instruction is not ready so we will speak here.

SVG images and fonts mostly can be read by Clover.

As a first step I may propose to use vector graphics same way as raster graphics but scaled inside Clover taking into account real screen height.

So, you may draw icons in Illustrator as having 144 units (assumes pixels) for design screen size 1920x1080. So drawing to screen 1600x900 clover will scale the icon to

144/1080*900=120 pixels.

os_mac.icns should be os_mac.svg

I propose also to raster font to matrix and then using this font matrix to draw menu.

Later will be more features. I just have to start somehow.

 

SVG images proposed to have some additional features that is not working yet:

1. Text using embedded or external font.

2. PNG image.

3. Linked shapes as <use xlink:href="other_image">

4. <def> after <group>

5. <clip-path>

6. <conic-gradient>

CSS, JavaScripts and animations are not proposed yet.

 

To test current Clover you may place Sample.svg and Font.svg (exactly these names) files into the root of EFI partition and press F8 in Clover GUI.

I want to know how many bugs remain here.

 

One of the possible fonts attached.

PT_Sans_Caption-Regular.zip

[Slice]

I have an idea. Let overview of your theme ( like screenshot.png ) will be same as theme.plist and named as “theme.svg”. 

For common viewer like QuickView  it is a picture to show how the theme will be looked. For Clover it will be settings like theme.plist. 

Creating the theme.svg be sure you grouped graphics for each icons.