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 16 Oct 2017, 20:25
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 4 of 6 [83 Posts]   Goto page: Previous 1, 2, 3, 4, 5, 6 Next
Author Message
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 21 Jan 2016, 08:06    Post subject:  

Well I was going to create a little SVG flag in which one of those iso flag designs could be loaded through xlink href. But I really got stuck trying to rescale the iso flag, which is 640x480, into the flag area of my icon, which I made 64x48, which should be straightforward enough.

I was faffing around with viewbox and preserveAspectRatio, and I just couldn't get it to work.

So I admitted defeat and shrunk the iso flag down to 64x48, and then it works fine.

I know it must be possible to rescale the flag to fit from within the icon svg, but I am done trying to find out.

Code:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M15 18v44c5-12 5-32 0-44zm70 47H15v25H9V12H6V6h12v6h-3v3h70z" fill="#fff" stroke="#444" stroke-width="3"/>
<image x="20" y="16" width="64px" height="48px" xlink:href="path/to/your/flag/yourflag.svg" />
</svg>
flag01.png
 Description   
 Filesize   1.09 KB
 Viewed   420 Time(s)

flag01.png

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


Joined: 18 May 2008
Posts: 4745

PostPosted: Thu 21 Jan 2016, 10:06    Post subject:  

solo wrote:
Technosaurus, your list of standard icons includes the flag-AA icon, which stands for the iso3166 standard of codes corresponding to all different flag designs.

Now, rather than making life a lot harder by trying to re-create each of those flags yourself, here's a link to a SVG collection of iso flags on GitHub.

https://github.com/jasny/iso-country-flags


Those are pretty decent. I tried the US flag which started at ~24kb and got a decent image down to ~4kb using svgomg, but just out of curiosity I tried a hand rendering and got it almost down to 1kb (50 stars require a lot of paths).

Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
<path fill="#b00" d="M0 6h96v78h-96"/><path fill="#006" d="M0 6h48v42h-48"/>
<path fill="#FFF" d="M2 10h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m-36 4h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3zm8 0h3l-2.5 2l1-3l1 3z
m6 -30h48v6h-48zm0 12h48v6h-48zm0 12h48v6h-48zm-48 12h96v6h-96zm0 12h96v6h-96zm0 12h96v6h-96z"/>
</svg>

But then I remembered that there is a unicode "star" character, so I tried a hacky version. It will probably render differently in different viewers, but it demonstrates that you can draw any kind of text along a path (even curved ones, though the example only demos straight lines)
Code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96">
<def><path id="p1" d="M1 12h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36m-35 4h35m-36 4h36"/></def>
<path fill="#b00" d="M0 6h96v78h-96"/>
<path fill="#006" d="M0 6h40v42h-40"/>
<path fill="#FFF" d="M40 12h56v6h-56zm0 12h56v6h-56zm0 12h56v6h-56zm-40 12h96v6h-96zm0 12h96v6h-96zm0 12h96v6h-96z"/>
<text fill="#FFF" letter-spacing="4" font-size="3">
<textPath xlink:href="#p1">★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★</textPath>
</text>
</svg>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 21 Jan 2016, 14:19    Post subject:  

That's great work.

The second's a real stinker though because it doesn't work on the filesystem I'm working on, which is FAT32. The encoding of those star symbols does not play well with that.

I thought maybe you could even reduce the first one further by using the 'use' element in combination with xlink:href, as explained here:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

I just ran into trouble defining a row of stars as a group. It appears a lot easier to define simple shapes as a group than a complex path.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 17 Feb 2016, 12:19    Post subject:  

How SVG stacking could create different icon themes.

For some designers working with the Scalable Vector Graphics format, it has become good practice to group some SVG designs together into one bigger SVG. They place each design on a seperate layer, which will be called specifically to show itself in a page, while not showing the designs on the other layers.
This practice is called SVG stacking.

Here's a very good webpage explaining how it works:

https://hofmannsven.com/2013/laboratory/svg-stacking/

Now, what I was thinking about is that with this technique you should be able to create icons which have their respective design elements split up in different layers, and by either showing or hiding them, you could modify the appearance of an icon as if you changed its theme.
So lets go back to our trusty old calculator. Smile

I decided to split the design up in three elements: outline, fills, and highlights. So I created a number of layers accordingly.
Using the information on from the link above, I made an SVG containing all the split up elements. I called it calculatorstack01.svg.

