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 Tue 27 Jun 2017, 11:53
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 3 of 6 [83 Posts]   Goto page: Previous 1, 2, 3, 4, 5, 6 Next
Author Message
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sun 20 Dec 2015, 11:23    Post subject:  

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.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4718

PostPosted: Sun 20 Dec 2015, 19:45    Post subject:  

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

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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Tue 29 Dec 2015, 06:53    Post subject:  

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:
<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:
<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.
calcexample01.jpg
 Description   
 Filesize   2.2 KB
 Viewed   313 Time(s)

calcexample01.jpg

calcexample02.jpg
 Description   
 Filesize   2.26 KB
 Viewed   305 Time(s)

calcexample02.jpg

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

Joined: 12 Oct 2012
Posts: 1378
Location: The other Mr. 305

PostPosted: Tue 29 Dec 2015, 11:21    Post subject:  

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
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 31 Dec 2015, 15:18    Post subject:  

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:
<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! Smile
Back to top
View user's profile Send private message 
rufwoof

Joined: 24 Feb 2014
Posts: 1900

PostPosted: Fri 01 Jan 2016, 17:41    Post subject:  

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 ???
x.jpg
 Description   
 Filesize   53.89 KB
 Viewed   245 Time(s)

x.jpg

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


Joined: 18 May 2008
Posts: 4718

PostPosted: Fri 01 Jan 2016, 23:45    Post subject:  

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".
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sat 02 Jan 2016, 07:25    Post subject:  

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/Advanced_Gradients#Conical_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.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4718

PostPosted: Sat 02 Jan 2016, 16:06    Post subject:  

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.

_________________
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 03 Jan 2016, 04:40    Post subject:  

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.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4718

PostPosted: Wed 06 Jan 2016, 01:35    Post subject:  

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

Code:
<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>
cd.png
 Description   
 Filesize   6.82 KB
 Viewed   184 Time(s)

cd.png


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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 06 Jan 2016, 06:40    Post subject:  

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.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4718

PostPosted: Wed 06 Jan 2016, 16:55    Post subject:  

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:
<path d="M48 0a48 48 0 1 0 .1 0zm.1 40a6 6 0 1 0-.1 0z"/>
to:
Code:
<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.

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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Mon 11 Jan 2016, 04:42    Post subject:  

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.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 20 Jan 2016, 07:52    Post subject:  

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
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 3 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.1566s ][ Queries: 14 (0.0081s) ][ GZIP on ]