Jump to content

Vector Themes


Slice
 Share

455 posts in this topic

Recommended Posts

Few last hours of 2018 I have to present my svg theme. It doesn't contain all icons but enough for a work.

Look High Sierra and Recovery High Sierra, look Windows from Usb Stick.

screenshot20.png

 

It's a pity preview is not possible because:

1. Different day and night looking

2. Many icons out of screen

3. Neither Quickloook nor Safari nor other SVG viewers can show conicGradient that I used.

 

Later I propose to change this dragon to my graphics.

The folder contains theme.svg and SVG fonts used in the theme.

 

cesium.zip

  • Like 5
Link to comment
Share on other sites

Just an observation and making notes...

 

While the idea of vector themes are great, to be useable they ideally need to be kept simple otherwise the user will experience an 'unwanted' delay while the theme is parsed in nsvg__parseXML.

 

EDIT: This was down to issue with my Clover build using Xcode 10.0 with XCODE8 toolchain. See here 

 

For example, on my hack I see the following times:

 

Clovy

7:375  0:067  === [ InitTheme ] =========================================
7:469  0:093  use daylight theme
8:124  0:655  found shapes=518

 

BGM_SVG

7:381  0:067  === [ InitTheme ] =========================================
7:475  0:093  use daylight theme
10:317  2:842  found shapes=1268

 

Silver (Work in progress theme)

7:358  0:067  === [ InitTheme ] =========================================
7:451  0:093  use daylight theme
15:227  7:775  found shapes=272

I would say the 3 seconds to parse BGM_SVG is just about acceptable, but the Silver theme I've been slowly working on, which only currently contains a font and OSBadges, is too complex and almost 8 seconds to parse seems like an age.

 

I know Clover does not work this way, but if I were allowed to dream then it would be great to not have a single theme.svg file containing lots of icons that most likely would never all be used, instead have individual svg files for each image, similar to current raster themes, and only have them parsed if needed to present the theme with the content for the users current system. This would allow for detailed SVG images to be used without a long delay. Though would not help with the use of symbols... hmmm.

 

Edited by blackosx
Add note that the slow parse speed was down to my build of Clover.
Link to comment
Share on other sites

Yes, but it's super fast to parse text if you do it correctly. Most likely the problem is rasterizing the shapes, especially if they are complex, they shouldn't be rasterized until needed which would be the equivalent.

 

EDIT: I also agree about multiple SVGs though, as that would make the theme not insane to read through as well.

Edited by apianti
Link to comment
Share on other sites

hmm.. actually maybe the issue is specifically on my hack as I just tested in QEMU on my MacBookPro and the same Silver theme which took almost 8 seconds to parse on the hack, only takes 1.5 seconds.

2:125  0:005  === [ InitTheme ] =========================================
2:287  0:161  use night theme
...
3:712  0:005  parsing theme finish

I need to perform more tests.

Link to comment
Share on other sites

 

I know Clover does not work this way, but if I were allowed to dream then it would be great to not have a single theme.svg file containing lots of icons that most likely would never all be used, instead have individual svg files for each image, similar to current raster themes, and only have them parsed if needed to present the theme with the content for the users current system. This would allow for detailed SVG images to be used without a long delay. Though would not help with the use of symbols... hmmm.

I agree with you on this case, but doesn't it need reworking lot of things?

Yeah, I got difficulties "pirating" your single BGM_SVG contains bunch of rscs for applying on to my new theme, honestly.

And, found no way for Batch / Automation feature with Illustrator / Inkscape. With raster (Photoshop) for a theme with a same shape, color & size I usually make only one design then using "Action" feature with 1, 2, 3 clicks, set /icons dir with 50+ svg as source, enjoying a cup of Cofee and done! (Eh, not yet.. compressing them using ImageOptim after it LoL).

Oh, It seems I'm talking on design side not how they appear on Clover GUI using Vesa.

Link to comment
Share on other sites

