SVG image buttons

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Message
Author
User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

SVG image buttons

#1 Post by 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 ...

Code: Select all

<button yes no ok cancel help tag_attr="value"...>
        <label>text</label>
        <variable>varname</variable>
        <height>value</height>
        <width>value</width>
        <input file>filename</input>
        <input file icon="image"></input>
        <input file stock="gtk-image"></input>
        <sensitive>state</sensitive>
        <action>activity</action>...
        <action signal="type">activity</action>...
        <action function="type">parameter</action>...
</button>
The button looks different if a different gtk theme is used.
I used 'Shallow thought'.

In most case the width of svg image and width of rectangle
(creating shadow effect) should be approx. equal. This is set with the
tag options.

Image

___________________________________________
Attachments
Freecns-2.0.sh.gz
remove fake gz extension
(9.84 KiB) Downloaded 546 times
android-icons.sh.gz
remove fake gz extension
(25.86 KiB) Downloaded 586 times
button3.sh.gz
remove fake gz extension
(22.98 KiB) Downloaded 579 times
Last edited by don570 on Thu 19 Sep 2013, 20:48, edited 10 times in total.

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#2 Post by 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:

Image

_____________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#3 Post by 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:

Code: Select all

<text style="fill:black;stroke:none;font-family:DejaVu;font-style:normal;font-weight:medium;font-size:24;fill-opacity:1;text-anchor:end;writing-mode:lr;"
		x="75" y="20">
		'Text string'
</text>


10) make an echo command , so script will create an svg image

11) make a button that has an input file.
The input file is the svg image that you created with 'echo' command.

Example:

Code: Select all

<input file>/tmp/SVG43.svg</input>
Test button in gtkdialog script.

______________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#4 Post by 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

______________________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#5 Post by 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.

Image

_________________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#6 Post by 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.

Image

__________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#7 Post by 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.

Image

___________________________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#8 Post by 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.

Code: Select all

<height>value</height> 
<width>value</width>
The solution is to use inkscape lite to scale the svg image,
then such tags are not needed.
_____________________________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#9 Post by don570 »

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

http://murga-linux.com/puppy/viewtopic. ... 417#732417

_________________________________________________________
Last edited by don570 on Wed 23 Oct 2013, 19:58, edited 1 time in total.

User avatar
mikeb
Posts: 11297
Joined: Thu 23 Nov 2006, 13:56

#10 Post by 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

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#11 Post by don570 »

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

_____________________________________________

User avatar
mikeb
Posts: 11297
Joined: Thu 23 Nov 2006, 13:56

#12 Post by 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

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#13 Post by 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.p ... 48757465d5

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#14 Post by don570 »

To vovchik...

A really nice collection. 8)

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

______________________________________

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#15 Post by 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
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#16 Post by don570 »

I've been using bsvg program and I find I can get all the icon images
to generate in one folder by running the following script...

For color icons see the built-in help for bsvg

Code: Select all

#!/bin/bash
mkdir -p /tmp/SVGicons

bsvg -i  |  sed '1,/Available/d' >  /tmp/test.tmp

cat /tmp/test.tmp |
while read -r COLUMN1 COLUMN2 COLUMN3 COLUMN4 ;do

cd /tmp/SVGicons/
bsvg  $COLUMN1 
bsvg  $COLUMN2 
bsvg  $COLUMN3 
bsvg  $COLUMN4
done

___________________________________________________


I wrote a SVG-viewer to quickly check the folder of images

http://www.murga-linux.com/puppy/viewto ... 827#733827

___________________________________________________

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#17 Post by vovchik »

Dear Don,

Thanks for using bsvg. I did supply a dump script with the pet, I think, but if not, here it is:

Code: Select all

#!/bin/bash

# *****************************************************
# PROGRAM:	bsvg_gen
# PURPOSE:	to dump all svgs from bsvg library
# AUTHOR:		vovchik (Puppy Linux forum)
# MODDED:		
# DEPENDS:	bash, bsvg
# PLATFORM:	Puppy Linux (actually, any *nix)
# DATE:		25-06-2012
# NOTES:		you can specify fill and stoke colors
# 			ie: bsvg_gen all red black, otherwise
# 			the default of black and grey
# *****************************************************


