How to resize button containing svg image

Question

I want to place a svg image inside a button, and then I want to be able to resize the button to any size.

First, this is how I've done the loading and placing of the svg image inside the button:

SVGPath svg = new SVGPath();
        svg.setContent("M87.5,50.002C87.5,29.293,70.712,12.5,50,12.5c-20.712,0-37.5,16.793-37.5,37.502C12.5,70.712,29.288,87.5,50,87.5
        c6.668,0,12.918-1.756,18.342-4.809c0.61-0.22,1.049-0.799,1.049-1.486c0-0.622-0.361-1.153-0.882-1.413l0.003-0.004l-6.529-4.002
        L61.98,75.79c-0.274-0.227-0.621-0.369-1.005-0.369c-0.238,0-0.461,0.056-0.663,0.149l-0.014-0.012
        C57.115,76.847,53.64,77.561,50,77.561c-15.199,0-27.56-12.362-27.56-27.559c0-15.195,12.362-27.562,27.56-27.562
        c14.322,0,26.121,10.984,27.434,24.967C77.428,57.419,73.059,63,69.631,63c-1.847,0-3.254-1.23-3.254-3.957
        c0-0.527,0.176-1.672,0.264-2.111l4.163-19.918l-0.018,0c0.012-0.071,0.042-0.136,0.042-0.21c0-0.734-0.596-1.33-1.33-1.33h-7.23
        c-0.657,0-1.178,0.485-1.286,1.112l-0.025-0.001l-0.737,3.549c-1.847-3.342-5.629-5.893-10.994-5.893
        c-10.202,0-19.877,9.764-19.877,21.549c0,8.531,5.101,14.775,13.632,14.775c4.75,0,9.587-2.727,12.665-7.035l0.088,0.527
        c0.615,3.342,9.843,7.576,15.121,7.576c7.651,0,16.617-5.156,16.617-19.932l-0.022-0.009C87.477,51.13,87.5,50.569,87.5,50.002z
         M56.615,56.844c-1.935,2.727-5.101,5.805-9.763,5.805c-4.486,0-7.212-3.166-7.212-7.738c0-6.422,5.013-12.754,12.049-12.754
        c3.958,0,6.245,2.551,7.124,4.486L56.615,56.844z");

Button button = new Button();
        button.setGraphic(svg);

I've tried putting the SVGPath inside a Group object, and then I've scaled that Group, like this:

Group graphics = new Group();
graphics.getChildren().add(svg);
graphics.getTransforms().add(new Scale(0.2, 0.2, 0 , 10));

Button button = new Button();
button.setGraphic(graphics);

And that does change the size of the svg image. The problem is that the size of the button doesn't change accordingly. It has the same size as if the image was never rescaled. It doesn't matter if I set the max size of the button. I can only make the button bigger, but not smaller.

There seems to be very limited documentation on using SVG images in JavaFx, so if anyone could help me out that would be greatly appreciated.

Update: @ItachiUchiha pointed out that I can just rescale the button using setScaleX(..) andsetScaleY(..), and the svg image inside will get rescaled with it. However, doing this doesn't seem to change the size property of the button. This means that the pane containing the button will still occupy the same space as if the button wasn't rescaled. And setting a max size on the pane doesn't help. In addition, the setScaleY and X methods rescales all of the button, including the borders of the button. This gives the button another appearance than buttons containing plain text. My pane will contain both buttons with svg content and buttons with plain text content, and they should all look the same apart from their content.

Update 2: @ItachiUchiha's edited response made everything clear. Marked as the answer.

Answer 1

SVG images can be re-size themselves and fit its container. You can re-size the button and the SVG image will fit its boundary.

Button button = new Button();
button.setGraphic(svg);
// Re-size the button
button.setScaleX(0.5);
button.setScaleY(0.5);

---

EDIT - To resize buttons according to the parent.

If you want to re-size button according to the Parent and also scale the image according to it. You can bind the scale Property of the image to the height and width of the Button. Whenever the size of the Parent changes, change the button's prefSize as well.

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class Main extends Application{

    private final int MIN_BUTTON_SIZE = 10;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        HBox root = new HBox();
        root.setAlignment(Pos.CENTER);
        SVGPath svg = new SVGPath();
        svg.setContent("M87.5,50.002C87.5,29.293,70.712,12.5,50,12.5c-20.712,0-37.5,16.793-37.5,37.502C12.5,70.712,29.288,87.5,50,87.5" +
                "c6.668,0,12.918-1.756,18.342-4.809c0.61-0.22,1.049-0.799,1.049-1.486c0-0.622-0.361-1.153-0.882-1.413l0.003-0.004l-6.529-4.002" +
        "L61.98,75.79c-0.274-0.227-0.621-0.369-1.005-0.369c-0.238,0-0.461,0.056-0.663,0.149l-0.014-0.012" +
        "C57.115,76.847,53.64,77.561,50,77.561c-15.199,0-27.56-12.362-27.56-27.559c0-15.195,12.362-27.562,27.56-27.562" +
        "c14.322,0,26.121,10.984,27.434,24.967C77.428,57.419,73.059,63,69.631,63c-1.847,0-3.254-1.23-3.254-3.957" +
        "c0-0.527,0.176-1.672,0.264-2.111l4.163-19.918l-0.018,0c0.012-0.071,0.042-0.136,0.042-0.21c0-0.734-0.596-1.33-1.33-1.33h-7.23" +
        "c-0.657,0-1.178,0.485-1.286,1.112l-0.025-0.001l-0.737,3.549c-1.847-3.342-5.629-5.893-10.994-5.893" +
        "c-10.202,0-19.877,9.764-19.877,21.549c0,8.531,5.101,14.775,13.632,14.775c4.75,0,9.587-2.727,12.665-7.035l0.088,0.527" +
        "c0.615,3.342,9.843,7.576,15.121,7.576c7.651,0,16.617-5.156,16.617-19.932l-0.022-0.009C87.477,51.13,87.5,50.569,87.5,50.002z" +
        "M56.615,56.844c-1.935,2.727-5.101,5.805-9.763,5.805c-4.486,0-7.212-3.166-7.212-7.738c0-6.422,5.013-12.754,12.049-12.754" +
        "c3.958,0,6.245,2.551,7.124,4.486L56.615,56.844z");

        Button buttonWithGraphics = new Button();
        buttonWithGraphics.setGraphic(svg);

        // Bind the Image scale property to the buttons size
        svg.scaleXProperty().bind(buttonWithGraphics.widthProperty().divide(100));
        svg.scaleYProperty().bind(buttonWithGraphics.heightProperty().divide(100));

        // Declare a minimum size for the button
        buttonWithGraphics.setMinSize(MIN_BUTTON_SIZE, MIN_BUTTON_SIZE);

        root.getChildren().addAll(buttonWithGraphics);
        root.layoutBoundsProperty().addListener((observableValue, oldBounds, newBounds) -> {
                double size = Math.max(MIN_BUTTON_SIZE, Math.min(newBounds.getWidth(), newBounds.getHeight()));
                buttonWithGraphics.setPrefSize(size, size);
            }
        );

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

The central image is the default size, so this works on decreasing as well as increasing the Button size.

N.B. - You can calculate and use different values for height and width of the button.