Page 3 of 6
Posted: Mon 25 Jul 2016, 10:23
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!
Posted: Mon 25 Jul 2016, 10:44
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.
Posted: Mon 25 Jul 2016, 15:26
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
Posted: Mon 25 Jul 2016, 17:51
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.
Posted: Mon 25 Jul 2016, 18:01
by trio
Thats great solo. But can you please make a real 96x96 path? To be uniformed with other stamps. Thx
Posted: Mon 25 Jul 2016, 18:13
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.
Posted: Mon 25 Jul 2016, 19:37
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>
Posted: Mon 25 Jul 2016, 19:40
by smokey01
Thanks solo but it didn't work here and it's a bit mangled. This is what I was getting as well.
Posted: Tue 26 Jul 2016, 05:05
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
Posted: Tue 26 Jul 2016, 06:28
by smokey01
Thanks trio and solo. I actually made a triangle that works in wallmaker so I'm getting the hang of it.
Posted: Tue 26 Jul 2016, 09:15
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
Posted: Tue 26 Jul 2016, 09:45
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.
Posted: Tue 26 Jul 2016, 09:58
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
Posted: Tue 26 Jul 2016, 10:24
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>
Posted: Tue 26 Jul 2016, 17:49
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>
Posted: Tue 26 Jul 2016, 17:56
by trio
For testing, new TEXT effect, REFLECTION
deleted, see main post
Posted: Wed 27 Jul 2016, 00:41
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.
Posted: Wed 27 Jul 2016, 00:43
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?
Posted: Wed 27 Jul 2016, 01:23
by trio
V 1.8.4: New Text filter effect: Reflection
Posted: Wed 27 Jul 2016, 01:32
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