Code:
<?xml version="1.0"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg:style
    xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
      .i { display: none; }
      .i:target { display: block; }
  </svg:style>
 <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="button_highlight"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M33 42h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6m-30 6h6v6m6-6h6v6m6-6h6v6" fill="none" stroke="#666" stroke-width="3"/>
 </svg:svg>
 <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="body_highlight"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M24 6h48v84m-6-54H30V12" fill="none" stroke="#969696" stroke-width="3"/>
 </svg:svg>
 <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="outline"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M57 78h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm24-12h6v6h-6zm-12 0h6v6h-6zm-12 0h6v6h-6zm-3-30h36v24H30zm-6-6h48v84H24z" fill="none" stroke="#444" stroke-width="3"/>
 </svg:svg>
  <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="screenfill"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M30 12h36v24H30z" fill="#a0892c"/>
 </svg:svg>
  <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="buttonfill"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M57 78h6v6h-6zM45 78h6v6h-6zM33 78h6v6h-6zM57 66h6v6h-6zM45 66h6v6h-6zM33 66h6v6h-6zM57 54h6v6h-6zM45 54h6v6h-6zM33 54h6v6h-6zM57 42h6v6h-6zM45 42h6v6h-6zM33 42h6v6h-6z" fill="#646464"/>
 </svg:svg>
   <svg:svg
  xmlns:svg="http://www.w3.org/2000/svg"
  class="i"
  id="bodyfill"
  width="96px"
  height="96px"
  viewBox="0 0 96 96">
   <path d="M24 6h48v84H24z" fill="#b7c8be"/>
 </svg:svg>
 </svg>


Then I made a small HTML page with a table in it, which would make positioning easy (I'm not a programmer folks!). Using the information on the following webpage, I managed to create images on top of each other:

https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html

And it works!

Here's the HTML code for the webpage. Put it in the same folder as the calculatorstack01.svg.

Code:
<HTML>

<HEAD>

<TITLE>Stacked SVG test for theme generation</TITLE>
<BODY BGCOLOR="#ffffff">



<style type="text/css" scoped>
table.GeneratedTable {
width:100%;
background-color:#ffffff;
border-collapse:collapse;border-width:0px;
border-color:#ffffff;
border-style:solid;
color:#000000;
}

table.GeneratedTable td, table.GeneratedTable th {
border-width:0px;
border-color:#ffffff;
border-style:solid;
padding:3px;
}

table.GeneratedTable thead {
background-color:#ffffff;
}
</style>

<!-- HTML Code -->
<table class="GeneratedTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img
 src="calculatorstack01.svg#outline"
 alt="SVG calculator outlined"
/></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#bodyfill" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#outline" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#body_highlight" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#bodyfill" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#body_highlight" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
</div></td>
<td><div style="position: relative; left: 0px; top: 0px;">
  <img src="calculatorstack01.svg#outline" style="position: relative; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#bodyfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#screenfill" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#button_highlight" style="position: absolute; top: 0px; left: 0px;"/>
  <img src="calculatorstack01.svg#buttonfill" style="position: absolute; top: 0px; left: 0px;"/> 
</div></td>
</tr>
</tbody>
</table>
</BODY>

</HTML>


Understand, you could, if you wanted to, draw a completely different looking calculator on one of those layers as well.
stacked_calculator01.png
 Description   
 Filesize   1.9 KB
 Viewed   379 Time(s)

stacked_calculator01.png

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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sun 28 Feb 2016, 08:46    Post subject:  

I've been working on this list of standard icons Technosaurus posted, and I thought I'd share the result.

They are very minimalistic, because of the limitations I put on them. They had to be single path, only one fill color, only one line color, a line thickness of 3, and their individual size was not allowed to exceed 500 bytes.
Now, I realize that for the SVG icon project of Technosaurus a single path, single color SVG is not a requirement, and so there's probably a lot of icons I made that are unsuitable for that project. Besides that, there's a number that will not meet the required quality standard.
But having said that, I am also confident there's a fair number of icons there that would be usable.

They are in a HTML file, inside a table with numbered rows, for easy lookup. I've kept the order as it appears in the standard icon list Technosaurus posted in this thread.
It is nice to note that the entire size of the HTML page containing all SVG's amounts to less than 85kb.

The attachment is in compressed TAR because it seems we're not allowed to make attachments in this forum that are HTML.

This was a really fun and educational thing to work on. I hope someone may have a use for some of them.
standardicons01.tar.gz
Description 
gz

 Download 
Filename  standardicons01.tar.gz 
Filesize  19.27 KB 
Downloaded  238 Time(s) 
Back to top
View user's profile Send private message 
step

Joined: 04 May 2012
Posts: 931

PostPosted: Sun 28 Feb 2016, 10:30    Post subject:  

@solo, I'm speechless; given the constraints you posed they look fantastic, and in general they look very nice and usable for a minimalistic theme.
_________________
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: Sun 28 Feb 2016, 14:56    Post subject:  

step wrote:
@solo, I'm speechless; given the constraints you posed they look fantastic, and in general they look very nice and usable for a minimalistic theme.


Thanks step! Glad you appreciate it.

In a way, the constraints make it easier. Instead of asking yourself the question whether you've done enough, you ask yourself whether you did too much.
But even then, there's some icons that I feel could be improved upon.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4745

PostPosted: Sun 28 Feb 2016, 16:18    Post subject:  

My icons are public domain/unlicense/CC0.
@solo can anyone use your icons?

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sun 28 Feb 2016, 16:46    Post subject:  

technosaurus wrote:
My icons are public domain/unlicense/CC0.
@solo can anyone use your icons?


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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 23 Mar 2016, 04:48    Post subject:  

This bit of information might be a no-brainer for some people, and it might not directly be tied into the subject of this thread, but I believe it is still a nice thing to know.

You can make a PHP file out of an SVG by simply changing the extension from .svg to .php, and add the following line of code at the start:

Code:
<?php header("Content-type: image/svg+xml"); ?>


so this:

Code:
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><path d="M48 76v4m27-21h-3m-48 0h-3m42-4v8m-4-4h8m-30 0h-8m4-4v8m11-4h8m-4-4v8m42-15c-2 56-82 56-84 0C8-8 88-8 90 48zM75 36c15 60-69 60-54 0 4 15 50 15 54 0zM24 26c7-4 14-4 21 0m6 0c7-4 14-4 21 0" fill="#fff" stroke="#444" stroke-width="3"/</svg>


becomes this:

Code:
<?php header("Content-type: image/svg+xml"); ?>
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 76v4m27-21h-3m-48 0h-3m42-4v8m-4-4h8m-30 0h-8m4-4v8m11-4h8m-4-4v8m42-15c-2 56-82 56-84 0C8-8 88-8 90 48zM75 36c15 60-69 60-54 0 4 15 50 15 54 0zM24 26c7-4 14-4 21 0m6 0c7-4 14-4 21 0" fill="#fff" stroke="#444" stroke-width="3"/></svg>


It may also be nice to know that you can enter svg code in the text field of an sql database, and when called by php with an echo command, it will show up as an svg.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4745

PostPosted: Wed 30 Mar 2016, 22:44    Post subject:  

Here is a droid icon path I left out as unfinished, but its _usable_ if anyone wants.

Code:
<path  d="M24 30a27 24 0 0 1 54 0z
m0 3h54v30q0 6 -6 6h-3v12q0 6 -6 6q-6 0-6-6v-12h-12v12q0 6 -6 6q-6 0-6-6v-12h-3q-6 0-6-6zm-15 0q0-6 6-6q6 0 6 6v24q0 6 -6 6q-6 0-6-6zm72 0q0-6 6-6q6 0 6 6v24q0 6 -6 6q-6 0-6-6z
"/>


Solo has significantly expanded the number of icons in the list to the point where it makes sense to create a program to generate themed icons. I can do this in shell, C or javascript ... possibly even all of the above. Which is everyone most interested in? This is partially in response to the theme bug in woof-ce, but I won't be including any of the gtk licensed icons it mentions - only public domain / permissively licensed ones.

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
step

Joined: 04 May 2012
Posts: 931

PostPosted: Thu 31 Mar 2016, 05:13    Post subject:  

shell and js the most
_________________
Fatdog64-710|+Packages|Kodi|Findnrun|+forum|gtkmenuplus
Back to top
View user's profile Send private message 
01micko


Joined: 11 Oct 2008
Posts: 8656
Location: qld

PostPosted: Sun 17 Apr 2016, 07:54    Post subject:  

That droid thing was cool.

Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).

