Your librsvg may be defective. Version 2.34 works.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.
optimizing svg paths for generating themes
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]
Well I have version 2.36.1, which works fine in any other respect.jamesbond wrote:Your librsvg may be defective. Version 2.34 works.
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>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>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>Am I overlooking something very obvious?
-
technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
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].
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
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
-
technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
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
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].
That's the current one from Ubuntu, I think, and it has problem rendering xlink:href. Link to Ubuntu bug report: https://bugs.launchpad.net/ubuntu/+sour ... ug/1299267. It's a confirmed bug but there is no follow-up action.solo wrote:Well I have version 2.36.1, which works fine in any other respect.jamesbond wrote:Your librsvg may be defective. Version 2.34 works.
The following is the SVG I use in Fatdog to render drive icons. It is supposed to show something like what the attachment to this post shows. It works with 2.34.
Code: Select all
<svg width="48" height="48" id="svg1" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="/usr/share/midi-icons/drive48.png" width="48" height="48"/>
<rect x="2" y="2" width="12" height="12" fill="#00ff00" stroke="black" stroke-width="2"/>
<line x1="2" y1="2" x2="14" y2="14" stroke="black"/>
<line x1="2" y1="14" x2="14" y2="2" stroke="black"/>
</svg>
I don't know much of libsvgtiny to say whether it supports external link or not. If libsvgtiny is your target, technosaurus may be able to give you more details.
- Attachments
-
- xscreenshot00000.png
- (3.55 KiB) Downloaded 342 times
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]
Tried to find a librsvg 2.34 package for Ubuntu Precise, but it seems to not exist. Closest I got was a 2.32 Wary PET package.
But what I did find, was a lot of red flags when I started looking for librsvg. It seems it has some serious vonurability issues.
If I understand it correctly, it seems to be possible, to masque certain commands in the svg code so as they pass for filter functions by using the fe prefix, and then remotely executing them through the xlink:href link.
So perhaps the inability of librsvg 2.36.1 to allow external linking through xlink:href isn't so much a bug as it is a precautionary disability.
I have to look into it some more, but in the meantime, I'm going to play safe and stick with my 'crippled' librsvg.
EDIT: Nope. Sorry. Overreacting and misinforming. My apologies. There is no mention anywhere that xlink:href is specifically being used in a malicious manner, or that it would pose any security threat.
But what I did find, was a lot of red flags when I started looking for librsvg. It seems it has some serious vonurability issues.
If I understand it correctly, it seems to be possible, to masque certain commands in the svg code so as they pass for filter functions by using the fe prefix, and then remotely executing them through the xlink:href link.
So perhaps the inability of librsvg 2.36.1 to allow external linking through xlink:href isn't so much a bug as it is a precautionary disability.
I have to look into it some more, but in the meantime, I'm going to play safe and stick with my 'crippled' librsvg.
EDIT: Nope. Sorry. Overreacting and misinforming. My apologies. There is no mention anywhere that xlink:href is specifically being used in a malicious manner, or that it would pose any security threat.
Here you go. Some basic SVG shapes. What I had in mind was to create different types of backdrops for icons.
Some shapes you already have, and some may not seem very useful.
Optimized in svgomg, no tranformations. You can save it in html and view them, they're placed in a simple table.
Some shapes you already have, and some may not seem very useful.
Optimized in svgomg, no tranformations. You can save it in html and view them, they're placed in a simple table.
Code: Select all
<HTML>
<HEAD>
<TITLE>Basic SVG shapes for backdrops</TITLE>
</HEAD>
<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>
</tr>
</thead>
<tbody>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M48 91C24.252 91 5 71.748 5 48V5h86v86H48" 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 5h43v86H5V48C5 24.252 24.252 5 48 5" 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 91H5V5h86v43c0 23.748-19.252 43-43 43z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48v43H5V5h43c23.748 0 43 19.252 43 43" 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="M91 48c0 23.748-19.252 43-43 43S5 71.748 5 48 24.252 5 48 5s43 19.252 43 43z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h86v86H5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M15 5h66c5.54 0 10 4.46 10 10v66c0 5.54-4.46 10-10 10H15C9.46 91 5 86.54 5 81V15C5 9.46 9.46 5 15 5z" 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 91C30 81 5 48.25 5 27 5 14.876 14.626 5 26.5 5S48 15.376 48 27c0-12.124 9.626-22 21.5-22S91 14.876 91 27c0 21.25-25 54-43 64z" 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="M5 5h86v86H48L5 48z" 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 5h43v86H5V48z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h86v43L48 91H5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h43l43 43v43H5z" 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="M5 91V48C5 24.252 24.252 5 48 5s43 19.252 43 43-19.252 43-43 43z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h43c23.748 0 43 19.252 43 43S71.748 91 48 91 5 71.748 5 48z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48v43H48C24.252 91 5 71.748 5 48S24.252 5 48 5s43 19.252 43 43" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48c0 23.748-19.252 43-43 43S5 71.748 5 48 24.252 5 48 5h43v43" 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 26c48.042 48.042 4.065 93.065-44 45s-4.042-93.042 44-45z" 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 26c-48.065 48.065-.13 92.14 45 44s3.065-92.065-45-44z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5c86 0 86 0 86 86C5 91 5 91 5 5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 5C5 5 5 5 5 91c86 0 86 0 86-86z" 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="M91 48c0 23.748-19.252 43-43 43H5V30.015L30 5h36l12.453 12.547C86.187 25.377 91 36.127 91 48z" 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 5c11.874 0 22.624 4.813 30.453 12.547L91 30v36L65.935 91H5V48C5 24.252 24.252 5 48 5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h60.995L91 30v36L78.453 78.453C70.623 86.187 59.873 91 48 91 24.252 91 5 71.748 5 48z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 5h43c23.748 0 43 19.252 43 43 0 11.874-4.813 22.624-12.547 30.453L66 91H30L5 65.967z" 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="M5 66V30l12.547-12.453C25.377 9.813 36.127 5 48 5c23.748 0 43 19.252 43 43v43H30.038z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 48c0-11.874 4.813-22.624 12.547-30.453L30 5h36l25 24.983V91H48C24.252 91 5 71.748 5 48z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 5v60.99L66 91H30L17.547 78.453C9.813 70.623 5 59.873 5 48 5 24.252 24.252 5 48 5z" 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 91c-11.874 0-22.624-4.813-30.453-12.547L5 66V30L29.892 5H91v43c0 23.748-19.252 43-43 43z" 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="M91 48v18L66 91H30L5 66V48C5 24.252 24.252 5 48 5s43 19.252 43 43" 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 91H30L5 66V30l12.547-12.453C25.377 9.813 36.127 5 48 5c23.748 0 43 19.252 43 43 0 11.874-4.813 22.624-12.547 30.453z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M30 91L5 66V30L30 5h18c23.748 0 43 19.252 43 43S71.892 91 48.072 91z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48c0 23.748-19.252 43-43 43-11.874 0-22.624-4.813-30.453-12.547L5 66V30L30 5h36l12.453 12.547C86.187 25.377 91 36.127 91 48z" 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="M5 48C5 24.252 24.252 5 48 5c11.874 0 22.624 4.813 30.453 12.547L91 30v36L66 91H30L17.547 78.453C9.813 70.623 5 59.873 5 48z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 48C5 24.252 24.252 5 48 5h18l25 25v36L66 91H48C24.252 91 5 71.748 5 48z" 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 91C24.252 91 5 71.748 5 48c0-11.874 4.813-22.624 12.547-30.453L30 5h36l25 25v36L78.453 78.453C70.623 86.187 59.873 91 48 91z" 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 91C24.252 91 5 71.748 5 48V30L30 5h36l25 25v18c0 23.748-19.252 43-43 43z" 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="M30 5h36l25 25v36L66 91H5V30z" 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 5l25 25v36L66 91H30L5 66V5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M30 5h36l25 25v61H30L5 66V30z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M30 5h61v61L66 91H30L5 66V30z" 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="M91 91H5V48C5 24.252 24.252 5 48 5s43 19.252 43 43z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 91V5h43c23.748 0 43 19.252 43 43S71.748 91 48 91z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M5 48C5 24.252 24.252 5 48 5h43v86H48.063C24.253 91 5 71.748 5 48z" 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 91C24.252 91 5 71.748 5 48V5h86v43c0 23.748-19.252 43-43 43z" 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="M30 5h36l25 25v61H5V30z" 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 5l25 25v36L66 91H5V5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M30 5h61v86H30L5 66V30z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 5v61L66 91H30L5 66V5z" 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="M30 5h36l25 25v36L66 91H30L5 66V30z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M10 5h33l5 10h43v76H5V15z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M15 5h23c6 0 10 4 10 10h33c5.54 0 10 4.46 10 10v56c0 5.54-4.46 10-10 10H15C9.46 91 5 86.54 5 81V15C5 9.46 9.46 5 15 5z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td>:-)</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>I wasn't really sure if it's okay to post this here, because this section of the forum is about programming after all, but because this thread is about optimizing svg code, and since the method I will describe will achieve that, I ultimately believe it will be beneficial for me to do so.
So, perhaps you will already have noticed when you work with paths, curves take considerably more code to describe as straights. And so a design with a lot of curves quickly becomes a big file.
I will try to propose a method to work with curves which will lessen the bloat, so to speak.
I work in Inkscape, and so the examples come from that program, but any decent vector design package would pretty much work similarly.
Let's take a simple circle which we converted into a path and saved to svg:
Not too spectacular, or big, but a whole lot bigger than a square.
What happens, is that the circle, converted to a path, has 4 nodes. One at the top, one at the bottom, and one at each side.
Each of these nodes has a position, and a line curves from each side of these nodes at a certain angle.
So that is all that information.
Here's the same size circle, but now modified by me:
Quite a bit of difference wouldn't you say?!
It might not seem to make a lot of difference in this case, but imagine a design with many curves.
The thing is that any curve can be defined by two nodes only, and since a circle is nothing more than two juxtaposed curves that have the same beginning and end, it stands to reason that a circle only needs two nodes to be expressed.
So I deleted two nodes from the circle.
How to do this in Inkscape:
First of all, learn to work with guides and the grid and snap. If you are in Inkscape, go to File-Document Properties-. Set the measuring unit of your document to pixels (px), set the size of your document (in this case 96x96), and set the backround transparancy.
Once you've done that, go to -View- and click on -Grid-. Now the grid is visible and you are ready to set up your guides.
The first guides you are going to create are the ones in the middle, because they give you a good point of reference, so you can easily spot if something is "off".
Click on your magnifying glass on the left bar and click and drag a window in the middle of your document. Boom, you're zoomed in. You can see that the rulers at the sides have changed accordingly.
Because we made a document sized 96x96, the middle of that is of course at 48x48. If you zoomed in at the correct spot, you should be able to see on the rulers left and above where 48 is supposed to be, if not, modify your view until you can.
Place your cursor over the ruler on the left. Now click and drag to the right, and you will notice that you are dragging a vertical line into your document. Keep dragging that line until you have reached the 48 mark of the horizontal ruler above. If it is exactly on the 48 mark, let it go. This is your first horizontal guide.
Now go stand over the horizontal ruler above with your curser and click and drag downward into your document, and keep dragging until you reached the 48 mark on the vertical ruler on the side, and then let go.
You have now mastered the fine art of placing guides, and this will help you tremendously.
We are going to place more guides to frame the circle we are going to make.
Let's go to the left corner of the document, and place a vertical guide (drag from the left to the right) at the 5 mark of the horizontal ruler above. Now we drag a horizontal guide to the 91 mark on the vertical ruler. Now we are going to the bottom right corner of our document. We drag a vertical guide to the 91 mark of the horizontal ruler, and a vertical guide to the 5 mark on the vertical ruler.
So now we have created a boundary we can draw our circle in, and with the help of our guides, we are certain the measurements will be exact.
Go to -View- and click on -Grid-. Now all that's left to see are the guides, and the grid has dissappeared from view. This is helpful, because as long as the grid is visible, the objects that you draw snap to it, and you do not always want that. Often, you want your objects to snap to the guides only.
Zoom out until you see the entire document.
Now we're going to draw the circle. Click on the circle icon on the left bar. Place you cursor over the topleft crossing of the guides, then click and drag your circle until you've reached the right bottom crossing, then let go. If it's not correct the first time you can always undo and try again.
Go back to -View-, and click on -Grid- again.
Click on the top arrow icon on the left bar. Does your circle now have little arrows at the corner and sides to indicate it is selected?! If not, click on your circle until it does.
Go to -Path- and click on -Object to Path-.
There. What we have just created, is the first example of the svg file, you know, the "long" one. And because we are working in Inkscape, it's very very very much longer than it needs to be, but we overcome that by having the files optimized by SVGO. But that's for later.
We are going to click on the icon underneath the arrow icon, which looks like a different kind of arrow. This is the node editor.
Do you see four little squares in your circle?! If not, click on your circle.
There are now 4 nodes on your circle. We want to reduce that. Let's click on the node at the top of the circle to select it. In the toolbar above the horizontal ruler, there's a number of icons, the one we need to click on is the second one, the one with the minus sign.
Whoah! Oh dear! What happened? That doesn't look good. Our figure is not as circular as we want it to be.
We need to correct this. Click on the node to the left. You will see two thin lines sticking out of the node under and above, which end in little ball. Those things are node handlers, and they modify node behavior. Right now, because we want the top part of our circle to look like a circle again, we need to adjust the node handler that comes out of the top of the node. Place your cursor over the little ball at the end of the line attached to the node. Now drag it toward the crossing of vertical guide and horizontal guide at the left top.
Now click on the right node and then click and drag its top node handler to the top right crossing of the horizontal and vertical guide.
It still doesn't look right. I know.
Now what we want, is for the circle top to be exactly there where the vertical guide we placed in the middle, and the horizontal guide at the top cross each other. So what we do now, is we adjust the node handlers of the left node up along the left vertical guide, and node handler of the right node up along the right vertical guide in such a way, that eventually, both node handlers are pretty much at the same height (it turns out that in practice, one can be a smidgen higher than the other), while the circle line at the top is exactly at the crossing of the middle guide and the top guide.
This exact procedure can be repeated for the bottom half of your circle.
And when you have, then you have the circle as in the second example.
It may seem a bit cumbersome, but once you get the hang of it, it's not so complicated.
So, perhaps you will already have noticed when you work with paths, curves take considerably more code to describe as straights. And so a design with a lot of curves quickly becomes a big file.
I will try to propose a method to work with curves which will lessen the bloat, so to speak.
I work in Inkscape, and so the examples come from that program, but any decent vector design package would pretty much work similarly.
Let's take a simple circle which we converted into a path and saved to svg:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48c0 23.748-19.252 43-43 43S5 71.748 5 48 24.252 5 48 5s43 19.252 43 43z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg>What happens, is that the circle, converted to a path, has 4 nodes. One at the top, one at the bottom, and one at each side.
Each of these nodes has a position, and a line curves from each side of these nodes at a certain angle.
So that is all that information.
Here's the same size circle, but now modified by me:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M91 48c0 57-86 58-86 0s86-57 86 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg>It might not seem to make a lot of difference in this case, but imagine a design with many curves.
The thing is that any curve can be defined by two nodes only, and since a circle is nothing more than two juxtaposed curves that have the same beginning and end, it stands to reason that a circle only needs two nodes to be expressed.
So I deleted two nodes from the circle.
How to do this in Inkscape:
First of all, learn to work with guides and the grid and snap. If you are in Inkscape, go to File-Document Properties-. Set the measuring unit of your document to pixels (px), set the size of your document (in this case 96x96), and set the backround transparancy.
Once you've done that, go to -View- and click on -Grid-. Now the grid is visible and you are ready to set up your guides.
The first guides you are going to create are the ones in the middle, because they give you a good point of reference, so you can easily spot if something is "off".
Click on your magnifying glass on the left bar and click and drag a window in the middle of your document. Boom, you're zoomed in. You can see that the rulers at the sides have changed accordingly.
Because we made a document sized 96x96, the middle of that is of course at 48x48. If you zoomed in at the correct spot, you should be able to see on the rulers left and above where 48 is supposed to be, if not, modify your view until you can.
Place your cursor over the ruler on the left. Now click and drag to the right, and you will notice that you are dragging a vertical line into your document. Keep dragging that line until you have reached the 48 mark of the horizontal ruler above. If it is exactly on the 48 mark, let it go. This is your first horizontal guide.
Now go stand over the horizontal ruler above with your curser and click and drag downward into your document, and keep dragging until you reached the 48 mark on the vertical ruler on the side, and then let go.
You have now mastered the fine art of placing guides, and this will help you tremendously.
We are going to place more guides to frame the circle we are going to make.
Let's go to the left corner of the document, and place a vertical guide (drag from the left to the right) at the 5 mark of the horizontal ruler above. Now we drag a horizontal guide to the 91 mark on the vertical ruler. Now we are going to the bottom right corner of our document. We drag a vertical guide to the 91 mark of the horizontal ruler, and a vertical guide to the 5 mark on the vertical ruler.
So now we have created a boundary we can draw our circle in, and with the help of our guides, we are certain the measurements will be exact.
Go to -View- and click on -Grid-. Now all that's left to see are the guides, and the grid has dissappeared from view. This is helpful, because as long as the grid is visible, the objects that you draw snap to it, and you do not always want that. Often, you want your objects to snap to the guides only.
Zoom out until you see the entire document.
Now we're going to draw the circle. Click on the circle icon on the left bar. Place you cursor over the topleft crossing of the guides, then click and drag your circle until you've reached the right bottom crossing, then let go. If it's not correct the first time you can always undo and try again.
Go back to -View-, and click on -Grid- again.
Click on the top arrow icon on the left bar. Does your circle now have little arrows at the corner and sides to indicate it is selected?! If not, click on your circle until it does.
Go to -Path- and click on -Object to Path-.
There. What we have just created, is the first example of the svg file, you know, the "long" one. And because we are working in Inkscape, it's very very very much longer than it needs to be, but we overcome that by having the files optimized by SVGO. But that's for later.
We are going to click on the icon underneath the arrow icon, which looks like a different kind of arrow. This is the node editor.
Do you see four little squares in your circle?! If not, click on your circle.
There are now 4 nodes on your circle. We want to reduce that. Let's click on the node at the top of the circle to select it. In the toolbar above the horizontal ruler, there's a number of icons, the one we need to click on is the second one, the one with the minus sign.
Whoah! Oh dear! What happened? That doesn't look good. Our figure is not as circular as we want it to be.
We need to correct this. Click on the node to the left. You will see two thin lines sticking out of the node under and above, which end in little ball. Those things are node handlers, and they modify node behavior. Right now, because we want the top part of our circle to look like a circle again, we need to adjust the node handler that comes out of the top of the node. Place your cursor over the little ball at the end of the line attached to the node. Now drag it toward the crossing of vertical guide and horizontal guide at the left top.
Now click on the right node and then click and drag its top node handler to the top right crossing of the horizontal and vertical guide.
It still doesn't look right. I know.
Now what we want, is for the circle top to be exactly there where the vertical guide we placed in the middle, and the horizontal guide at the top cross each other. So what we do now, is we adjust the node handlers of the left node up along the left vertical guide, and node handler of the right node up along the right vertical guide in such a way, that eventually, both node handlers are pretty much at the same height (it turns out that in practice, one can be a smidgen higher than the other), while the circle line at the top is exactly at the crossing of the middle guide and the top guide.
This exact procedure can be repeated for the bottom half of your circle.
And when you have, then you have the circle as in the second example.
It may seem a bit cumbersome, but once you get the hang of it, it's not so complicated.
-
technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
you can get really close as far as Euclid and Pythagoras would be concerned
The arc method doesn't let you make a complete circle, but you can make 99.99% of one and then connect it with an imperceptible straight line:
If you look at svg many light SVG libraries work, you'll see similar sentiments to your findings. Most of them convert everything into a series of quadratic bezier paths
The arc method doesn't let you make a complete circle, but you can make 99.99% of one and then connect it with an imperceptible straight line:
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
<path d="M48 4a44 44 0 1 0 .1 0z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg> 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].
Audio
Code: Select all
<HTML>
<HEAD>
<TITLE>Basic SVG shapes for audio</TITLE>
</HEAD>
<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>
</tr>
</thead>
<tbody>
<tr>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M59 61h5m-31 0h5m10 10V51m-6 18V53m12 16V53m32-2l-5 25-15-2 5-26h3c0-35-52-35-52 0h3l5 26-15 2-5-25 5-3c0-44 66-44 66 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="M70 24l4-4m-4 52l4 4m-50-4l-4 4m4-52l-4-4m28-10v5m0 66v5m33-38h5m-71 0h-5m26.036-9l3-3-9-6 6 9M85 85v-8l-20 8zM74 48c0 34-52 35-52 0s52-34 52 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="M68 32h6v12h-6m-6 4L34 80m0-32l28 32m-7-32l7 8-21 24-7-8zM34 64l14-16 14 16-14 16zm0-8l7-8 21 24-7 8zm-6-30h40v60H28zm6 6h28v12H34zm16 0v12m5-12v12m7-18L10 10" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M68 32h6v12h-6M55 32v12m-5-12v12M34 32h28v12H34zm-6-6h40v60H28zm6 27h28m-28 6h28m-28 6h28m-28 6h28m-28 6h28m0-67v16" 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="M41 36H24v24h17l30 26V10z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M54.5 36.742l7.5-12.99M41.5 59.257L34 72.248m26.803-26.505l14.772-2.605m-40.378 7.12L20.425 52.86M50 48c0 2.692-4 2.764-4 0 0-2.65 4-2.636 4 0zm-2 8c-11 0-11-16 0-16s11 16 0 16zm33-8c0 44-66 44-66 0s66-44 66 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="M73 48v33M63 15v66M53 15v66M43 48v33M33 15v66M23 48v33M13 15v66h70V15h-6v33h-8V15H47v33h-8V15H27v33h-8V15z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M77 50h-8V17H47v33h-8V17H27v33h-8V17h-6v-4h70v4h-6zm-54 0v31m10-63v63m10-31v31m10-63v63m10-63v63m10-31v31M13 18v63m70-63v63m-70 2h70" 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="M76 66H51m25-6H51m25-6H51m25-6H51m25-6H51m25-6H51m25-6H51M20 66h25m-25-6h25m-25-6h25M20 30h25m-25 6h25m-25 6h25m-25 6h25m21 36v-8m-36 8v-8m6 9v-9m24 9v-9m-6 10V76M42 86V76m6 10V76m18-64v8m-36-8v8m30-9v9m-24-9v9m6-10v10m12-10v10m-6-10v10m-28 0c5-14 51-14 56 0v56c-5 14-51 14-56 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="M61.538 77.23c-2.058-4.415 4.872-12.666 14.616-12.666V22.667l-44.82 7.795v43.846C31.333 86.974 12.93 90.415 10.87 86c-2.06-4.415 5.846-11.692 14.615-11.692V19.744L82 10v54.564C82 77.23 63.597 81.646 61.538 77.23z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M55 74c-2.06-4.415 6-15 21-15V32l-40 7v30c0 17-23.82 19.357-26 15-2-4 5-15 20-15V23l52-10v46c0 17-24.94 19.415-27 15z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M46 69h4v4h-4zm16-7h4v4h-4zm-32 0h4v4h-4zm39-16h4v4h-4zm-46 0h4v4h-4zm58 2c0 44-66 44-66 0 0-15 12-30 26.35-32.33 2.148-.44 4.372 7.268 6.65 7.268 2.278 0 4.852-7.378 7-6.938 14 2 26 17 26 32z" 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="M72 48L24 86V10z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M36 10v76H24V10zm24 0h12v76H60z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg>
</td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M60 10h12v76H60V58L24 86V10l36 28z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M36 10H24v76h12V58l36 28V10L36 38z" 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="M14 86V10l28 22V10l28 22V10h12v76H70V64L42 86V64z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M82 86V10L54 32V10L26 32V10H14v76h12V64l28 22V64z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M10 73h76v12H10zm38-61L10 60h76z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M12 58h14v12H12zm19-19h14v12H31zm19 25h14v12H50zm19-40h14v12H69zm-50-9v43m0 11.778V81m19-30.245V81m0-42.585V15m19 0v49m0 12.29V81m19-45v45m0-57.667V15" 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="M75 75l6 6M42.697 31.883L78.052 71.48l-7.07 7.072-39.6-35.355-9.9-4.243C10.17 27.64 27.14 10.67 38.455 21.984zm-21.214 7.07l16.97-16.97m-7.07 21.214l11.314-11.314" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96">
<path d="M80 77v3m-5-5v4m-5-7v6m-5-11v10m-5-14v13m-5-18v17m-5-21v20m-5-23v22m-5-23v22m-5-21v21m-5-17v17m-5-12v13m-5-7v9m-5-3v5m-5 2l38-65 38 65c-10-3-10-3-17-8-27-23-27-36-59 8z" fill="#fff" stroke="#444" stroke-width="3"/>
</svg></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
-
technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
Thank you. I'll post some more in time.
The last one is an attempt to recreate the logo for Ardour, which is the most prominent DAW (digital audio workstation) for Linux.
http://ardour.org/
I kind of felt it belonged in there.
The last one is an attempt to recreate the logo for Ardour, which is the most prominent DAW (digital audio workstation) for Linux.
http://ardour.org/
I kind of felt it belonged in there.
-
technosaurus
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
That's actually a pretty good likeness. I have a cantankerous intel sound card that I don't typically bother to set up, so I haven't used it.solo wrote:Thank you. I'll post some more in time.
The last one is an attempt to recreate the logo for Ardour, which is the most prominent DAW (digital audio workstation) for Linux.
http://ardour.org/
I kind of felt it belonged in there.
I am actually thinking about making this into a game similar to codecombat.com, ... I haven't decided whether to make it control a robot (tire tracks) or a flying saucer (crop circles)...
It will basically check how close can you duplicate simple to complex images and keep the results on a leaderboard... basically the gamification of vector art. I need to work out a good scoring algorithm based at least on code size, likeness and some difficulty parameter (perhaps based on a potrace).
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].
That is not a bad idea. But to be honest, my motivation bottoms out immediately by the mere prospect of creating in a competitive context. Others thrive in it, I do not.
You'd have to be clear on which criteria carry what "weight" for a game to be well balanced.
And aestetic criteria (is it pretty?) are by nature very subjective and therefore impossible to quantize.
I suppose if you had to make a hierarchical evaluation structure, it would be something like:
1. Is it an svg?
2. Is it small enough?
3. Is it relevant to the given subject?
4. Is it pretty?
You'd have to be clear on which criteria carry what "weight" for a game to be well balanced.
And aestetic criteria (is it pretty?) are by nature very subjective and therefore impossible to quantize.
I suppose if you had to make a hierarchical evaluation structure, it would be something like:
1. Is it an svg?
2. Is it small enough?
3. Is it relevant to the given subject?
4. Is it pretty?
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.
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
- Posts: 4853
- Joined: Mon 19 May 2008, 01:24
- Location: Blue Springs, MO
- Contact:
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
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
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].
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.
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-:
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.
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>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>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.
- Attachments
-
- calcexample01.jpg
- (2.2 KiB) Downloaded 350 times
-
- calcexample02.jpg
- (2.26 KiB) Downloaded 343 times
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.
Happy New Year! 
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>