# ***********************
# FUNCTIONS
# ***********************

# ------------------
function usage()
# ------------------
{
	# show help
	echo
	echo "bsvg_dump generates a dump (in your current directory)"
	echo "of all svgs contained in the bsvg library."
	echo
	echo "Usage:    bsvg_gen dump [fill color] [stroke color]"
	echo "Examples: bsvg_gen dump red black"
	echo "          bsvg_gen dump \"#6c6c6c\" red"
	echo "          bsvg_gen dump none red"
	echo
	echo "Run plain 'bsvg' for help with the color arguments."
	echo
}

# ------------------
function chk_args()
# ------------------
{
	# check user input
	dump="$1"
	case $dump in
		"dump")
			fill="$2"
			stroke="$3"
		;;
		*)
			usage
			exit 1
		;;
	esac
}

# ------------------
function mk_icons()
# ------------------
{
	# generate complete icon set
	# in current working directory
	for f in $(bsvg -I); do
		bsvg "$f" "$fill" "$stroke" 
	done
}

# ***********************
# END FUNCTIONS
# ***********************


# ***********************
# MAIN
# ***********************

chk_args $1 $2 $3
mk_icons
exit 0

# ***********************
# END MAIN
# ***********************
With kind regards,
vovchik

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#18 Post by don570 »

I'll try out your script. I'm working on putting your icons on left side of
button. I'm nearly finished.

Image
Image
Image
_________________________________

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#19 Post by don570 »

I have packaged the free CNS icons to be used
as well.

FreeCNS icons-2.0.pet
Here is some more examples...

Image

Image

Image

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#20 Post by don570 »

Here is script to make the buttons.

Note: All SVG icons MUST be in /usr/share/icons/SVGicons/

First the possible colors...
bsvg -C [lists svg 'named colors' (1 color per line)]
bsvg firefox red pink - [prints to stdout and does not create file]

SVG 'named colors' (148):

aliceblue antiquewhite aqua aquamarine
azure beige bisque black
blanchedalmond blue blueviolet brown
burlywood cadetblue chartreuse chocolate
coral cornflowerblue cornsilk crimson
cyan darkblue darkcyan darkgoldenrod
darkgray darkgreen darkgrey darkkhaki
darkmagenta darkolivegreen darkorange darkorchid
darkred darksalmon darkseagreen darkslateblue
darkslategray darkslategrey darkturquoise darkviolet
deeppink deepskyblue dimgray dimgrey
dodgerblue firebrick floralwhite forestgreen
fuchsia gainsboro ghostwhite gold
goldenrod gray green greenyellow
grey honeydew hotpink indianred
indigo ivory khaki lavender
lavenderblush lawngreen lemonchiffon lightblue
lightcoral lightcyan lightgoldenrodyello lightgray
lightgreen lightgrey lightpink lightsalmon
lightseagreen lightskyblue lightslategray lightslategrey
lightsteelblue lightyellow lime limegreen
linen magenta maroon mediumaquamarine
mediumblue mediumorchid mediumpurple mediumseagreen
mediumslateblue mediumspringgreen mediumturquoise mediumvioletred
midnightblue mintcream mistyrose moccasin
navajowhite navy oldlace olive
olivedrab orange orangered orchid
palegoldenrod palegreen paleturquoise palevioletred
papayawhip peachpuff peru pink
plum powderblue purple red
rosybrown royalblue saddlebrown salmon
sandybrown seagreen seashell sienna
silver skyblue slateblue slategray
slategrey snow springgreen steelblue
tan teal thistle tomato
turquoise violet wheat white
whitesmoke yellow yellowgreen none


Here is example of using script...

Code: Select all

./button-svg.sh DejaVu 10  "Forward" .4 magenta 2 black  Forward2.svg white  "#00FG00"
Attachments
button-svg.gz
remove fake .gz extension
(2.76 KiB) Downloaded 389 times
Last edited by don570 on Mon 11 Nov 2013, 21:25, edited 2 times in total.

Post Reply