Hi Danielo,

Have a look at the core images for the general structure, e.g. 
$:/core/images/new-button.

That contains the following (left out most of the numbers):

<svg class="tw-image-new-button tw-image-button" viewBox="83 81 50 50" width
="22pt" height="22pt"><path d="M 101.25 ...... 112.5 Z"/></svg>


The class tw-image-button is always there and there is a button specific 
class, here tw-image-new-button.
There is no color information (no stroke and fill attributes) in the images 
so the color can be controlled elesewhere (theme).

On Monday, February 3, 2014 6:41:02 PM UTC+1, Danielo Rodríguez wrote:
>
> Hello
>
> I'm trying to add a new button in svg format. I would like to make it like 
> the core ones. I mean, depending on the theme display the button in 
> different colors. Also changing the color on mouse over.
> Here is the SVG code.
>
> <svg xmlns="http://www.w3.org/2000/svg"width="22pt"; height="22pt"
> class="tw-image-button" viewBox="0 0 100 100">
> <polygon points="73.269,41.466 63.833,41.466 63.833,32.031 68.551,36.749 
> "/>
> <path 
> d="M39.097,76.828V29.203h20.736v14.264c0,1.104,0.896,2,2,2h14.264v31.361H39.097z"/>
> </svg>
>
>
>  
* TW5 does not like the xmlns part so take it out.
* Add an extra class if you want to style your button in some way.
* With the viewbox you can control the part of the button that will be 
shown (there is quite some 'white space' around the button as can be seen 
if you copy the code to the Google SVG editor 
http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html. I 
adjusted the values in the viewbox a little bit (still not optimal I think) 
as you can see.

<svg class="tw-image-xxx-button tw-image-button" width="22pt" height="22pt" 
viewBox="30 20 70 70">
<polygon points="73.269,41.466 63.833,41.466 63.833,32.031 68.551,36.749 "/>
<path d=
"M39.097,76.828V29.203h20.736v14.264c0,1.104,0.896,2,2,2h14.264v31.361H39.097z"
/>
</svg>

Qua color this icon will follow the themes.

Cheers,

Ton

 

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

Reply via email to