------

Below image is the theme in action with Akash' Pup Volume Monitor.

Mimetypes also work in all gtk2 apps, plus other icons.
pvm2.png
 Description   
 Filesize   83.77 KB
 Viewed   226 Time(s)

pvm2.png


_________________
Puppy Linux Blog - contact me for access
Back to top
View user's profile Send private message Visit poster's website 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Tue 26 Apr 2016, 11:46    Post subject:  

01micko wrote:
Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).


I just took a look at the icons you worked on 01Micko. Holy mackrel! That must have been a ton of work.

Good job man! Wink
Back to top
View user's profile Send private message 
01micko


Joined: 11 Oct 2008
Posts: 8656
Location: qld

PostPosted: Tue 26 Apr 2016, 15:41    Post subject:  

solo wrote:
01micko wrote:
Here is my progression..

https://github.com/puppylinux-woof-CE/puppy_icon_theme

Just take a look. Needs work! (but as far as zigbert's icons go it's a good start).


I just took a look at the icons you worked on 01Micko. Holy mackrel! That must have been a ton of work.

Good job man! Wink


To be clear, I only made the mimetypes (some directly based on zigbert's) and some of the apps and the build system to sort them into an icon theme based on techno's idea. The work is all zigbert's.

_________________
Puppy Linux Blog - contact me for access
Back to top
View user's profile Send private message Visit poster's website 
Display posts from previous:   Sort by:   
Page 4 of 6 [83 Posts]   Goto page: Previous 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.0797s ][ Queries: 14 (0.0064s) ][ GZIP on ]