optimizing svg paths for generating themes

Message

solo · #31 Post by **solo** » Sun 20 Dec 2015, 15:23

I was trying to find out if GTK-2.0 together with ROX perhaps had an engine other than pixmaps, which could handle SVG images for gtkrc files, so as to be able to replace stock icons in a theme, but it does not have one as far as I can tell.

But during my search I came across this link:

https://code.google.com/p/altcanvas/wiki/InkFace

It allows the entire GUI to be designed as an SVG initially, and then functionalities will be assigned to image elements subsequently.
It's Python, not Java.

I thought it could be of interest to someone.

EDIT: And I just discovered the gtk engines folder with libsvg.so in it, so I guess that answers that.

technosaurus · #32 Post by **technosaurus** » Sun 20 Dec 2015, 23:45

I have been using nanosvg.
To make a simple xcb image viewer
and to reduce jwm's resource usage:

The same developer has a couple of nice immediate mode GUIs and an openGL vector graphics library ... that could be useful for the task that the InkFace developer was working toward

solo · #33 Post by **solo** » Tue 29 Dec 2015, 10:53

There is another tool you can use in most vector based design packages which can enhance your svg icon design considerably, but does not affect the size of your svg in any way, and may in fact reduce its size in many instances.

In Inkscape, you can find this feature under the -Path- menu. It is called -Exclusion-.

Let's take the base design of the calculator again. The smaller rectangle and squares which comprise the calculator buttons and calculator screen are nested within the form of the larger rectangle. In our original calculator every area within the large rectangle has the same fill color.

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="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="#ccc" stroke="#444" stroke-width="3"/>
</svg>

But we can change this by selecting all the objects and/or paths, and apply -Path/-Exclusion-. What happens is that we create a path that no longer exists for all nested paths/objects that were found in the original design, but instead belongs to the larger base path now. It is like saying, 'create a hole right here'. And what this accomplishes, is that you can suddenly use the backround color as a distinguishing element in your design.
Here's our new calculator after applying -Path/-Exclusion-:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M24 6v84h48V6H24zm6 6h36v24H30V12zm3 30h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 54h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 66h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 78h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6z" fill="#ccc" stroke="#444" stroke-width="3"/>
</svg>

Notice how this operation actually makes the svg a bit smaller in size.

There are a lot of designs that can benefit from this feature. For instance, you can now create an 'open' cog.
Keep in mind though, that this operation has a tendency to create additional nodes on the curved edges of your 'nested' paths. So if you already 'optimized' your curves in the manner I described a few posts back, and you apply -Path/-Exclusion-, you may want to check with the node editor to see if any unwanted nodes appeared. Or, alternatively, you only start tweaking the nodes after you performed the -Path-/-Exclusion- operation.

slavvo67 · #34 Post by **slavvo67** » Tue 29 Dec 2015, 15:21

I am very much interested in this project. I have very limited experience with this; so let me know how I can help. Test, whatever...

Thanks,

Slavvo67

solo · #35 Post by **solo** » Thu 31 Dec 2015, 19:18

Here's a little present for the New Year. All the icons from the standard icon list technosaurus posted that start with the letter A.

Save as html, open page in browser to view.

Code: Select all

<HTML>

<HEAD>

<TITLE>Basic SVG shapes for standard icons</TITLE>

</HEAD>

<BODY BGCOLOR="#ce5c00">



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

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

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