Vector theme requires much more skill from the artist then raster one. You should develop not only imaging but also a method of painting. The same image can be made by pathed or by rect/polygon/symbol etc.

  • Like 2
Link to comment
Share on other sites

 

I agree with you on this case, but doesn't it need reworking lot of things?

Yeah, it would do. But my thinking for that post yesterday was based on the time I was seeing to parse the theme but that doesn't seem to be the case as I posted earlier when testing on my MacBookPro.

 

 

Yeah, I got difficulties "pirating" your single BGM_SVG contains bunch of rscs for applying on to my new theme, honestly.

 

rscs?

EDIT: Ah.. Resources?


Feel free to take what you want from BGM_SVG, as I took the initial structure of it from Clovy.

 

 

And, found no way for Batch / Automation feature with Illustrator / Inkscape. With raster (Photoshop) for a theme with a same shape, color & size I usually make only one design then using "Action" feature with 1, 2, 3 clicks, set /icons dir with 50+ svg as source, enjoying a cup of Cofee and done! (Eh, not yet.. compressing them using ImageOptim after it LoL).

 

Initially, I used individual AI files exported to SVG files, and combined them using my SVGThemeBuilder script. That worked great but as the number of icons grew, so did the file size. And as you mention, a theme may well contain multiple uses of the same design image and this was true with BGM_SVG so that's why I changed the theme to use symbols. Doing this pretty much halved the file size and in theory makes it simpler to change the design by changing that symbol in the future. This method of theme design though means SVGThemeBuilder needs a re-work.

 

For Automation I did originally look at Thomas Byrne's MultiExporter script for Illustrator but quickly found it did not do exactly what I wanted. He did write a newer version of the script, available on Adobe Exchange, which I believe may be more suitable but it's a paid for app which I haven't tried.

 

For other ways you could check Clovy's excellent Illustrator topic over at AppleLife for a mass of info regarding vector themes and there you'll also find a link to Clovy's BitBucket repo where you can find the Clovy AI file and Illustrator export script which will generate the actual Clovy theme SVG. you may prefer to work that way?

 

I'm still figuring out 'my' way for now...

 

Edited by blackosx
  • Like 1
Link to comment
Share on other sites

 

Vector theme requires much more skill from the artist then raster one. You should develop not only imaging but also a method of painting. The same image can be made by pathed or by rect/polygon/symbol etc.

Sure. And aside from skill, more time too :P

  • Like 1
Link to comment
Share on other sites

My laptop #2 in sig is not very fast (I have no SSD and it is IvyBridge only).

4:419  0:018  === [ InitTheme ] =========================================
4:505  0:085  use daylight theme
4:610  0:104  Theme view-bounds: w=1366 h=768 units=px
4:617  0:006  using scale  1.000000
4:618  0:001  theme contains font-family=DragonIsComing
4:787  0:168  found clipPaths for Banner
4:789  0:001  Banner position at parse [433,88]
4:807  0:017  parsed banner->width=550
....
4:895  0:005  parsing theme finish
4:897  0:001  Using vector theme 'cesium' (EFI\CLOVER\themes\cesium)

 

  • Like 1
Link to comment
Share on other sites

@Slice - Can you test with this?

 

I've attached a version of Clover, my bdmesg and current Work in Progress theme.

 

 

Here's what I see on my hack

1:824  0:000  === [ InitTheme ] =========================================
1:824  0:000  use daylight theme
1:827  0:003  nsvgParse() Entry
1:827  0:000  nsvgParse() nsvg__createParser Complete
10:323  8:496  nsvgParse() nsvg__parseXML Complete
10:323  0:000  nsvgParse() clipPath nsvg__assignGradients Complete
10:377  0:053  nsvgParse() Symbol nsvg__assignGradients Complete
10:377  0:000  found shapes=1090

 

Edited by blackosx
Remove attachment
Link to comment
Share on other sites

58 minutes ago, blackosx said:

@Slice - Can you test with this?

 

I've attached a version of Clover, my bdmesg and current Work in Progress theme.

Clover, bdmesg and theme.zip

 

