optimizing svg paths for generating themes

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Message
Author
User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

optimizing svg paths for generating themes

#1 Post by technosaurus »

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: Select all

#!/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/styl ... pplication
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:
Image
But when indexed by mtpaint to account for alpha, these became

Code: Select all

#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 [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
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#2 Post by technosaurus »

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: Select all

<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 [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
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#3 Post by technosaurus »

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 [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
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#4 Post by solo »

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.

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#5 Post by solo »

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: Select all

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.
Attachments
calculator.png
(860 Bytes) Downloaded 665 times

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

#6 Post by technosaurus »

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).
The second complicating issue is that without using the

Code: Select all

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

step
Posts: 1349
Joined: Fri 04 May 2012, 11:20

#7 Post by step »

bookmarked
[url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Fatdog64-810[/url]|[url=http://goo.gl/hqZtiB]+Packages[/url]|[url=http://goo.gl/6dbEzT]Kodi[/url]|[url=http://goo.gl/JQC4Vz]gtkmenuplus[/url]

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#8 Post by solo »

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. :)

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#9 Post by solo »

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. ... 7&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: Select all

<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.
Attachments
calculator03_white.png
(557 Bytes) Downloaded 622 times
calculator03_gray.png
(594 Bytes) Downloaded 618 times
calculator03_black.png
(448 Bytes) Downloaded 582 times

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

#10 Post by technosaurus »

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

step
Posts: 1349
Joined: Fri 04 May 2012, 11:20

#11 Post by step »

solo wrote: The big advantage is of course, that your image is almost always recognisable regardless of the backround color.
Very functional indeed!
[url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Fatdog64-810[/url]|[url=http://goo.gl/hqZtiB]+Packages[/url]|[url=http://goo.gl/6dbEzT]Kodi[/url]|[url=http://goo.gl/JQC4Vz]gtkmenuplus[/url]

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#12 Post by solo »

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: Select all

<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: Select all

<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: Select all

<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: Select all

<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.
Attachments
calculator04.png
(456 Bytes) Downloaded 585 times
calculator04red.png
(488 Bytes) Downloaded 596 times
calculator04green.png
(489 Bytes) Downloaded 579 times
calculator04blue.png
(442 Bytes) Downloaded 528 times

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#13 Post by solo »

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: Select all

<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:
Attachments
calculator04colortest.png
(487 Bytes) Downloaded 550 times

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#14 Post by solo »

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

SVG supports CSS, so SVG supports stylesheets.

http://stackoverflow.com/questions/2331 ... adient-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: Select all

<?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: Select all

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

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#15 Post by solo »

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.

jamesbond
Posts: 3433
Joined: Mon 26 Feb 2007, 05:02
Location: The Blue Marble

#16 Post by jamesbond »

solo wrote: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.
Your librsvg may be defective. Version 2.34 works.
Fatdog64 forum links: [url=http://murga-linux.com/puppy/viewtopic.php?t=117546]Latest version[/url] | [url=https://cutt.ly/ke8sn5H]Contributed packages[/url] | [url=https://cutt.ly/se8scrb]ISO builder[/url]

User avatar
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#17 Post by solo »

jamesbond wrote:Your librsvg may be defective. Version 2.34 works.
Well I have version 2.36.1, which works fine in any other respect.

Let's see. I have this code for a svg, where xlink is being used as a reference from inside the same document:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48px" height="48px" viewBox="0 0 96 96">
<defs>
<g id="icon-1">
<path style="fill:inherit stroke:inherit" 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>
</defs>
<use xlink:href="#icon-1" style="fill:blue; stroke:white"/>
</svg>
This just works everywhere. In the system, in ViewNoir, in the browser. So that's fine.

But here's the base svg where xlink is used as a reference inside an external document,

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48px" height="48px" viewBox="0 0 96 96">
<g externalResourcesRequired="true">
<use xlink:href="defs.svg#icon-1" style="fill:blue; stroke:white"></use>
</g>
</svg>
You have to forgive me for the syntax, I was trying different ways of saying the same thing believing I made a mistake somewhere.

And here is the svg it refers to, called defs.svg, which goes in the same folder:

Code: Select all

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <defs>
        <path id="icon-1" style="fill:inherit stroke:inherit" 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"></path>
        </defs>
</svg>
And this only seems to work in the browser.

Am I overlooking something very obvious?

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

#18 Post by technosaurus »

I am trying to keep things within the svgtiny specifications so that the images will be not only faster to load/render but also work with a wider variety of svg capable software including netsurf framebuffer (uses libtinysvg) and my jwm-lite fork (uses nanosvg.h). When they are in a squashfs or in a tarball, using an href for styles is not that useful since repeated image headers would all get a 1 byte dictionary entry anyhow.
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
solo
Posts: 389
Joined: Thu 14 Nov 2013, 20:33

#19 Post by solo »

Yeah I had a feeling you wanted to keep things tight. I just got carried away there for a while. It happens when I discover stuff that I like.

I'm just some graphics dabbler, so this is really out of my league anyway.

Very much interested in how this is going to develop though!

EDIT:
You may already be aware of this, but I just tried out a package called SVG Cleaner, and I have to say it does a pretty decent job. Managed to reduce my original calculator svg of 4.9kb to 530 byte.
Okay it was Inkscape generated, but still.

Here's a link to some packages:

https://code.launchpad.net/~svg-cleaner ... /+packages

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

#20 Post by technosaurus »

There is nothing wrong with using advanced features, so long as the paths themselves are still useful with basic features.
For svg paths created with most editors, you can use svgomg
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].

Post Reply