SVG image buttons
you will just exit if there is no existing folder
/usr/share/icons/SVGicons/
______________________________________________________
To use the script without an icon, don't put in icon name. Example...
or just put 'none' as your icon.
If you misspell the icon name then no icon will show on left side of button.
__________________________________________________________
/usr/share/icons/SVGicons/
______________________________________________________
To use the script without an icon, don't put in icon name. Example...
Code: Select all
./button-svg.sh DejaVu 10 "Forward" .4 magenta 2 black
If you misspell the icon name then no icon will show on left side of button.
__________________________________________________________
I put all the svg icons in one easy to download and install package.
vovchik's icons were generated with black and red (optional colors)
See several posts below for download of pet package
of compatible icons.
I recommend that for dark colors like black,blue etc , use opacity =0.1
If you want a grey rectangle then try the color 'white'
and opacity high(=0.7)
Another example...
_____________________________________________
vovchik's icons were generated with black and red (optional colors)
See several posts below for download of pet package
of compatible icons.
I recommend that for dark colors like black,blue etc , use opacity =0.1
If you want a grey rectangle then try the color 'white'
and opacity high(=0.7)
Another example...
Code: Select all
./button-svg.sh DejaVu 10 "No" .2 teal 2 black LightBulb.svg white black
_____________________________________________
Last edited by don570 on Thu 14 Nov 2013, 00:51, edited 2 times in total.
I have found a method to create compatible SVG image icons that
can be used in my buttons.
Just download the package below and read the ReadMe file.
Instructions to make your own compatible SVG icon...
-install script 'button-svg.sh' found in icon_creation.tar.gz package.
Make sure it is executable.
-create image with inkscape(lite) using template.svg as a template.
It's very important to use template.svg since this affects the size.
Stay well inside border lines of document frame.(see inkscapelite-example.png)
-save to disk. Open template.svg file with texteditor.
Remove section(s) which describe paths,polygons,rectangles.
Place these code lines in the my_image.svg file.(see help-image.png)
-save the file with an extension .svg
in the folder /usr/share/icons/SVGicons/
You may check to see if it will open properly with mtpaint or inkscape(lite)
(see Screenshot.png for image of the final button)
Notes:
The name of icon mustn't have spaces in it.
Inkscapelite has a bug with forming a circle with a stroked
edge.
- run the script example:
button-svg.sh DejaVu 10 "No" .2 blue 2 black my_image.svg black white
Explanation of parameters:
# ${1} font-family example: DejaVu, Sans or Times
# ${2} round corners - recommend 0 to 15 - 0 is square corner
# ${3} quoted textstring
# ${4} opacity of rectangle - set low for dark colors
# ${5} rectangle color - quoted hex or English word ---> bsvg -c
# ${6} stroke width -normally 2 - set to zero if no border stroke is desired
STROKECOLOR=${7} - normally black
ICON_NAME=${8} - fill in name (if 'none' then no icon will show)
ICON_FILL_COLOR=${9}
ICON_STROKE_COLOR=${10}
____________________________________________________
can be used in my buttons.
Just download the package below and read the ReadMe file.
Instructions to make your own compatible SVG icon...
-install script 'button-svg.sh' found in icon_creation.tar.gz package.
Make sure it is executable.
-create image with inkscape(lite) using template.svg as a template.
It's very important to use template.svg since this affects the size.
Stay well inside border lines of document frame.(see inkscapelite-example.png)
-save to disk. Open template.svg file with texteditor.
Remove section(s) which describe paths,polygons,rectangles.
Place these code lines in the my_image.svg file.(see help-image.png)
-save the file with an extension .svg
in the folder /usr/share/icons/SVGicons/
You may check to see if it will open properly with mtpaint or inkscape(lite)
(see Screenshot.png for image of the final button)
Notes:
The name of icon mustn't have spaces in it.
Inkscapelite has a bug with forming a circle with a stroked
edge.
- run the script example:
button-svg.sh DejaVu 10 "No" .2 blue 2 black my_image.svg black white
Explanation of parameters:
# ${1} font-family example: DejaVu, Sans or Times
# ${2} round corners - recommend 0 to 15 - 0 is square corner
# ${3} quoted textstring
# ${4} opacity of rectangle - set low for dark colors
# ${5} rectangle color - quoted hex or English word ---> bsvg -c
# ${6} stroke width -normally 2 - set to zero if no border stroke is desired
STROKECOLOR=${7} - normally black
ICON_NAME=${8} - fill in name (if 'none' then no icon will show)
ICON_FILL_COLOR=${9}
ICON_STROKE_COLOR=${10}
____________________________________________________
- Attachments
-
- icon_creation.tar.gz
- script and templates to make compatible SVG image icons.
- (50.08 KiB) Downloaded 345 times
I have new 'compatible SVG icons package'. I added a new icon
'alarmclock.svg' that I made using inkscape in Ubuntu.
(Warning ! Gradients should be avoided in the making of svg icon)
Here is command line that generated the button
________________________________________________
'alarmclock.svg' that I made using inkscape in Ubuntu.
(Warning ! Gradients should be avoided in the making of svg icon)
Here is command line that generated the button
Code: Select all
button-svg.sh DejaVu 10 "My Alarm" .2 teal 2 black alarmclock.svg white black
________________________________________________
I added 13 additional icons in version 1.2 of compatible SVG icons.
Note when making compatible icons--->
Do not use gradients or grouping of objects.
Use full program Inkscape rather than Inkscapelite
since there is a lot more features.
__________________________________________
Code: Select all
alarmclock2.svg
clock.svg
delete.svg
envelop.svg
eye.svg
floppy.svg
letter.svg
padlock.svg
paperclip.svg
picture2.svg
speaker.svg
suitcase.svg
warning2.svg
Note when making compatible icons--->
Do not use gradients or grouping of objects.
Use full program Inkscape rather than Inkscapelite
since there is a lot more features.
__________________________________________
Here is collection of SVG icons to use for practice.
- Attachments
-
- compatible-SVGicons-1.2.tar.gz
- freeware svg icons
- (247.72 KiB) Downloaded 189 times
Last edited by don570 on Sat 23 Jul 2016, 19:21, edited 1 time in total.
- technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
Some of us have been making Public Domain svg icons fior use in themes (mostly single svg paths that can be layered) and I created a tool to build them with a unified theme (requires a bit of shell scripting if you want to generate all of them). Ahyhow they are
here There is quite a collection now.
You can/should ignore the most recent posts that involve using svg paths for text - that is something I wanted to have for nanosvg and libsvgtiny, neither of which handle <text> tags. It also ensures that my crappy font looks just as crappy from one SVG engine to the next regardless of its builtin or loaded font.
here There is quite a collection now.
You can/should ignore the most recent posts that involve using svg paths for text - that is something I wanted to have for nanosvg and libsvgtiny, neither of which handle <text> tags. It also ensures that my crappy font looks just as crappy from one SVG engine to the next regardless of its builtin or loaded font.
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].