Here's what I see on my hack


1:824  0:000  === [ InitTheme ] =========================================
1:824  0:000  use daylight theme
1:827  0:003  nsvgParse() Entry
1:827  0:000  nsvgParse() nsvg__createParser Complete
10:323  8:496  nsvgParse() nsvg__parseXML Complete
10:323  0:000  nsvgParse() clipPath nsvg__assignGradients Complete
10:377  0:053  nsvgParse() Symbol nsvg__assignGradients Complete
10:377  0:000  found shapes=1090

 

OK, I tested on QEMU.

1. Your Clover (rename your BOOTX64.efi to CloverX64.efi)

1:977  0:000  Starting Clover revision: 4839 on CLOVER EFI
1:977  0:000  Build with: [Args: -D USE_LOW_EBDA -a X64 -b RELEASE -t XCODE8 -n 9 | OS: 10.13.6 | XCODE: 10.0]
...
6:719  0:010  === [ InitTheme ] =========================================
7:076  0:357  use night theme
7:089  0:012  nsvgParse() Entry
7:099  0:010  nsvgParse() nsvg__createParser Complete
64:989  57:889  nsvgParse() nsvg__parseXML Complete
64:997  0:008  nsvgParse() clipPath nsvg__assignGradients Complete
65:580  0:582  nsvgParse() Symbol nsvg__assignGradients Complete
65:594  0:013  found shapes=1090

2. My Clover (replaced CloverX64.efi to my rev 4840)

1:917  0:000  Starting Clover revision: 4837 on CLOVER EFI
1:917  0:000  Build with: [Args: -nb | -D USE_LOW_EBDA -a X64 -b RELEASE -t XCODE8 -n 5 | OS: 10.13.6 | XCODE: 10.1]
...
6:511  0:008  === [ InitTheme ] =========================================
6:871  0:360  use night theme
7:772  0:900  Theme view-bounds: w=1366 h=768 units=px
7:781  0:009  using scale  1.000000
7:789  0:008  theme contains font-family=PTMono-Regular
10:197  2:407  Banner position at parse [-171,0]
10:207  0:009  Banner position at parse [-171,0]
10:226  0:019  parsed banner->width=527
...
10:483  0:018  icon main size=[144,144]
10:501  0:017  OSicon os_tiger not parsed
10:809  0:308  OSicon os_win not parsed
10:838  0:028  parsing theme finish
10:846  0:008  Using vector theme 'Silver' (EFI\CLOVER\themes\Silver)
10:857  0:010  file sound not found
10:865  0:008  file sound not found
10:873  0:008  theme inited
10:882  0:008  Chosen theme Silver

As you see timings are very different.

  • Like 1
Link to comment
Share on other sites

4 minutes ago, blackosx said:

Thank you!

Do you think it’s to do with Xcode 10.0 vs Xcode 10.1?

If you didn't make other differences. Try also set XCODE5 toolset.

 

Additionally, I compiled with UDK2018.

Link to comment
Share on other sites

Using XCODE5 toolchain instead of XCODE8 toolchain works! :)

Yes, using UDK2018 also.

 

Amazing Difference!

0:100  0:000  Starting Clover revision: 4839 on American Megatrends EFI
0:100  0:000  Build with: [Args: -D USE_LOW_EBDA -a X64 -b RELEASE -t XCODE5 -n 9 | OS: 10.13.6 | XCODE: 10.0]
....
1:027  0:000  === [ InitTheme ] =========================================
1:027  0:000  use night theme
1:030  0:003  nsvgParse() Entry
1:030  0:000  nsvgParse() nsvg__createParser Complete
1:058  0:027  nsvgParse() nsvg__parseXML Complete
1:058  0:000  nsvgParse() clipPath nsvg__assignGradients Complete
1:077  0:019  nsvgParse() Symbol nsvg__assignGradients Complete
1:077  0:000  found shapes=1090
....
1:380  0:000  parsing theme finish
1:380  0:000  Using vector theme 'Silver' (EFI\CLOVER\themes\Silver)

