Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Mon 18 Dec 2017, 03:31
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
optimizing svg paths for generating themes
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 6 [83 Posts]   Goto page: 1, 2, 3, 4, 5, 6 Next
Author Message
technosaurus


Joined: 18 May 2008
Posts: 4764
Location: Kingwood, TX

PostPosted: Tue 17 Nov 2015, 03:24    Post subject:  optimizing svg paths for generating themes  

I have a bunch of them in another thread, but I still need to convert them to native 96x96 images (most common icon sizes are evenly divisible into 96)

screwdriver_handle="50 44Q56 41 59 45L93 79Q93 93 79 93L44 58Q41 54 45 49"
flat_head="49 45L15 10Q8 1 5 0L0 5Q1 8 10 15L45 49"

these are designed to build an svg image quickly using only a printf()

here is a shell example (c would be similar)
Code:
#!/bin/sh
screwdriver_handle="50 44Q56 41 59 45L93 79Q93 93 79 93L44 58Q41 54 45 49"
flat_head="49 45L15 10Q8 1 5 0L0 5Q1 8 10 15L45 49"


addpath(){ ###### $1=svg-path, $2=fill color, $3=stroke color
   echo "<path fill='${2:-#777}' stroke='${3:-#000}' d='M${1}z'/>"
}

startSVG(){ ###### $1=width and height in pixels
   echo "<svg width='${1:-96}px' height='${1:-96}px' viewBox='0 0 96 96'>"
}

endSVG(){
   echo "</svg>"
}

startSVG 48 > screwit.svg
addpath "$screwdriver_handle" red black >> screwit.svg
addpath "$flat_head" "#777" "#000" >> screwit.svg
endSVG >> screwit.svg

Google uses some really crappy looking colors in their new "material design" theme
https://www.google.com/design/spec/style/color.html#color-ui-color-application
I preferred google's previous icons or plain flat icons for mobile, but the good old Tango icons work great with puppy
Here are the colors in the tango icon theme:

But when indexed by mtpaint to account for alpha, these became
Code:
#2E487A, #32383D, #40649B, #436E10, #4D2609, #5A5A59, #60AA15, #6183B1
#795715, #7A7A7A, #83AB47, #87A6CC, #8C8E8A, #9B1C18, #9F9E9C, #AB7422
#B0D181, #B7B8B6, #BA9F49, #C8CED4, #CA0E09, #D1B810, #DE3630, #DFE0E0
#E86D6B, #EA901E, #EEC854, #F0F0EF, #F3DA81, #F6EABC, #FDFDFD

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
technosaurus


Joined: 18 May 2008
Posts: 4764
Location: Kingwood, TX

PostPosted: Tue 17 Nov 2015, 03:26    Post subject:  