<!-- HTML Code -->
<table class="GeneratedTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M24 6v84h48V6H24zm6 6h36v24H30V12zm3 30h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 54h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 66h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6zM33 78h6v6h-6zm12 0h6v6h-6zm12 0h6v6h-6z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 23C1.5 23 7.5 111 73.5 84V74c-20 8-43 8-43-15h46v-6c0-19-14.25-30-28.5-30zm18.5 27h-36c0-24 36-24 36 0zM72 12.5c0 8.5-14 8.5-14 0s14-8.5 14 0zm-34 0c0 8.5-14 8.5-14 0s14-8.5 14 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M25 32l3 24h-6l3-24zM14 19L6 76h15l1-10h6l1 10h15l-9-57H14zm46 39H48V48h12zm30-27L79 64h11v12H63V66l11-35H63V19h27z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M40 69l47-47M37 66l47-47M35 71l50-50M29 56l32-6m-36-9l32-6m-37-9l32-6M26 91l54-10L60 6 5 16z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M57 47c0 16-21 16-21 0s21-16 21 0zm7.97 17.263C48 79 24 68 24 48c0-30 46-30 46-3 0 10-6.105 14-13 14V35M84 9v81m-66 0h66M16 6h62v78H16z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M20 6L6 20l28 28L6 76l14 14 28-28 28 28 14-14-28-28 28-28L76 6 48 34z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M18 40l30 38H18V40zM6 6v84h66L6 6zm30 8l5 6c3.333 4 12-3 8-7l-5-6c8-7 18 8 11 14l35 41v8l-8-1-35-42c-7 6-18-7-11-13z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M66 20l24 28-24 28V62l12-14-12-14zM38 78l11-60h9L47 78zm-8-58L6 48l24 28V62L18 48l12-14z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M70 46c0-30-44-30-44 0 0 15 12 15 12 26h20c0-11.14 12-11 12-26zM44 90h8m-14-6h20m-20-6h20M45 66l-3-20m9 20l3-20m-6 3v-6M6 46h12m30-30V6M26 24l-8-8m60 30h12M70 24l8-8" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M66 75h6v6h-6v-6zm9-9h6v6h-6v-6zm-18 0h6v6h-6v-6zm9-9h6v6h-6v-6zM21 16l6 6 6-6 5 5-6 6 6 6-5 5-6-6-6 6-5-5 6-6-6-6 5-5zm-9 26l42 42c20 18 50-7 30-30L42 12C21.998-7.686-7.99 22.67 12 42zm51-9.445L84 15" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 39l42-12-42-12H6v24zm0 0V15m0 8H6m42 8H6m69 0v-8m0 5l12-1M15 60c0-12 45-9 75 9-30 0-55 27-75 9H6V60zm0 4c15-5 30-5 50 2m-50 5h27.734M15 78V60m-5 0v18" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 90C25 90 25 6 48 6s23 84 0 84zM12 69h72M12 27h72M6 48h84m0 0c0 56-84 56-84 0s84-56 84 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M24 22h48M24 75h48m6-1h12v12H78zM6 74h12v12H6zm72-21h12v12H78zM6 53h12v12H6zm72-21h12v12H78zM6 32h12v12H6zm72-21h12v12H78zM6 11h12v12H6zm62 18v24.81C68 64 52 64 51.164 61.787 50.096 58.962 54 54 62 54V40l-18 3v17c0 10-16 11-17 8s2.764-8 11-8l-.128-25.683z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M49 12L13 48l5 4 36-36c14-14 35 7 21 21L32 80c-9 9-21-4-13-12l42.734-43.06C65 23 68 26 66.06 29.06L30 65l5 4 36-36c8-8-5-21-13-13L16 62c-18 18 6 37 21 22l42-42C99 22 69-8 49 12z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg>	
</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M70 6l20 21-20 21V37c-10 0-22 11-22 37-18-26-13-57 22-57zM56 59c49 5 44 32-8 32-51.737 0-54.87-26-14-31l2 5C2.98 71 20 83.712 48 84c32-.842 45-15 7-20z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M89.924 77.127C90 51 81 51 51 51c0 34 0 39 26.127 38.924C45 90 45 82.644 45 51c-32.346-.15-39 0-38.924-32.127C6 45 15 45 45 45c0-34 0-39-26.127-38.924C51 6 51 13.056 51 45c32.363.136 39 0 38.924 32.127zM15 39l24-24M23 41l18-18M11 33l22-22m0 30l8-8m-31-9l14-14m57 47L57 81m16-26L55 73m30-10L63 85m0-30l-8 8m31 9L72 86" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M12 18h72v60H12zm52 30h12m-16-9l4 9m-9 17l5-27m-10 4l5 24m-9-11l4-14M40 27l6 29m-11 4l5-34M30 48l5 13M20 48h10M6 13v70m1 1h82m1-1V13m-1-1H7" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M47 59L17.95 87.95C12 94 1.61 84.682 8.05 78.05L37 49zm2-22l10-11C59 4 81 4 81 8l-8 8 1 6 6 1 8-8c6 0 0 19-15 19L59 47zm10 18L31 27l-4-7L13 6l-7 7 14 14 7 4 28 28-3 3 26 26c7 6 16.408-3.277 9.95-9.95L62 52z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M42 7c-3 19-3 19-19 8l-8 8c10 16 10 16-8 19v12c18 2 18 2 8 19l8 8c15-11 15-11 19 8h12c3-19 3-19 19-8l8-8c-11-16-11-16 8-19V42c-19-3-19-3-8-19l-7.78-8.188C56.994 25.992 57 26 54 7zm24 41c0 24-36 24-36 0s36-24 36 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M67 66v10m-2 5h4v2h-4zm0-15h4v10h-4zm2-12L49 88.007h37zm0-6L45 90h45zM15 90V20m-4 70V19M41 6L10 19m9 2L48 8.445M15 20L48 6m0 5L19 23.59M19 90V24m0-6c0 23 11 45.066 31 44.88M35 6L6 18v72h13l29-12V62.763l2 .363L80 51C60 51 48 26 48 6H35" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M51 48l11 36m25-57L60 85M48 48l13 42 29-63h-6L62 74l-8-26zM35 6L6 18v72h13l29-12V62.763l2 .363L80 51C60 51 48 26 48 6H35M19 18c0 23 11 45.066 31 44.88M19 90V24m29-13L19 23.59M15 20L48 6M19 21L48 8.445M41 6L10 19m1 71V19m4 71V20" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M71 61v10H57m14 19c-27 0-27-37 0-37 26 0 26 37 0 37zM35 6L6 18v72h13l29-12V62.763L52 63c6-10 18.94-10.915 28-12-20 0-32-25-32-45H35M19 18c0 23 11 45.066 31 44.88M19 90V24m29-13L19 23.59M15 20L48 6M19 21L48 8.445M41 6L10 19m1 71V19m4 71V20" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M40 20h-9v14h9l16.99 14V5.976zm26 55h9m-27 0h9m9-6h9m-27 0h9m9-6h9m-27 0h9M11 48H5m7 6v-5m18 14v12m-3-12v12m-3-12v12m-3-12h12v12H21zm-9 21v7m57-1v-7m-9 7v-7m-9 7v-7M12 54h72v30h-6v6H42v-6H12z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M83 39l7 7M71 30l3-3-10-10h-3v3zm-1 1l10 10 5-5-10-10zm-45 9l15-15m-29 9l23-23m6 14l47 53-9 10-53-48-14-6C-4 19 19-4 34 11zm43 58l7 7" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M6 75h13v6H6zm30-13c13 11 34-1 31-18zm43 13v-5h6v5h5v6h-5v5h-6v-5h-5v-6zM61 34l13-1-7 11-42 24-6-10zM29 52c-3-17 19-29 32-18zm49-4c0-40-60-40-60 0 0-53 72-53 72 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M6 75h13v6H6zm60-24c3-17-17-28-30-17zm13 24v-5h6v5h5v6h-5v5h-6v-5h-5v-6zM30 44l-8-11 14 1 41 24-6 10zm30 18c-13 11-33-1-30-18zm18-14c0-40-60-40-60 0 0-53 72-53 72 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M6 75h13v6H6zm48-9c16-6 16-30 0-36zm25 9v-5h6v5h5v6h-5v5h-6v-5h-5v-6zM42 30l6-12 6 12v48H42zm0 36c-16-6-16-30 0-36zm36-18c0-40-60-40-60 0 0-53 72-53 72 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M6 75h13v6H6zm60-33c-6-16-30-16-36 0zm13 33v-5h6v5h5v6h-5v5h-6v-5h-5v-6zM30 54l-12-6 12-6h48v12zm36 0c-6 16-30 16-36 0zm12-6c0-40-60-40-60 0 0-53 72-53 72 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
</tr>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M59 77c-2.936-4.894 5-18 24-18V28l-46 9v34C37 91 9.902 93.06 6.9 87.944 4 83 12 71 30 71V18L90 6v53c0 21-28 23-31 18z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</BODY>

