Is anyone able to make some SVG icons for skin_default?

[Huevos]

As per the title: Is anyone able to make some SVG icons for skin_default?

To start with we need to recreate the ones in skin_1080_fallback folder.
https://github.com/oe-alliance/oe-alliance-e2-skindefault/tree/scalable/skin_fallback_1080

[gws]

I have converted one to see if that is what you need.

[simonc]

Thanks, what we're really after is an SVG that scales nicely to any resolution, so it needs to be converted to a bunch of shapes rather than embedding the PNG inside the SVG. It's a rather involved task compared to saving as SVG!

[Huevos]

Thanks for the reply. What I was really asking is if anyone would like to recreate these from scratch.

[BrokenUnusableAccount]

Would this be good enough?
61960

[Huevos]

Would this be good enough?
61960Thanks.

1) The viewport would need to be the same size as the icon in skin_default. i.e. the icon replaces the one in skin_default. i.e. if skin_fallback_1080 is deleted enigma would load the svg graphic stored in skin_default at the viewport sizes of skin_default. In the case of this graphic 53x53 and enigma scales it up on loading.

2) Your graphic doesn't seem to be compatible with nanosvg (the handler built into the image). So if you replace a PNG with an SVG in skin default then switch skins to skin default your SVG should display. I'm not sure how much SVG functionality has filtered down to the release image yet but I think it is there.

In the attached image you can see your graphic only partially displays.

[Huevos]

I have a feeling that Brian's graphic is SVG 1.1 and nanosvg is 1.0.

[BrokenUnusableAccount]

Ugh. Lots of software seems to assume you don't care much about the size or viewport :mad:

Anyone know anything about inkscape?
Would that be better maybe?

[Huevos]

What did you use to create that?

When enigma loads an image from within the python code the image size is normally not specified.


self.bg = LoadPixmap(path=resolveFilename(SCOPE_CURRENT_SKIN , "buttons/vkey_bg.png"))

With a png those dimensions come from the number of pixels in the png file. With svg it comes from the viewbox.


<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">

Give inkscape a try and test your output directly in enigma.

[BrokenUnusableAccount]

What did you use to create that?

The one I uploaded was done in Serif Affinity Designer because I'd used it a bit before.

It always adds at least one pixel to the viewport beyond the right and bottom of the image.
But maybe that wouldn't matter as long as the actual image was the correct size.

I'm still not sure why nanosvg wouldn't show the gradient fill.
I will try and test with the fill at right angles instead of skewed slightly at 100°.

[Huevos]

The one I uploaded was done in Serif Affinity Designer because I'd used it a bit before.

It always adds at least one pixel to the viewport beyond the right and bottom of the image.
But maybe that wouldn't matter as long as the actual image was the correct size.

I'm still not sure why nanosvg wouldn't show the gradient fill.
I will try and test with the fill at right angles instead of skewed slightly at 100°.The graphic looks good. Pity it doesn't work.

Here is an example of a graphic that does work.


<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="62.726" cy="20.066" r="67.5" id="gradient-0" gradientTransform="matrix(-0.007907, 0.213293, -7.201185, -0.266949, 214.598154, 10.458818)">
<stop offset="0" style="stop-color: rgb(182, 40, 40);"/>
<stop offset="1" style="stop-color: rgb(116, 2, 2);"/>
</radialGradient>
</defs>
<rect style="fill: url(#gradient-0);" width="135" height="33" rx="6" ry="6" x="2.5" y="3.5"/>
</svg>

[gws]

I have done a test with Inkscape,see if it is useful. I have no idea how to test with enigma...
In Inkscape the default svg is not scaleable, you need to remove the height and width parameters in the xml file to make it responsive.

[Huevos]

For some reason that doesn't remain circular. Apart from that it seems to work.

[BrokenUnusableAccount]

Here is an example of a graphic that does work.


<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="62.726" cy="20.066" r="67.5" id="gradient-0" gradientTransform="matrix(-0.007907, 0.213293, -7.201185, -0.266949, 214.598154, 10.458818)">
<stop offset="0" style="stop-color: rgb(182, 40, 40);"/>
<stop offset="1" style="stop-color: rgb(116, 2, 2);"/>
</radialGradient>
</defs>
<rect style="fill: url(#gradient-0);" width="135" height="33" rx="6" ry="6" x="2.5" y="3.5"/>
</svg>

What created that?
It's mostly very straightforward and simple compared with what comes out of any of the software I've been trying to use for this?

[Huevos]

What created that?
It's mostly very straightforward and simple compared with what comes out of any of the software I've been trying to use for this?

Taapat made them. I think they were made on "Boxy SVG (https://boxy-svg.com/)". I will ask.

The attached file is definitely from "Boxy SVG".

There are other simple SVGs added to skin_default here: https://github.com/oe-alliance/oe-alliance-e2-skindefault/commit/b29a1fd9d1fe5a9cd5c8eec04e68455baca697ba

[Huevos]

He says Boxy SVG on Ubuntu. He is already a user of AutoCad and MS Visio and the transition was easy.

That is for simple images. More complicate ones come from google searches of "free svg graphics" and get tweaked in Boxy. Afterwards open in a text editor and tweak the dimensions, and remove any fluff that doesn't serve any purpose.

[Huevos]

No new developments here?