I am using this little webpage that I threw together to draw them mathematically (just save it to an html file) ... most of the paths inside are updated too
Code:
<html>
<head>
<style>
   body, body *{padding:0px;margin:0px;}
   table{table-layout:fixed;height:100%;width:100%}
   td{height:100%;width:50%}
   td div{float:left}
   textarea{height:90%;width:100%;}
   path:hover{stroke-width:1px;stroke:#eee}
</style>
</head>
<body>
<table>
<tr>
<td>
   <div onclick="addPath()">
   <svg id="thumb" title="click to append" width="24px" height="24px" viewBox="0 0 96 96" />
   </div>
   path: <select id="select" onchange="setThumb()" ></select>
   color: <input id="color" onchange="setThumb()" type="color" ></input>
   pos: <b id="pos"></b>
   <textarea name="raw" oninput="setSVG()" id="raw">
<path fill="#eee" d="M2 0V96h1V0M8 0V96h1V0M14 0V96h1V0M20 0V96h1V0M26 0V96h1V0M32 0V96h1V0M38 0V96h1V0M44 0V96h1V0M50 0V96h1V0M56 0V96h1V0M62 0V96h1V0M68 0V96h1V0M74 0V96h1V0M80 0V96h1V0M86 0V96h1V0M92 0V96h1V0M0 2H96v1H0M0 8H96v1H0M0 14H96v1H0M0 20H96v1H0M0 26H96v1H0M0 32H96v1H0M0 38H96v1H0M0 44H96v1H0M0 50H96v1H0M0 56H96v1H0M0 62H96v1H0M0 68H96v1H0M0 74H96v1H0M0 80H96v1H0M0 86H96v1H0M0 92H96v1H0"/>
   </textarea>
</td>
<td onmousemove="showpos(this,event)" onclick="setpos(this,event)">
   <svg title="tooltip" id="svg" width="100%" height="100%" viewBox="0 0 96 96" />
</td></tr>
</table>

<script>
   var last,raw=document.getElementById("raw"),
      svg=document.getElementById("svg"),
      select=document.getElementById("select"),
      thumb=document.getElementById("thumb"),
      color=document.getElementById("color"),
   viewbox = svg.getAttribute("viewBox").split(" "),
   vbstyle=getComputedStyle(svg,null),
   vbw=parseInt(vbstyle.getPropertyValue("width"),10)/viewbox[2],
   vbh=parseInt(vbstyle.getPropertyValue("height"),10)/viewbox[3],
   paths= {
"bottom-down-arrow":"0 48H96L48 96",
"bottom-up-arrow":"0 96H96L48 48",
"building-coffin":"0 48V60L60 72L84 60V48L60 36",
"checkered":"0 0H48V48H96V96H48V48H0",
"circle-large":"0 48A48 48 0 1 0 96 48A48 48 0 1 0 0 48",
"circle-med":"12 48A36 36 0 1 0 84 48A36 36 0 1 0 12 48",
"circle-small":"24 48A24 24 0 1 0 72 48A24 24 0 1 0 24 48",
"circle-tiny":"36 48A12 12 0 1 0 60 48A12 12 0 1 0 36 48",
"close":"0 12L36 48 0 84 12 96 48 60 84 96 96 84 60 48 96 12 84 0 48 36 12 0",
"close-medium":"12 24L24 12 48 36 72 12 84 24 60 48 84 72 72 84 48 60 24 84 12 72 36 48",
"club":"48 48A12 12 0 1 1 36 36A1.1 1 0 1 1 60 36A12 12 0 1 1 48 48Q48 72 60 72H36Q48 72 48 48",
"cone-pointed":"48 4L4 72Q48 99 92 72L48 4",
"cone-rounded":"0 72Q48 99 96 72L60 12Q48-9 36 12",
"crescent":"0 96Q96 96 96 0Q72 72 0 96",
"curved-paper":"0 12Q48 0 96 12V96Q48 72 0 96",
"cylinder":"24 84Q48 99 72 84V12Q48 0 24 12",
"diagonal":"60 0H48L96 48V36ZM0 36V48L48 96H60",
"diamond":"24 48L48 84L72 48L48 12",
"down-arrow":"24 36H72L48 60",
"eject":"0 48H96L48 0ZM0 60V84H96V60",
"eject-medium":"24 48H72L48 24ZM24 60H72V72H24",
"flag":"0 0H96V48H12V96H0",
"flag-waving":"0 12H12Q72 24 60 12T96 12V60Q60 48 60 60T12 60V96H0",
"flat_head":"49 45L15 10Q8 1 5 0L0 5Q1 8 10 15L45 49",
"forward":"0 0V96L48 48ZM48 0V96L96 48",
"heart":"48 72Q0 10 48 24Q96 10 48 72",
"home":"24 36V72H72V36L48 12",
"ice-cream":"48 96L36 48A24 24 0 1 1 60 48",
"left-arrow":"60 24V72L36 48",
"left-left-arrow":"48 0V96L0 48",
"left-right-arrow":"0 0V96L48 48",
"mug":"72 12A24 36 0 1 1 72 84V72A12 24 0 1 0 72 24V96H0V12",
"music-note":"36 72A24 12 1 1 0 48 84L36 24L72 12V0L24 12",
"pencil":"0 96L12 72 84 0 96 12 24 84",
"pencil-med":"12 84L24 60 72 12 84 24 36 72",
"phone":"48 0H36A24 48 0 1 0 48 96L36 72A12 24 0 1 1 36 24",
"pin":"0 96L24 24A36 24, 0, 1 1 84 48",
"pin2":"48 96L12 60A48 36 0 1 1 84 60",
"plane":"36 24A12 24 0 0 1 60 24A12 60 0 0 1 36 36M12 48V60L36 48V24ZM84 48V60L60 48V24",
"play":"24 12V84L72 48",
"pyramid-on-":"48 0L96 48L48 60L0 48",
"rain-drop":"48 0L24 60A24.24 24 0 1 0 72 60",
"rain-drop-fat":"48 0L12 36A48 36 0 1 0 84 36",
"rain-drop-med":"48 12L36 48A1.2 24 0 1 0 60 48",
"rectangle":"0 0H96V96H0",
"reverse":"48 0V96L0 48ZM96 0V96L48 48",
"right-arrow":"36 24V72L60 48",
"right-left-arrow":"96 0V96L48 48",
"right-right-arrow":"48 0V96L96 48",
"round-key":"12 0A12 48 0 1 0 12 96H84A12 48 0 1 0 84 0",
"rounded-box":"0 12Q0 0 12 0H84Q96 0 96 12V84Q96 96 84 96H12Q0 96 0 84",
"screwdriver_handle":"50 44Q56 41 59 45L93 79Q93 93 79 93L44 58Q41 54 45 49",
"short-hat":"24 72A36 12 0 1 0 72 72A24 12 0 1 0 24 72",
"spade":"48 60Q0 84 48 12Q96 84 48 60Q48 84 60 84H36Q48 84 48 60",
"speaker":"12 60H0V36H12L36 12V84",
"star":"48 0L84 96L0 36H96L12 96",
"star-medium":"48 12L72 84L12 36H84L24 84",
"stop":"24 24H72V72H24",
"top-down-arrow":"0 0H96L48 48",
"top-hat-big":"24 72A36 12 0 1 0 72 72V24A24 12 0 1 0 24 24",
"top-hat-huge":"24 72A36 12 0 1 0 72 72V12A24 12 0 1 0 24 12",
"top-hat-plain":"24 72A36 12 0 1 0 72 72V48A24 12 0 1 0 24 48",
"top-hat-striped":"24 72A36 12 0 1 0 72 72A24 12 0 1 1 24 72M24 60A24 12 0 1 0 72 60V36A24 12 0 1 0 24 36",
"top-hat-tall":"24 72A36 12 0 1 0 72 72V36A24 12 0 1 0 24 36",
"top-up-arrow":"0 48H96L48 0",
"touch-bottom":"0 48A48 48 0 1 1 96 48V96H0",
"touch-left":"48 0A48 48 0 0 1 48 96H0V0",
"touch-right":"48 0A48 48 0 0 0 48 96H96V0",
"touch-top":"0 48A48 48 0 1 0 96 48V0H0",
"tree":"36 36H24L48 0L72 36H60L84 60H72L96 84H60V96H36V84H0L24 60H12",
"tree-med":"48 12L72 48H60L84 72H60V84H36V72H12L36 48H24",
"up-arrow":"24 60H72L48 36",
"vol-high":"72 12A12 36 0 0 1 72 84A24 48 0 0 0 72 12",
"vol-low":"48 36A12 12 0 0 1 48 60A48 24 0 0 0 48 36",
"vol-max":"84 0A12 48 0 0 1 84 96A12 36 0 0 0 84 0",
"vol-med":"60 24A12 24 0 0 1 60 72A24 36 0 0 0 60 24"
};

function setThumb(){
   var f = "",rgb=color.value;
   if (rgb != "#000000") f = 'fill="'+ rgb +'"'
   thumb.innerHTML = "\\"+"\n<" + "path " + f + ' d="M' + paths[select.value] + 'z"/>';
}

function addPath(){
   var f = "",rgb=color.value;
   if (rgb != "#000000") f = 'fill="'+ rgb +'"'
   raw.value += "\r\n<" + "path " + f + ' d="M' + paths[select.value] + 'z"/>';
   setSVG();
}

for (i in paths){
   var option = document.createElement("option");
   option.text=i;
   select.add(option);
}

function getVBpos(n,ev){
   var style=getComputedStyle(svg,null),
      w=parseInt(style.getPropertyValue("width"),10),
      h=parseInt(style.getPropertyValue("height"),10);
   return ((ev.pageX - n.offsetLeft)/vbw).toFixed(1) + "," + ((ev.pageY - n.offsetTop)/vbw).toFixed(1);

}

function setpos(n,ev){
   document.getElementById("pos").innerHTML=getVBpos(n,ev)
}

function showpos(n,ev){
   var title=getVBpos(n,ev);
   svg.setAttribute("title",title);
   svg.parentNode.setAttribute("title",title); //chrome doesn't do tooltip on svg
}

function setSVG(){
   if (last != raw.value){
      last=raw.value;
      svg.innerHTML=raw.value
   }
};
setSVG();
</script>
</body>
</html>

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
technosaurus


Joined: 18 May 2008
Posts: 4764
Location: Kingwood, TX

PostPosted: Tue 17 Nov 2015, 03:31    Post subject:  

The long term goal is to have enough paths to cobble together the complete list of standard icons:

accessories-calculator
accessories-character-map
accessories-dictionary
accessories-text-editor
address-book-new
application-exit
applications-accessories
applications-development
applications-engineering
applications-games
applications-graphics
applications-internet
applications-multimedia
applications-office
applications-other
applications-science
applications-system
applications-utilities
application-x-executable
appointment-missed
appointment-new
appointment-soon
audio-card
audio-input-microphone
audio-volume-high
audio-volume-low
audio-volume-medium
audio-volume-muted
audio-x-generic
battery
battery-caution
battery-low
call-start
call-stop
camera-photo
camera-video
camera-web
computer
contact-new
dialog-error
dialog-information
dialog-password
dialog-question
dialog-warning
document-new
document-open
document-open-recent
document-page-setup
document-print
document-print-preview
document-properties
document-revert
document-save
document-save-as
document-send
drive-harddisk
drive-optical
drive-removable-media
edit-clear
edit-copy
edit-cut
edit-delete
edit-find
edit-find-replace
edit-paste
edit-redo
edit-select-all
edit-undo
emblem-default
emblem-documents
emblem-downloads
emblem-favorite
emblem-important
emblem-mail
emblem-photos
emblem-readonly
emblem-shared
emblem-symbolic-link
emblem-synchronized
emblem-system
emblem-unreadable
face-angel
face-angry
face-cool
face-crying
face-devilish
face-embarrassed
face-kiss
face-laugh
face-monkey
face-plain
face-raspberry
face-sad
face-sick
face-smile
face-smile-big
face-smirk
face-surprise
face-tired
face-uncertain
face-wink
face-worried
flag-aa
folder
folder-drag-accept
folder-new
folder-open
folder-remote
folder-visiting
font-x-generic
format-indent-less
format-indent-more
format-justify-center
format-justify-fill
format-justify-left
format-justify-right
format-text-bold
format-text-direction-ltr
format-text-direction-rtl
format-text-italic
format-text-strikethrough
format-text-underline
go-bottom
go-down
go-first
go-home
go-jump
go-last
go-next
go-previous
go-top
go-up
help-about
help-browser
help-contents
help-faq
image-loading
image-missing
image-x-generic
input-gaming
input-keyboard
input-mouse
input-tablet
insert-image
insert-link
insert-object
insert-text
list-add
list-remove
mail-attachment
mail-forward
mail-mark-important
mail-mark-junk
mail-mark-notjunk
mail-mark-read
mail-mark-unread
mail-message-new
mail-read
mail-replied
mail-reply-all
mail-reply-sender
mail-send
mail-send-receive
mail-signed
mail-signed-verified
mail-unread
media-eject
media-flash
media-floppy
media-optical
media-playback-pause
media-playback-start
media-playback-stop
media-playlist-repeat
media-playlist-shuffle
media-record
media-seek-backward
media-seek-forward
media-skip-backward
media-skip-forward
media-tape
modem
multimedia-player
multimedia-volume-control
Name
network-error
network-idle
network-offline
network-receive
network-server
network-transmit
network-transmit-receive
network-wired
network-wireless
network-workgroup
object-flip-horizontal
object-flip-vertical
object-rotate-left
object-rotate-right
package-x-generic
pda
phone
preferences-desktop
preferences-desktop-accessibility
preferences-desktop-font
preferences-desktop-keyboard
preferences-desktop-locale
preferences-desktop-multimedia
preferences-desktop-peripherals
preferences-desktop-personal
preferences-desktop-screensaver
preferences-desktop-theme
preferences-desktop-wallpaper
preferences-other
preferences-system
preferences-system-network
printer
printer-error
printer-printing
process-stop
scanner
security-high
security-low
security-medium
software-update-available
software-update-urgent
start-here
sync-error
sync-synchronizing
system-file-manager
system-help
system-lock-screen
system-log-out
system-reboot
system-run
system-search
system-shutdown
system-software-install
system-software-update
Table 7. Standard Emblem Icons
task-due
task-past-due
text-html
text-x-generic
text-x-generic-template
text-x-script
tools-check-spelling
user-available
user-away
user-bookmarks
user-desktop
user-home
user-idle
user-offline
user-trash
user-trash-full
utilities-system-monitor
utilities-terminal
video-display
video-x-generic
view-fullscreen
view-refresh
view-restore
view-sort-ascending
view-sort-descending
weather-clear
weather-clear-night
weather-few-clouds
weather-few-clouds-night
weather-fog
weather-overcast
weather-severe-alert
weather-showers
weather-showers-scattered
weather-snow
weather-storm
window-close
window-new
x-office-address-book
x-office-calendar
x-office-document
x-office-presentation
x-office-spreadsheet
zoom-fit-best
zoom-in
zoom-original
zoom-out

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sun 22 Nov 2015, 16:13    Post subject:  

Okay, I have to say first of all, I am not a programmer or coder or anything, but I do understand what you are trying to achieve here, and I think it's incredibly creative.

But boy oh boy that's going to be a LOT of work.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Tue 24 Nov 2015, 07:33    Post subject:  

I've been going over this for a while, and I can see two major complicating issues from where I stand.

The first is that it is almost impossible to create graphical representations in svg format when there is no overlap or nesting of multiple objects.

The second complicating issue is that without using the
Code:
fill:none
style function, overlap and/or nested objects will simply dissappear in each other.

I made the most basic iconic representation of a calculator, and posted it below.
Even at its most basic, the figure consists of multiple objects, all nested within the large rectangle representing the outline of the calculator.
There are really only two options to make this visible; either the stroke color differs significantly from the fill color, or the fill color is set to none.

So that, I feel, is the real challenge to overcome in this case.
calculator.png
 Description   
 Filesize   860 Bytes
 Viewed   578 Time(s)

calculator.png

Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4764
Location: Kingwood, TX

PostPosted: Tue 24 Nov 2015, 11:16    Post subject:  

solo wrote:
I've been going over this for a while, and I can see two major complicating issues from where I stand.

The first is that it is almost impossible to create graphical representations in svg format when there is no overlap or nesting of multiple objects.

that is what the "M/m" is for, it allows you to move to a new location and start a new path. If they will have different fill colors (or strokes) then they should be separate paths. That is why I have a separate screwdriver handle and flathead in the first post.
It isn't obvious at first glance, but I actual started and finished at the locations where the 2 objects would join without including a "z" this leaves an area where there is no stroke (so they can be joined together).
Quote:
The second complicating issue is that without using the
Code:
fill:none
style function, overlap and/or nested objects will simply dissappear in each other.

I made the most basic iconic representation of a calculator, and posted it below.
Even at its most basic, the figure consists of multiple objects, all nested within the large rectangle representing the outline of the calculator.
There are really only two options to make this visible; either the stroke color differs significantly from the fill color, or the fill color is set to none.

So that, I feel, is the real challenge to overcome in this case.

You're right, some things just can't be represented as a simple silhouette.
Here is my attempt, It could use some rounding on the edges, but other than that it works ok down to 16x16px.
<svg width="48px" height="48px" viewBox="0 0 96 96">
<path fill="#ccc" stroke="#444" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"/>
</svg>

NOTE: I have started using relative paths instead of grid coordinates because it makes it easier to move the image around by just changing the initial M## ## ... this can be useful for combining 2 images by moving one up and left and overlaying another down and to the right (or whatever)... I am thinking of +,-, check-marks being placed on a calendar icon or email icon to indicate status. Another bonus of using relative paths is that many sequences are exact repeats, which makes them much more compressible (like the squares on my calculator)

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
step

Joined: 04 May 2012
Posts: 954

PostPosted: Tue 24 Nov 2015, 13:04    Post subject:  

bookmarked
_________________
Fatdog64-710|+Packages|Kodi|Findnrun|+forum|gtkmenuplus
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Tue 24 Nov 2015, 14:43    Post subject:  

That's a 314 byte calculator.
I'd say that's optimized.

If you're planning on doing all this by hand, I'm going to call you Vector Beethoven. Smile
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 25 Nov 2015, 07:54    Post subject:  

Your explanation of using relative paths so you'd be able to create an offset duplicate overlay reminded me of the work I did on an alternative set of network tray icons, where I tried to create an iconset which would be clearly identifiable with both a light and dark backround. What you get is a simple type of raised effect.

Here's an example:

http://murga-linux.com/puppy/viewtopic.php?t=100917&start=29

I tried to duplicate this effect on your calculator, but I am very new at this whole svg stuff, so what I discovered was that I could only achieve it using the feOffset and feColorMatrix.

Here's the result:

Code:
<svg width="48px" height="48px" viewBox="0 0 96 96">
<filter id = "i1" width = "150%" height = "150%">
        <feOffset result = "offOut" in = "SourceGraphic" dx = "-3" dy = "3"/>
        <feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
        <feBlend in = "SourceGraphic" in2 = "matrixOut" mode = "normal"/>
    </filter>
<g filter = "url(#i1)">
<path fill="none" stroke="#fff" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"/>
</g>
</svg>


The big advantage is of course, that your image is almost always recognisable regardless of the backround color.

It's not something that 'works' all the time, but it might be useful to have in the back of your head as a possibility.

And I'm sure you'd be able to find a way to formulate it, or achieve a similar effect more efficiently.
calculator03_white.png
 Description   
 Filesize   557 Bytes
 Viewed   525 Time(s)

calculator03_white.png

calculator03_gray.png
 Description   
 Filesize   594 Bytes
 Viewed   527 Time(s)

calculator03_gray.png

calculator03_black.png
 Description   
 Filesize   448 Bytes
 Viewed   496 Time(s)

calculator03_black.png

Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4764
Location: Kingwood, TX

PostPosted: Wed 25 Nov 2015, 15:37    Post subject:  

That's exactly the sort of thing I am wanting to enable. It would only take a few minutes to put together a c program or shell script that takes a set of fill and stroke definitions and generates a themed icon for every path.
_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
step

Joined: 04 May 2012
Posts: 954

PostPosted: Wed 25 Nov 2015, 19:03    Post subject:  

solo wrote:

The big advantage is of course, that your image is almost always recognisable regardless of the backround color.
Very functional indeed!
_________________
Fatdog64-710|+Packages|Kodi|Findnrun|+forum|gtkmenuplus
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 26 Nov 2015, 07:33    Post subject:  

The biggest take-away for me at this point is that the svg filter functions in general provide some very powerful tools, but the feColorMatrix in particular seems to have a strong potential to be useful.

Besides the matrix mode, it has a seperate hue and saturation mode, but here's what I found about the matrix mode.

The matrix filter is being expressed with 20 space seperated digits, 5 for the red channel, 5 for the green, 5 for the blue, and 5 for alpha.
That is a bit too many digits for me to wrap my head around.
But anyway, it seems the last digit of each of those 5 digits deals with backround, and since you always want the backround of an icon to be transparant, we should leave digit number 5, 10, 15 and 20 to zero and not mess around with that.

There is something called an identity matrix setting, which is a filter setting which is pretty much neutral, and does not change how your image looks in any way.

If we would take the original example of your calculator as you posted it, the code would look like this:

Code:
<svg width="48px" height="48px" viewBox="0 0 96 96">
<filter id = "i1" width = "150%" height = "150%">
        <feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
        </filter>
<g filter = "url(#i1)">
<path fill="#ccc" stroke="#444" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"/>
</g>
</svg>


So you see the first of the 'red' digits is set to 1, the second of the 'green' digits, the third of the 'blue' digits, and the fourth of the 'alpha' digits.

This (don't ask why), makes your calculator come out relatively undistorted.

Now for the fun part.

If I would change the second digit of the 'red' digits into a 1 value also, you get the red calculator as you see it below.
Like this:

Code:
<feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = "1 1 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>


If I change the third digit of the 'green' digits into a 1 value, I get a green calculator:

Code:
<feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = "1 0 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 1 0"/>


And if I change the fourth digit of the 'blue' digits into a value of 1, I get a blue calculator:

Code:
<feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = "1 0 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 0 1 0"/>


That is what I found out sofar, and you have to admit, it does open some perspectives in terms of color management.
calculator04.png
 Description   
 Filesize   456 Bytes
 Viewed   491 Time(s)

calculator04.png

calculator04red.png
 Description   
 Filesize   488 Bytes
 Viewed   490 Time(s)

calculator04red.png

calculator04green.png
 Description   
 Filesize   489 Bytes
 Viewed   490 Time(s)

calculator04green.png

calculator04blue.png
 Description   
 Filesize   442 Bytes
 Viewed   445 Time(s)

calculator04blue.png

Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 26 Nov 2015, 11:10    Post subject:  

If we take the identity matrix setting as a basis, we can see if we can fill it with a custom color.

So I took the hexadecimal value of the first color in the Tango Palette you posted which is a bright yellow with a value of #fce94f.

I took that to the color picker, entered it and found that the rgb values were respectively 252, 233, and 79.

I devided those values by 255, to get a corresponding decimal value.

At first, I entered those values using the method I described above, with the red value at the second 'red' digit, the green value at the third 'green' digit, and the blue value at the fourth 'blue' digit, but this did not have the expected result.
So instead, I changed the 1 value of the first 'red' digit in the red value, the 1 value of the second 'green' digit in the green value, and the 1 value of the third 'blue' digit into the blue value.
This gave me a good result, but the yellow of the calculator was too dark. That is because the matrix values are taken as relative to the original values.
So if I wanted a calculator with the exact yellow fill color as the Tango Palette, I would have to change the original fill color into white.
And so the code turns out like this:

Code:
<svg width="48px" height="48px" viewBox="0 0 96 96">
<filter id = "i1" width = "150%" height = "150%">
        <feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = "0.988235294118 0 0 0 0 0 0.913725490196 0 0 0 0 0 0.309803921569 0 0 0 0 0 1 0"/>
        </filter>
<g filter = "url(#i1)">
<path fill="#fff" stroke="#444" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"/>
</g>
</svg>


And the calculator looks like this:
calculator04colortest.png
 Description   
 Filesize   487 Bytes
 Viewed   477 Time(s)

calculator04colortest.png

Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Fri 27 Nov 2015, 07:01    Post subject:  

Here's another potentially hugely important feature the SVG format supports.

SVG supports CSS, so SVG supports stylesheets.

http://stackoverflow.com/questions/23317134/is-it-possible-to-import-a-color-palette-and-have-stroke-fill-and-gradient-col

What this means, is that you could have the window manager generate a new mystyle.css whenever a change is made, and then that stylesheet would serve as a color template for the fills and strokes of your svg files.

EDIT: Well, the good news is, it works, but the bad news is that it only seems to work in my browser and not in the system. It's not a real surprise really that CSS would only be browser supported.

Here's the code for the calculator.svg:

Code:
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<svg width="48px" height="48px" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z" id="MyPath"/>
</svg>


And here's the code for the stylesheet, called style.css:

Code:
#MyPath {
   fill: red;
   stroke: black;
   }


So if you want to see a red and black calculator instead of a solid black rectangle, you'll have to open the svg in your webbrowser.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sat 28 Nov 2015, 10:50    Post subject:  

Instead of trying to put a style onto an object svg, I tried it the other way around, by having a style defined in an svg file, and importing an object into that.

You can link to a defined object in an external file by using xlink. Linking an object from within the same file through xlink works fine. However, as soon as you try to do the same with an external file, It stops working in the system, and will only work in your webbrowser.

So xlink is also not an option.
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 1 of 6 [83 Posts]   Goto page: 1, 2, 3, 4, 5, 6 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1218s ][ Queries: 14 (0.0113s) ][ GZIP on ]