Hi everyone,

Please help me with the issue below.

I'm trying to create an icon to use it in my wpf application. I import my bitmap image to the Inkspace and use Trace Bitmap. It all works fine except that the selected area under my figure becomes just the size that fits the image. Rectangular, not square as icon should be. So, Inkscape saves only that rectangular selection area around the object, and when I add xaml of the figure to my app it looks not well. It becomes wide and low - transformed to fit a square.

Is there any way to change the size of area that will be saved?


I'm sorry if there's something wrong with my question - I'm new to Inkscape.

Djubiona wrote:Hi everyone,

Please help me with the issue below.

I'm trying to create an icon to use it in my wpf application. I import my bitmap image to the Inkspace and use Trace Bitmap. It all works fine except that the selected area under my figure becomes just the size that fits the image. Rectangular, not square as icon should be. So, Inkscape saves only that rectangular selection area around the object, and when I add xaml of the figure to my app it looks not well. It becomes wide and low - transformed to fit a square.

I don't know what "wpf" means. For your app do you need the icon in SVG format or in a raster format (PNG, JPG, BMP, etc)?...
In any case the size of the canvas, the "page" that allways appears below any design is done in Inkscape can be the size of the icon you want to obtain.

Please, consult the Inkscape Guide

Or just press shift+ctrl+d to go the document properties dialog.

Greetings

There are a ot of ways to use svg in wpf http://stackoverflow.com/questions/3526366/wpf-what-is-the-correct-way-of-using-svg-files-as-icons-in-wpf
Which one do you use ?

But as hulf2012 said the solution is probably to go to document properties and set a square ratio. center your shape on the page and save.

Dear all,

thanks for advice, but changing canva''s size doesn't help. I've honestly tried: . It's exactly the area inside of dotted line that needs to be squared. I've took a closer look on document's properties, but didn't find anything about changing the area.

Dear v1nce,

Thats the way which I use to add the image to the app:


It's XAML code. So the matter isn't really in using SVG. PNG can be converted directly to XAML.

Finally I got what I wanted by making the source image wide and low, so after transforming it looks just right.

But it would be great if someone knows the proper way. For example, it works on icons from this source: http://modernuiicons.com/.
I've downloaded acorn and imported it in Inkscape - it really got square dotted line though acorn is small.

Any comments are appreciated. Thanks a lot!

Here are three possible solutions how to enlarge the bounding box of that object.
Wondering if one of them could work.

Djubiona wrote:Dear all,


Dear v1nce,

Thats the way which I use to add the image to the app:


It's XAML code. So the matter isn't really in using SVG. PNG can be converted directly to XAML.

Finally I got what I wanted by making the source image wide and low, so after transforming it looks just right.

But it would be great if someone knows the proper way. For example, it works on icons from this source: http://modernuiicons.com/.
I've downloaded acorn and imported it in Inkscape - it really got square dotted line though acorn is small.

Any comments are appreciated. Thanks a lot!

I don't understand how you "imported" it in xaml. Did you cut/paste the content of the attribute d of the (svg) path into your LogoData ?
How do you use the LogoData ?
Did you proceed the same for acorn logo ?

The path itself doesn't (explicitly) tell what the width/height should be.
It just tells : move to x,y then draw to x1,y1 ... then draw to xn, yn.
So the renderer can "guess" the surrounding border : it's x min y min, xmax y max.
With ambiguity.
Exemple :
If I want to draw a 20x40 square centered onto a 200x100 "icon" I could use
M 90,30 110,30 110,70 90,70 90,30
the rendered can guess the minimal width and height of the shape : it's xmax - xmin = 110-90 = 20 and ymax - ymin = 70-30 = 40.

but we didn't start our drawing at 0,0, we started with an offset (we started at 90,30)
So the renderer can also guess the minimal size needed to draw the shape onto a canvas.
It's xmax-0 and ymax-0 = 110 and 70.
That's all the renderer can (reasonably) guess. With this little information it can not guess we want our shape centered on a 200,100 icon.
You got to tell him explicitly.
This is why there's width and height in the svg definition of the acorn file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" xml:space="preserve">
(and you'll find those information in any file created with inkscape too)

So those informations are necessarily buried (in some ways) somewhere in your code.

Hello
A captain Obvious idea:
I notice that in code of modernuiicons there' s is some code tags that your example doesn't have, related with the width and the height of the image. So, why don't just insert that tags in your code, at least just to give a try?.

Thanks for posting those examples. However, Is based your development in some tutorial, or documentation (of free access)?

I've googled a little about exporting from SVG to XAML. But I don't find any perfect solution or there is old workarounds. It seems that Inkscape can save to XAML code, but It also seems that it's not a perfect conversion.

I hate when something that seems simple, in fact is very complicated!!

Greetings

Dear all,

great thanks for your efforts! Finally you were all right, the difference is just in the length of the way.

It seems that my main problem was that I didn't know how this area is called. Lazur URH gave the name - bounding box, and I've found the decisions he speaks of at once. For example:
http://www.inkscapeforum.com/viewtopic.php?f=5&t=4494

Dear Lazur URH,

special thanks for giving me the fish too Your example worked perfect for me!

Dear hulf2012,

my development is based in free accessed tutorials and documentation from the mui project page on github: https://github.com/firstfloorsoftware/mui.
Also, suprisingly many authors on the web share their projects for free.