</HTML>

Happy New Year!

rufwoof · #36 Post by **rufwoof** » Fri 01 Jan 2016, 21:41

Might be of interest. All a bit above my head ... but just in case.

I've just tried Xara extreme 0.7 portable app from http://sourceforge.net/projects/portable/files/ and see that it has export to SVG options. It also has a 'trace' option

i.e. open png, use the trace option to create a SVG and export as SVG ???

technosaurus · #37 Post by **technosaurus** » Sat 02 Jan 2016, 03:45

One trick for tracing bitmaps is to 1st reduce the pallete to as few colors as practical. Afterwards you can change the stroke/fill to use a linear gradient to bring the colors back. The CD is a tough one, to get the multicolored fanout patterns, you can use linear gradients with different "slopes".

solo · #38 Post by **solo** » Sat 02 Jan 2016, 11:25

My first instinct was to try and reproduce the image in Inkscape by importing the image in a base layer, and then simply drawing the objects on other layers on top of that.
The picture itself, in a geometric sense, is very basic you see. And every time a picture can easily be defined geometrically, you are almost always better off just reproducing it in a vector drawing package than you would be with a bit-tracing function.

The real snag I ran up against, funny enough, is the gradient. Inkscape is great at linear and radial gradients, but the gradients on the CD are neither. That is a so-called conical gradient.
And a quick search about this yields this link, which gets all mathematical and beyond my current scope of understanding.

