A lightweight, optimized JavaFX node for rendering SVG paths at any size. Fully supports FXML, property binding, and CSS styling.

• 🎨 Render any SVG path as a JavaFX node
• 🔗 No dependencies – will use your provided JavaFX runtime
• ⚡ Optimized to be efficient and have a tiny footprint due to the SvgNode extending from Parent, skipping size calculations and only initializing properties when needed
• 📐 Uniform rasterization with a single size property
• 📄 FXML-compatible with attribute and constant-based usage
• 🎭 CSS-stylable via .svg-node and .svg style classes. By default, the SVG automatically adjusts its color based on the background – just like text!

Will work fine with SVG Libraries (see usage below) such as:

• SVG-FontAwesome
• SVG-Boostrap

<dependency>
    <groupId>tools.maran</groupId>
    <artifactId>svgnode</artifactId>
    <version>1.0.0</version>
</dependency>

implementation 'tools.maran:svgnode:1.0.0'

import tools.maran.svgnode.SvgNode;

// Default size (24px)
SvgNode small = new SvgNode("M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z");

// Icon with a size and color
SvgNode icon = new SvgNode("M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", 32);
icon.setSvgColor(Color.RED);

// Binding
SvgNode dynamic = new SvgNode();
dynamic.pathProperty().bind(viewModel.iconPathProperty());
dynamic.sizeProperty().bind(slider.valueProperty());

<?import tools.maran.svgnode.SvgNode?>

<SvgNode path="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" size="32" svgColor="RED" />

<?import tools.maran.svgnode.SvgNode?>
<?import mypackage.MyIcons?>

<SvgNode size="32" svgColor="RED">
    <path>
        <MyIcons fx:constant="HOME"/>
    </path>
</SvgNode>

SvgNode works with any library that provides SVGs as a path.

import tools.maran.svgnode.SvgNode;
import tools.maran.svg.fontawesome.FASolid;
import tools.maran.svg.bootstrap.Bootstrap;

SvgNode iconFA = new SvgNode(FASolid.HOME.path());
SvgNode iconBootstrap = new SvgNode(Bootstrap.HOUSE.path());

<?import tools.maran.svgnode.SvgNode?>
<?import tools.maran.svg.fontawesome.FASolid?>
<?import tools.maran.svg.bootstrap.Bootstrap?>

<SvgNode>
    <path>
        <FASolid fx:constant="HOME"/>
    </path>
</SvgNode>
<SvgNode>
    <path>
        <Bootstrap fx:constant="HOUSE"/>
    </path>
</SvgNode>

The sampler is in the tests and can be used to show examples and manually test the SvgNode.

Launch the tools.maran.svgnode.manual.Sampler class.

The sampler respects the light and dark color scheme of your OS, so you can see how it looks in both.

There are two categories in the sampler.

Shows the functionality of SvgNode.

• Using a SvgNode as Button graphic, showing the automatic color switching based on the text color
• Changing the path, color, and size of the SvgNode

Shows all SVGs in a grid from supported SVG libraries, ready to be explored.

SVG Libraries:

• SVG-FontAwesome
• SVG-Bootstrap