Puppy Linux Discussion Forum

[don570]

I've been testing SVG image format for button images.

The main browsers will now load svg images
(see list)

Method: 'echo' command is used to create the svg image.
You should track down the svg image in /tmp to study how it's created.
The button is created by using an input file (the usual method).
Don't use the height and width tags of button widget. There are several
other methods to control the height and width of button widget
such as size of svg image itself.

Here is how a standard button widget is created ...

[don570]

I have begun adding a fifth top row of useful buttons.
Note that a white rectangle (only partially opaque 0.4)
gives a nice shading effect in some themes.

__________________________________________________
Note that in most situations the programmer will keep the width of
the image and the width of the rectangle the same. Here's an example:



_____________________________________________

[don570]

To use a simple stock svg image for a button input file:
(See top fifth row of example for camera svg image)

1) Download a page of free svg icons such as android-native-final
(Chrome browser will save the page in SVG format)
and open with inkscape lite

2) Select one icon and copy to clipboard

3) paste in new inkscape document

4) ctrl-a 'Select all'

5) Drag on corner to resize

6) use magnifier to zoom in

7) Drag icon to upper left corner of document
(document outline is shown by rectangle )

8 ) Save to disk , then open with text editor

9) use clipboard to copy relevant svg description.
Height should be somewhere 20 to 30 .
Make width option just wide enough to show icon.
An svg image can have text as an extra option. Add text if
you wish but width of svg image will have to adjusted as well
as x value in text tag

For Example:

[don570]

New button 3

Improvements:

1) yes.svg and no.svg added to top row

2) countdown button created for timers

3) I changed another button so that it has two rectangles in different colors
(red and white). This gives an interesting effect. (see third row)

4) Bug in third row height was fixed by changing rectangle's y value

______________________________________________________

[don570]

The size of inkscape lite document doesn't matter since there are ways
to set width and height in 'echo' command, however I have found
it useful to set the size in inkscape. Here's an example of the size
being set. The icon has been dragged to upper left hand corner of
document.



_________________________________________________

[don570]

I made some sample 32x32 icons from a large collection of
freeware svg icons that I got from http://d.pr/f/qkDD/download

See first posting for script to download.
Here is what a few look like when i put them in a script.



__________________________________________

[don570]

From a collection of Android svg icons I made a script to test
32x32 buttons I got from here.

The script is available in the first posting. Here is a few of the buttons.



___________________________________________________________

[don570]

I noticed if you are using an older version of gtkdialog i.e. gtkdialoag 3
then you must avoid using the following tags in button widget.
The tags are ignored. The script still runs.

[don570]

I have found a simple method of generating an attractive color button

http://murga-linux.com/puppy/viewtopic.php?p=732417#732417

_________________________________________________________

[mikeb]

You might be interested in scour
http://www.codedread.com/scour/

ok its a python script but I was amazed by how much it reduced the size of some svg graphics I tested. Worth a shot if you have a pile of them.

mike

[don570]

Thanks for tip. I wonder if anchor for textstring is needed.?

_____________________________________________

[mikeb]

Good question but I am a big dummie when it comes to svg so I just grabbed and ran it though it does seem to have a lot of inkscape options

Interesting post on svg usage...I always thought multiple bundles of bitmap icons was a bit clumsy.

mike

[vovchik]

Dear puppians,

To generate heaps of custom tiny svgs, check out my svg factory on the page below. Use the latest (bsvg-0.1d.tar.gz), I think

With kind regards,
vovchik

http://208.109.22.214/puppy/viewtopic.php?t=76431&start=45&sid=a7c2f5af55bf2f49e3cbab48757465d5

[don570]

To vovchik...

A really nice collection.

I dragged files into executable path and fortunately
there is help option.

______________________________________

[technosaurus]

I have a collection of scriptable svg icons built into a shell script for use with SIT (Simple Icon Tray), they are MIT licensed derivatives of the ones from raphael.js