http://wiki.inkscape.org/wiki/index.php ... l_gradient

So at first glance it may seem a pretty straightforward and reproducable picture, but it has, at least for vector drawing, quite some complexity.

technosaurus · #39 Post by **technosaurus** » Sat 02 Jan 2016, 20:06

You can make a "conical" gradient by combining 2 sloped linear gradients such that they blend (using 2+ paths) into an angle... Really more of an X, but where it is centered compared to the paths makes a difference.

I'm visiting family for the holidays, but I can post an example when I get back home.

solo · #40 Post by **solo** » Sun 03 Jan 2016, 08:40

Always nice to 'cheat' your way around a limitation. Not sure if the result is worth it in this case though.
You're talking about creating 4 seperate paths with their own linear gradient to create an effect which, I suspect, will be a crude approximation of the original intent at best.

But I could be wrong.

There's another way around it in Inkscape where you create an radial array of objects, which you then fill as linear gradient by means of using the -Modify Path-/-Interpolate Attribute in a group- operation.

But you understand that this creates a LOT of code.

technosaurus · #41 Post by **technosaurus** » Wed 06 Jan 2016, 05:35

I tried a couple of different ways, but I liked the simplest version:

Code: Select all

<svg viewBox="0 0 96 96">
<defs>
<linearGradient id="cd" x1="0%" y1="0%" x2="100%" y2="100%">
 <stop offset="0%" stop-color="#987"/>
 <stop offset="50%" stop-color="#edc"/>
 <stop offset="100%" stop-color="#987"/>
</linearGradient>
</defs>
<path stroke="url(#cd)" fill="none" stroke-width="40" d="M30 30A1 1 0 1 0 66 66A1 1 0 1 0 30 30z"/>
</svg>

solo · #42 Post by **solo** » Wed 06 Jan 2016, 10:40

That looks terrific technosaurus!

I really believe it would be a futile exercize to try and meticulously recreate Photoshop effects in SVG format.
The strengths of scalable vector graphics are simplicity, clarity and flexibility.
I think it would be a mistake to make the SVG format the answer to all things icon related.

There are a lot of different styles icons express themselves in, and some are better expressed in another format than SVG.

Of course there's always the option to embed bitmaps in SVG files, but that is like video playback in Flash format, which is to say that it is not the way the medium was intended to be used.

Not that you have to be as 'Spartan' and minimalistic in your design approach as I am currently operating in.

technosaurus · #43 Post by **technosaurus** » Wed 06 Jan 2016, 20:55

It always bugged me that sometimes paths with "holes" would not show up properly, but it turns out that it works fine if you draw the "inner" and "outer" path in opposite directions (clockwise vs. counter-clockwise)
compare:

Code: Select all

<path d="M48 0a48 48 0 1 0 .1 0zm.1 40a6 6 0 1 0-.1 0z"/>

to:

Code: Select all

<path d="M48 0a48 48 0 1 0 .1 0zm.1 40a6 6 0 1 1-.1 0z"/>

That little bit of info should help simplify some paths.

solo · #44 Post by **solo** » Mon 11 Jan 2016, 08:42

technosaurus wrote:It always bugged me that sometimes paths with "holes" would not show up properly, but it turns out that it works fine if you draw the "inner" and "outer" path in opposite directions (clockwise vs. counter-clockwise)

Thank you for this piece of information!

The thing is, I've had this occur to me, but then more or less the other way around.
When I draw two lines that form an angle, or a curved line, within a filled area, they are often interpreted as a "hole" for some reason, and so I get this transparant patch where I realy want the fill color.
I was really breaking my head as to why this happened and how to solve it, but I can't figure it out.
But fortunately, the same working principle seems to apply in this case; if this happens, try to draw the lines the other way around instead, and your unwanted "hole" is likely to dissappear.

solo · #45 Post by **solo** » Wed 20 Jan 2016, 11:52

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

solo · #46 Post by **solo** » Thu 21 Jan 2016, 12:06

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

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

technosaurus · #47 Post by **technosaurus** » Thu 21 Jan 2016, 14:06

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

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

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

solo · #48 Post by **solo** » Thu 21 Jan 2016, 18:19

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/doc ... lement/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.

solo · #49 Post by **solo** » Wed 17 Feb 2016, 16:19

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.

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

<?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/484 ... er-in-html

And it works!

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

Code: Select all

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

solo · #50 Post by **solo** » Sun 28 Feb 2016, 12:46

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.

(old)Puppy Linux Discussion Forum

(old)Puppy Linux Discussion Forum

optimizing svg paths for generating themes