SVG/PNG Wallpaper Maker

Window managers, icon programs, widgets, etc.
Message
Author
User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#41 Post by solo »

smokey01 wrote:This is pretty standard code for svg but it doesn't work in your app.

Code: Select all

<svg width="96" height="96">
  <circle cx="50" cy="50" r="40" stroke="#444" stroke-width="3" fill="none" />
</svg>
Smokey, very simply put, you execute the following steps:

1. Create a geometric figure in Inkscape and/or Inkscape Lite.
2. Select the figure and go to -Path- and select -Object to Path-.
3. You can modify and add figures, but make sure any geometric objects will be converted to Paths like the previous step.
4. Once you are done with your design, go to -Path- once again, and select -Combine-. This will convert your design into a single path.
5. Save as svg.
6. Go to this website: https://jakearchibald.github.io/svgomg/, and enter your svg design. The output will be removed of all unneccessary bloat that Inkscape tends to create, so you'll get an optimized svg.
7. That's it! :)

Now, of course, it is not as simple as that. Sometimes there are unexpected results with this method, particularly when you work with fills. How a fill behaves depends a lot on what the start and end point of your path is. Sometimes it helps to redraw a path the same way, but with the start and end point reversed.
It sounds strange, but there it is.
Also, combining paths to one single path has consequences for your fills.


Hope this helps!