Thanks
 

Link to comment
Share on other sites

I've uploaded the Adobe Illustrator and resulting SVG files for BGM_SVG to help others create vector themes. 

 

Download: https://bitbucket.org/blackosx/cloversvgthemebuilder/downloads/

 

There are two versions of the SVG theme files, one uses individual images and a second uses symbols for Functions, OSBadges, Volumes, Checkbox and RadioButtons.  Both versions of the theme can be built with CloverSvgThemeBuilder.

 

  • Thanks 2
Link to comment
Share on other sites

On 1/11/2019 at 5:49 PM, Slice said:

This Clover looks like Logo.

LogoClover.svg

Nice find @Slice

I remember seeing the original of this somewhere online a few years ago but not ever found it again. :)

 

-----------------

 

I'm attaching a vector theme that I'm working on. I would like to see some screenshots at different resolutions if anyone would like to test?

 

Silver_v0.43.zip

 

Thanks

 

EDIT: 

I'm looking at how the background draws when shown at different resolutions as I'd like the centre gradient oval to remain in the centre.

 

Edited by blackosx
  • Like 2
Link to comment
Share on other sites

55 minutes ago, blackosx said:

Nice find @Slice

I remember seeing the original of this somewhere online a few years ago but not ever found it again. :)

 

-----------------

 

I'm attaching a vector theme that I'm working on. I would like to see some screenshots at different resolutions if anyone would like to test?

 

Silver_v0.43.zip

 

Thanks

 

 

Hi 

 

They are here (my resolution 1920x1080):

Screenshot_Clover_Option_menu.png

Screenshot_Clover-GUI.png

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

What I like about these themes is it's very easy to change the colours of the whole theme by some simple search and replace in a text editor.

 

For example, to change the background of this theme to a dark grey:

 

Search 1:

<stop  offset="0" style="stop-color:#386AFF"/>			<stop  offset="0.03" style="stop-color:#204DED"/>			<stop  offset="0.06" style="stop-color:#133CCD"/>			<stop  offset="0.14" style="stop-color:#0B2571"/>			<stop  offset="0.22" style="stop-color:#081A4E"/>			<stop  offset="0.8" style="stop-color:#00081D"/>			<stop  offset="1" style="stop-color:#00081D"/>

Replace 1:

<stop  offset="0" style="stop-color:#5c5c5c"/>            <stop  offset="0.03" style="stop-color:#5d5d5d"/>            <stop  offset="0.06" style="stop-color:#474747"/>            <stop  offset="0.14" style="stop-color:#1e1e1e"/>            <stop  offset="0.22" style="stop-color:#131313"/>            <stop  offset="0.8" style="stop-color:#0e0e0e"/>            <stop  offset="1" style="stop-color:#0e0e0e"/>

 

Search 2:

<stop  offset="0" style="stop-color:#162E74"/>		<stop  offset="1" style="stop-color:#041237;stop-opacity:0"/>

Replace 2:

<stop  offset="0" style="stop-color:#1e1e1e"/>		<stop  offset="1" style="stop-color:#131313;stop-opacity:0"/>

grey.jpg.af3631fc37a64fcbe52e280bf115573a.jpg

 

 

And maybe to change all icons to a gold colour, perform the following three search and replacements:

Search: style="stop-color:#939393"/> Replace: style="stop-color:#aa9b27"/>
Search: style="stop-color:#FFFFFF"/> Replace: style="stop-color:#fae23e"/>
Search: style="stop-color:#D6D6D6"/> Replace: style="stop-color:#e8d029"/>

grey_gold.jpg.56da9b104fd5204a3c763bafc3212350.jpg

 

EDIT: Excuse the dodgy JPEG's but these at least give a visual. :P

 

EDIT2: Just spotted the Manjaro icon does not contain a gradient.

 

EDIT3: Maybe we could look at some Clover colour cycling for effects?....

 

Edited by blackosx
  • Like 1
  • Thanks 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...