Converting from svg format to javafx css svg

Alexander Kouznetsov alexander.kouznetsov at
Thu Jan 16 00:48:33 PST 2014

For JavaFX 8, please refer to

You can use -fx-min-width, -fx-pref-width, -fx-max-width and 
corresponding height properties to set region size.

Best regards,
Alexander Kouznetsov
(408) 276-0387

On 15 дек 2013 11:17, Pedro Duque Vieira wrote:
> I think it is an interesting use of CSS - sizing stuff..  I think its the
> only way that currently exists, i.e. using padding.
> P.s.: what happened to the width and height property that was discussed in
> this mailing list?
>   On Dec 15, 2013 7:11 AM, "Gerrit Grunwald" <han.solo at> wrote:
>> Hi Pedro,
>> If you set -fx-scale-shape: true; you just have to know the aspect ratio
>> of your svg path and can control the size of the Region in Java code
>> (either in the skin or in the region class).
>> To be honest I never tried to size a shape by using only padding in css.
>> Cheers,
>> Gerrit
>> Am 15.12.2013 um 07:37 schrieb Pedro Duque Vieira <
>> pedro.duquevieira at>:
>> Hi Gerrit,
>> Yeah, thanks putting -fx-scale-shape: false does make the svg shape the
>> original size as seen in Illustrator.
>> I'm still left with a doubt though, you say you resize the region to make
>> the svg the way you want to, how do you do that? programmatically, through
>> java? How about doing it through CSS? That's why I was using padding, but I
>> don't want to disrupt the aspect ratio..
>> Thanks, best regards,
>> On Sat, Dec 14, 2013 at 11:47 PM, Gerrit Grunwald <han.solo at>wrote:
>>> Hi Pedro,
>>> If I got you right you have scaling problems with the -fx-shape in css
>>> right? So if you use
>>> -fx-scale-shape: false;
>>> the svg path should be exactly the same size as the original path from
>>> Illustrator and if you would like to scale the shape to the size of the
>>> Region you just set it to true and set the size if the Region to the size
>>> you need the svg path.
>>> If your svg path has a certain aspect-ratio you should take care about it
>>> by resizing the Region correctly. That is the way I use it everywhere and
>>> it works really nicely. I usually don't use the padding for the svg path in
>>> css to resize it.
>>> Just my 0.02€...
>>> Cheers,
>>> Gerrit
>>>> Am 14.12.2013 um 22:00 schrieb Pedro Duque Vieira <
>>> pedro.duquevieira at>:
>>>> Hi,
>>>> While working in JMetro (Metro like controls for javafx) I have the
>>>> following process for creating svg graphics using javafx css:
>>>> 1- I create the vector graphics in Adobe Illustrator
>>>> 2- save the file in svg format
>>>> 3- get the svg path notation from the svg file and use it with javafx
>>>> -fx-shape css property
>>>> The thing that I haven't still mastered is how does the size of the
>>> vector
>>>> graphics in Illustrastor translate to the size I have to input in the
>>>> -fx-padding css property. I know I have to enter half the value of width
>>>> for the left and right and half the value of the height for the top and
>>>> bottom but still that doesn't seem to work. It's still more of a
>>> process of
>>>> trial and error for me.
>>>> Thanks in advance.
>>>> --
>>>> Pedro Duque Vieira
>> --
>> Pedro Duque Vieira

More information about the openjfx-dev mailing list