User avatar
smokey01
Posts: 2813
Joined: Sat 30 Dec 2006, 23:15
Location: South Australia :-(
Contact:

#42 Post by smokey01 »

What I'm actually trying to do is convert a png to svg that will work in wallmaker as a stamp. Attached is the png.
Attachments
fatdog64.png
change this to svg
(28.55 KiB) Downloaded 416 times

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#43 Post by trio »

Smokey,

Well that does not look simple. I wonder if someone is able to pack it to a single path and share it here

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#44 Post by solo »

It's not too difficult.

I took a shot at it, and I came up with this

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="254" height="204">
<path d="M88.5 6.997c9-2 20.74-4 38-4 45 0 65.38 9.533 88 26 5.655 4.117 14.507 12.66 19 17 8-16.5-5-30-27-30 27-28 61 18.5 38 47 6.325 11.387 7 18.436 7 31 0 6-1 10-2 14-5 32.5-14 87-21 91-9 5-34 5-34-4 4-7 9-17 9-29-15 8-24 12-41 15-1 4-1 9-6 12-10 4-36 3-36-4l1-4c-8-.5 2 0-11-1-2 7-4 13-8 15-12 6-33 4-33-4 2.5-5.5 5-10 5-18-7-2-9-3-16-7 0 6 1 12-2 18-5 5-39 8-39 0 7-8 16-16-3-55-7-11-13-26.435-13-39 0-6.282 1-13 5-25-4-5-5-11-5-16 0-7 9-16 18-21 1-1 1-1 2-3 0 0-10-4-10-9 0-10 17-18 25-18s17 7 17 7c7-2 13.578-3 22-3 4.21 0 9.03.4 13 1m13 3c19-16 44-2 44 10 0 5-12 14-18 14-4 0-6-15-19-15m28 32c0 24.853-27.31 45-61 45-19 0-28-2-39-6m22 80c-8-4-14-7-20-12m36 19c0-9-2-17-7-26m43 33c2-10 3-17 3-26m8 27c16 0 24-1 41-4m41-15c8-6 15-12 21-20m20-83c-4-8-6-11-11-17m-212-17c8-10 19-15 32-20m36 24l12 10-17-9zm-70-1c9-4 19.644-5.99 33-5 10 1 19 3 27 7m31 29c-49 50-124 0-54-29m-29 29c0 10-14 17-21 6m31-36l20 1-16 5zm2 3l10-1m6 49c-9 3-26 12-33 3-5-9 0-11 11-14m-27-1c4 5 8 8 15 10m-9-6l18-5-13 9zm3 2l13-9m16 19c25 2 47 0 66-25m-60 23c17 2 29-2 41-8m-69-50h10" fill="#fff" stroke="#000" stroke-width="3"/>
</svg>
The problem with a single path svg, is that you are limited to only one fill color, because there's only one object.

I could've optimized it a lot further by making sure every node handler was snapped to a grid point, which eliminates all these decimal values you are seeing, but oh well, short notice and all.

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#45 Post by trio »

Thats great solo. But can you please make a real 96x96 path? To be uniformed with other stamps. Thx

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#46 Post by solo »

That is going to be a bit difficult Trio. The logo itself, as you can see, is not square.
I could try and fit it in a 96x96 grid, but then the line thickness would have to be 1.

I will be while....

Okay, quick and dirty:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M34.876 16.124c3.09-.687 7.123-1.374 13.05-1.374 15.453 0 22.45 3.273 30.22 8.93 1.942 1.412 4.98 4.346 6.524 5.836 2.748-5.666-1.717-10.302-9.272-10.302 9.272-9.615 20.948 6.353 13.05 16.14 2.172 3.91 2.404 6.33 2.404 10.646 0 2.06-.344 3.434-.687 4.808-1.717 11.16-4.808 29.876-7.212 31.25-3.09 1.717-11.676 1.717-11.676-1.374 1.374-2.404 3.09-5.838 3.09-9.96-5.15 2.75-8.24 4.122-14.08 5.152-.342 1.374-.342 3.09-2.06 4.12-3.433 1.375-12.362 1.032-12.362-1.372l.344-1.374c-2.748-.172.686 0-3.78-.343-.686 2.403-1.372 4.464-2.746 5.15-4.12 2.06-11.332 1.374-11.332-1.373.858-1.89 1.717-3.434 1.717-6.18-2.405-.688-3.092-1.03-5.496-2.405 0 2.06.344 4.12-.687 6.18-1.717 1.717-13.392 2.748-13.392 0 2.403-2.747 5.494-5.494-1.03-18.887C7.06 55.615 5 50.315 5 46c0-2.157.343-4.464 1.717-8.585C5.343 35.698 5 33.637 5 31.92c0-2.404 3.09-5.494 6.18-7.21.345-.345.345-.345.688-1.03 0 0-3.434-1.375-3.434-3.092 0-3.434 5.838-6.18 8.585-6.18 2.746 0 5.837 2.402 5.837 2.402 2.404-.686 4.663-1.03 7.555-1.03 1.446 0 3.1.138 4.464.344m4.465 1.03c6.525-5.495 15.11-.687 15.11 3.434 0 1.717-4.12 4.808-6.18 4.808-1.374 0-2.06-5.152-6.526-5.152m9.616 10.99c0 8.534-9.38 15.453-20.948 15.453-6.525 0-9.615-.687-13.393-2.06m7.554 27.472c-2.747-1.375-4.808-2.405-6.868-4.122m12.363 6.525c0-3.09-.688-5.838-2.405-8.93M42.43 76.908c.688-3.434 1.032-5.838 1.032-8.93m2.747 9.273c5.493 0 8.24-.343 14.078-1.374m14.08-5.15c2.747-2.06 5.15-4.122 7.212-6.87m6.868-28.502c-1.374-2.747-2.06-3.777-3.778-5.838M11.868 23.68c2.747-3.436 6.525-5.153 10.99-6.87m12.362 8.242l4.12 3.434-5.837-3.09zm-24.04-.343c3.092-1.375 6.747-2.058 11.334-1.718 3.434.343 6.524 1.03 9.272 2.404m10.645 9.958c-16.826 17.17-42.58 0-18.543-9.958m-9.958 9.958c0 3.434-4.81 5.838-7.213 2.06m10.646-12.362l6.868.344-5.494 1.717zm.686 1.03l3.434-.343m2.06 16.826c-3.09 1.03-8.93 4.12-11.332 1.03-1.717-3.09 0-3.777 3.777-4.808m-9.273-.343c1.374 1.717 2.747 2.747 5.15 3.434m-3.09-2.06L14.96 38.1l-4.465 3.09zm1.03.686l4.465-3.09m5.494 6.524c8.586.686 16.14 0 22.665-8.586m-20.603 7.9c5.838.686 9.96-.688 14.08-2.748m-23.695-17.17h3.434" fill="#fff" stroke="#000"/>
</svg>
As you can see, not exactly optimized.

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#47 Post by solo »

Still not completely optimized, but a whole lot smaller.

You have to understand, the more complex a design is the more gridpoints you need to snap the nodes and nodehandlers to, if you want good optimization and good accuracy.
One gives way to the other in any other circumstance.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M28 66c2 3 2 5 2 8m13-6c1 4 1 5 0 9M13 23h4m4.827 20.253c5.838.687 9.96-.687 14.08-2.747m-16.14 3.434C28.35 44.626 35 44 42 35m-32 6l5-4m-6 3l6-2-4 3zm-3-3c1 2 3 4 5 5m12.544.566C20.454 43.596 15 47 12 44c-2-3 0-4 4-5m3-13h3m-4-1h6l-5 2zm-4 10c0 4-5 6-8 2m36-2C25 53 0 35 24 25m-13 0c7-3 14-3 21 0m3-1l4 4-7-3zm-23 0c3-3 6-5 11-7m65 18c-2-3-3-5-4-6M74 71c3-2 5-4 7-7M46 77c5.494 0 8 0 14-1m-36-4c-2-1-4-2-6-4m33-37c0 9-10 16-21 16-6 0-9 0-13-2m22-28c6-5 16 0 16 4 0 2-5 4-7 4s-1-5-6-5m6-5c17 1 25 3 36 14 3-6 0-10-8-10 9-10 20 6 12 16 2 4 3 6.685 3 11 0 8-4.713 33.15-8 36-3 2-12 2-12-1 2-3 3-6 3-10-5 3-8 4-14 5 0 2 0 3-2 4-3 1-11.96 1.987-12-1v-2h-3c-1 3-1 4-3 5-4 2-12 2-12-1 1-2 2-4 2-7-3-1-3.596-.626-6-2 1 2 1 4 0 6-2 2-13 4-13 1 2-3 4-7-2-20-2-3-4-8-4-13 0-2-.374-4.88 1-9-1-2-1-3-1-5 0-3 3.18-5.21 6.18-7.21 1-1 .82-.79.82-.79s-3-1-3-3c0-4 5-7 8-7s6 3 6 3c4-1 6.143-.81 7.143-.81S34 16 35 16c4-1 7-1 13-1zM38 27l-4-2" fill="#fc0" stroke="#000"/>
</svg>

User avatar
smokey01
Posts: 2813
Joined: Sat 30 Dec 2006, 23:15
Location: South Australia :-(
Contact:

#48 Post by smokey01 »

Thanks solo but it didn't work here and it's a bit mangled. This is what I was getting as well.

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#49 Post by trio »

Thanks solo, I modded a little to suit wallmaker

Smokey, this one is for you (and other fatdog users)

edited: using new below from solo
Attachments
Screenshot(5).jpg
(55.96 KiB) Downloaded 434 times
fatdog_stamp_too.pet
(858 Bytes) Downloaded 306 times
Last edited by trio on Tue 26 Jul 2016, 12:23, edited 1 time in total.

User avatar
smokey01
Posts: 2813
Joined: Sat 30 Dec 2006, 23:15
Location: South Australia :-(
Contact:

#50 Post by smokey01 »

Thanks trio and solo. I actually made a triangle that works in wallmaker so I'm getting the hang of it.

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#51 Post by trio »

Note: it is weird how svg look different or rather ugly when set as wallpaper, but some look right. Guess you have to play mix and match

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#52 Post by solo »

Trio, is the line thickness of 3 a hard requirement as well? And fills are not possible?

P.S: Fatdog looks pretty good, apart from the tail. I'll post another version today.

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#53 Post by trio »

solo wrote:Trio, is the line thickness of 3 a hard requirement as well? And fills are not possible?

P.S: Fatdog looks pretty good, apart from the tail. I'll post another version today.
For now yes. They are parameters that i sed in order to extract the path "d" only to paste the stamp to picture

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#54 Post by solo »

Okay, that's good to know.

Here's my revised version. A line thickness of 3 means the design becomes more simple in structure. That is to say that some lines that are used as filler are no longer needed. So the bonus is that the fatdog logo is now less than 1Kb in size.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M18 26l6 1-7 2zm-7-1c7-3 14-3 21 0m3-1l4 4-7-3zm7 11c-17 18-40 1-20-8m-8 8c0 4-5 6-8 2m42-22c17 1 25 3 36 14 3-6 0-10-8-10 9-10 20 6 12 16 2 4 3 7 3 11 0 8-5 33-8 36-3 2-12 2-12-1 2-3 3-6 3-10-5 3-8 4-14 5 0 2 0 3-2 4-3 1-12 2-12-1v-2h-3c-1 3-1 4-3 5-4 2-12 2-12-1 1-2 2-4 2-7-3-1-3.596-.626-6-2 1 2 1 4 0 6-2 2-13 4-13 1 2-3 4-7-2-20-2-3-4-8-4-13 0-2 0-5 1-9-1-2-1-3-1-5 0-3 3-5 6-7l1-1s-3-1-3-3c0-4 5-7 8-7s6 3 6 3c4-1 6-1 7-1h5c4-1 7-1 13-1zm-9 2c6-5 16 0 16 4 0 2-5 4-7 4s-1-5-6-5m9 11c0 9-10 16-21 16-6 0-9 0-13-2m7 27c-2-1-4-2-6-4m28 9c5 0 8 0 14-1m14-5c3-2 5-4 7-7m7-29c-2-3-3-5-4-6m-72-5c3-3 6-5 11-7m0 26c-3 1-8 4-11 1-2-3 0-4 4-5M6 37c1 2 3 4 5 5m-1-1l5-4m5 7c8 0 15 0 22-9m1 33c1 4 1 5 0 9M28 66c2 3 2 5 2 8" fill="none" stroke="#000" stroke-width="3"/>
</svg>

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#55 Post by solo »

Here's a little bonus stamp:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M68 21c0-3-1-6-3-8m0 29v-5m3 8V17m3 31V23m6 43l-5-30m16 21l-18-9M28 21c0-3 1-6 3-8m0 29v-5m-3 8V17m-3 31V23m-6 43l5-30M8 57l18-9m15-8l7 7 7-7c-3-3-11-3-14 0zm9.5-8c0 1.105-.224 2-.5 2s-.5-.895-.5-2 .224-2 .5-2 .5.895.5 2zm-3.5-.5c0 1.38-.448 2.5-1 2.5s-1-1.12-1-2.5.448-2.5 1-2.5 1 1.12 1 2.5zM74 67c0-7 1-19-13-28 4-1 6-4 6-8.5 0-5.247-4.477-8.5-10-8.5-2.935.033-7 1-9 4-1-4-3.872-7.453-9-8-4.97 0-10 5.373-10 12 .046 3.24 1.764 7.72 5 10-10 6-12 16-12 27m52-25c4 7 15 11 15 17 0 2-9-6-12-4M22 42C18 49 7 53 7 59c0 2 9-6 12-4m60 33c3-2 0-12-13-12-10 0-17 9-12 12zm-61 0c-3-2 0-12 13-12 10 0 17 9 12 12zm8-11c-5.43-5.43-8-11.716-8-20 0-11 6-16 6-27C24 16 35 6 48 6s24 10 24 24c0 11 6 16 6 27 0 8.284-2 15-7 20M53 87h-8" fill="none" stroke="#000" stroke-width="3"/>
</svg>

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#56 Post by trio »

For testing, new TEXT effect, REFLECTION

deleted, see main post
Attachments
Screenshot(6).jpg
(31.53 KiB) Downloaded 171 times
Last edited by trio on Wed 27 Jul 2016, 01:44, edited 1 time in total.

User avatar
BarryK
Puppy Master
Posts: 9392
Joined: Mon 09 May 2005, 09:23
Location: Perth, Western Australia
Contact:

#57 Post by BarryK »

trio,
Great stuff!

I have added it to Quirky:
http://barryk.org/news/?viewDetailed=00385

However, Quirky currently cannot display svg as wallpaper, also does not have 'wallpaper' executable.

Could you add a check, maybe test if 'wallpaper' missing, if so, convert to png, like this:

rsvg-convert -f png -o wallpaper327.png wallpaper327.svg

Another problem is that it only creates a widescreen image.
Many users do not have wide screens.

Puppy will truncate top and bottom of an image to suit a wide screen, so if you are only going to create one size image, best to make it 4:3, as here:
https://en.wikipedia.org/wiki/Display_resolution

Or, add a selection of aspect ratio or screen dimensions.
[url]https://bkhome.org/news/[/url]

User avatar
BarryK
Puppy Master
Posts: 9392
Joined: Mon 09 May 2005, 09:23
Location: Perth, Western Australia
Contact:

#58 Post by BarryK »

One more thing, while I think of it:

The SVG wallpaper does not display correctly in Inkscapelite.

Is that unavoidable, or can the svg file be modified to be Inkscapelite compatible?
[url]https://bkhome.org/news/[/url]

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#59 Post by trio »

V 1.8.4: New Text filter effect: Reflection

User avatar
trio
Posts: 2076
Joined: Sun 21 Dec 2008, 15:50
Location: अनà¥￾मोदना

#60 Post by trio »

BarryK wrote: rsvg-convert -f png -o wallpaper327.png wallpaper327.svg
Haha ... I did not know this command exist, I'll play a while with it and incorporate it, thanks!!!
As for the check of wallpaper executable, what's the equivalent in quirky if the check fails?
BarryK wrote:Another problem is that it only creates a widescreen image.
Many users do not have wide screens.
No Barry, it will create as xwininfo reports it.
Barry K wrote:The SVG wallpaper does not display correctly in Inkscapelite.
Yes, and I don't know why

Now I am just sorry I don't have a 64bit computer :D

Post Reply