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 22 Aug 2017, 22:46
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 2 of 6 [83 Posts]   Goto page: Previous 1, 2, 3, 4, 5, 6 Next
Author Message
jamesbond

Joined: 26 Feb 2007
Posts: 3051
Location: The Blue Marble

PostPosted: Sat 28 Nov 2015, 11:18    Post subject:  

solo wrote:
You can link to a defined object in an external file by using xlink. Linking an object from within the same file through xlink works fine. However, as soon as you try to do the same with an external file, It stops working in the system, and will only work in your webbrowser.

Your librsvg may be defective. Version 2.34 works.

_________________
Fatdog64, Slacko and Puppeee user. Puppy user since 2.13.
Contributed Fatdog64 packages thread.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sat 28 Nov 2015, 12:18    Post subject:  

jamesbond wrote:
Your librsvg may be defective. Version 2.34 works.


Well I have version 2.36.1, which works fine in any other respect.

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

Code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48px" height="48px" viewBox="0 0 96 96">
<defs>
<g id="icon-1">
<path style="fill:inherit stroke:inherit" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"/>
</g>
</defs>
<use xlink:href="#icon-1" style="fill:blue; stroke:white"/>
</svg>


This just works everywhere. In the system, in ViewNoir, in the browser. So that's fine.

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

Code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="48px" height="48px" viewBox="0 0 96 96">
<g externalResourcesRequired="true">
<use xlink:href="defs.svg#icon-1" style="fill:blue; stroke:white"></use>
</g>
</svg>


You have to forgive me for the syntax, I was trying different ways of saying the same thing believing I made a mistake somewhere.

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

Code:
<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <defs>
        <path id="icon-1" style="fill:inherit stroke:inherit" stroke-width="3" d="M24 6h48v84h-48zm6 6h36v24h-36zm3 30h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm12-48m0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6zm0 12h6v6h-6z"></path>
        </defs>
</svg>


And this only seems to work in the browser.

Am I overlooking something very obvious?
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4731

PostPosted: Sat 28 Nov 2015, 13:35    Post subject:  

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.
_________________
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 28 Nov 2015, 14:34    Post subject:  

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-team/+archive/ubuntu/svgcleaner/+packages
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4731

PostPosted: Sun 29 Nov 2015, 03:20    Post subject:  

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

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

Joined: 26 Feb 2007
Posts: 3051
Location: The Blue Marble

PostPosted: Sun 29 Nov 2015, 09:05    Post subject:  

solo wrote:
jamesbond wrote:
Your librsvg may be defective. Version 2.34 works.


Well I have version 2.36.1, which works fine in any other respect.

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/+source/librsvg/+bug/1299267. It's a confirmed bug but there is no follow-up action.

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


This didn't work with newer librsvg versions; I tested that with tahrpup (at that time still carrying 2.36.1). When I downgraded the version to 2.34, it worked. I reported that to 666philb, and the latest tahrpup ISO now uses the librsvg 2.34.

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.
xscreenshot00000.png
 Description   
 Filesize   3.55 KB
 Viewed   311 Time(s)

xscreenshot00000.png


_________________
Fatdog64, Slacko and Puppeee user. Puppy user since 2.13.
Contributed Fatdog64 packages thread.
Back to top
View user's profile Send private message 
solo


Joined: 14 Nov 2013
Posts: 390

PostPosted: Sun 29 Nov 2015, 13:37    Post subject:  

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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Thu 03 Dec 2015, 10:58    Post subject:  

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.

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


Joined: 14 Nov 2013
Posts: 390

PostPosted: Wed 09 Dec 2015, 15:49    Post subject:  

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:

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


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:

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


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


Joined: 18 May 2008
Posts: 4731

PostPosted: Wed 09 Dec 2015, 23:09    Post subject:  

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


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

_________________
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 12 Dec 2015, 15:06    Post subject:  

Audio

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


Joined: 18 May 2008
Posts: 4731

PostPosted: Sun 13 Dec 2015, 01:36    Post subject:  

lookin' good. What was that last image though. It makes a nice logo.
_________________
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 13 Dec 2015, 04:41    Post subject:  

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


Joined: 18 May 2008
Posts: 4731

PostPosted: Mon 14 Dec 2015, 06:29    Post subject:  

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

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

_________________
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 14 Dec 2015, 14:47    Post subject:  

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