[TW5] How create SVG icons

[andrew.j.harrison84]

I've been using a program on my phone called isopix and have a PNG file with what I want to turn into a Tiddlywiki icon for a plugin but I can't figure out how to get it to be an embedded svg icon that uses polygon points like the native icons in Tiddlywiki. Anyone have any suggestions?

Sent from my Samsung Epic™ 4G Touch

-------- Original message --------
Subject:null
From:Tradine Harrison <seag...@hotmail.com>
To:"andrew. j. harrison84" <andrew.j....@gmail.com>
Cc:

Sent on the new Sprint Network

[Alex Hough]

Andrew,

have you tried converting the image?

A quick google for "convert png to svg" returns this [1]

Alex

[1] http://image.online-convert.com/convert-to-svg

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/xa11e20jc9y3ducf1p6757uy.1435322782876%40email.android.com.
For more options, visit https://groups.google.com/d/optout.

[c pa]

Cool icon. Once you've converted the icon you need to remove the <?xml . . .> instruction tag and edit the width and height attributes so it is icon sized. Here's the svg

<svg
 width="22px" height="22px" viewBox="0 0 176.000000 176.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,176.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M705 1746 c-16 -8 -95 -80 -175 -160 l-145 -146 -148 0 c-172 0 -208
-10 -226 -60 -8 -23 -11 -218 -11 -662 0 -695 -1 -685 60 -707 23 -8 229 -11
702 -11 750 0 728 -2 748 67 6 21 10 85 8 143 l-3 105 -75 0 -75 0 -5 -75 -5
-75 -595 0 -595 0 0 515 0 515 595 0 595 0 5 -155 5 -155 75 0 75 0 3 225 c2
145 -1 239 -8 263 -17 58 -48 67 -227 67 l-148 0 -145 146 c-173 175 -209 194
-285 160z m257 -233 c148 -147 178 -182 176 -203 l-3 -25 -380 0 c-372 0 -380
0 -383 20 -4 29 355 385 388 385 17 0 71 -47 202 -177z"/>
<path d="M244 1026 c-3 -8 -4 -25 -2 -38 l3 -23 315 0 315 0 0 35 0 35 -313 3
c-265 2 -313 0 -318 -12z"/>
<path d="M907 762 l-167 -167 170 -170 c111 -111 173 -166 179 -160 6 6 12 62
13 125 l3 115 315 5 315 5 0 80 0 80 -315 5 -315 5 -5 119 c-3 67 -9 121 -15
123 -6 2 -86 -72 -178 -165z"/>
<path d="M244 786 c-3 -8 -4 -25 -2 -38 3 -23 3 -23 158 -23 l155 0 0 35 0 35
-153 3 c-126 2 -153 0 -158 -12z"/>
<path d="M244 546 c-3 -8 -4 -25 -2 -38 3 -23 3 -23 158 -23 l155 0 0 35 0 35
-153 3 c-126 2 -153 0 -158 -12z"/>
<path d="M244 306 c-3 -8 -4 -25 -2 -38 l3 -23 235 0 235 0 0 35 0 35 -233 3
c-195 2 -233 0 -238 -12z"/>
</g>
</svg>

[Andrew]

Hi Alex, thank you for help. I tried that site but the result is an svg file and I don't know how to get access to the html text inside to include it as an embedded icon. Any more suggestions welcome, please.

[Andrew]

Hi c pa, thank you for the converted html with all the polygon data. Thank you. For some reason when I put it in tiddlywiki, it looks like it is to big and also partly cut off. What did you use to get all the polygon data? I'm going to try again later from my computer at home. I was trying to use my phone to do this, maybe that is the problem. Again thank you, you showed me that it is possible. I'm like a kid waiting for a birthday presant.

[Alex Hough]

c pa,

I pasted the code into tw.com and it didn't work.

Is it just me?

Alex

On 27 June 2015 at 00:59, Andrew <andrew.j....@gmail.com> wrote:

Hi c pa, thank you for the converted html with all the polygon data. Thank you. For some reason when I put it in tiddlywiki, it looks like it is to big and also partly cut off. What did you use to get all the polygon data? I'm going to try again later from my computer at home. I was trying to use my phone to do this, maybe that is the problem. Again thank you, you showed me that it is possible. I'm like a kid waiting for a birthday presant.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f9273562-09c2-495b-82d4-31de63d376a5%40googlegroups.com.

[Richard Smith]

Hi Alex,

I did the same and it does work, but not if you set the tiddler type to SVG - which is confusing to me.

@Andrew - SVG graphics are really cool, but they took me a while to get my head around at first - open the SVG image in your browser and then choose view-source and there it is. That's the code that the browser uses to draw the picture - you can edit it by hand in a text-editor. I also had some success with this google-code SVG editor - http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html - but it can be a bit flaky.

[Alex Hough]

Richard,

likewise! I change it to a normal tiddler and bingo! 

I presume that's a copy to clipboard button....

could a whole tiddler be copied to clipboard from the toolbar?

Alex

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cfd04941-1d97-406c-8aea-d02d92e3103c%40googlegroups.com.