Access to the Units of the "width" and "height" property of a SVG Document

[Gleethos]

Hello and thank you so much for your great work! :)
This library is a foundational tool which contributes tremendous value for the ecosystem.
Your time is greatly appreciated!

Our Problem

We are using jsvg to render our SVG icons into swing components.
And we have the problem that our UI/UX developer has very specific requirements when it comes
to the exact scaling behavior. More specifically, we need to define if an SVG fills out a component
by looking at the dimension units of an SVG.

Let's take 2 empty SVGs for example:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg fill="#000000" version="1.1"  width="100%" height="100%" viewBox="150 0 300 600" xml:space="preserve">
</svg>

<?xml version="1.0" encoding="iso-8859-1"?>
<svg fill="#000000" version="1.1"  width="170px" height="100px" viewBox="150 0 300 600" xml:space="preserve">
</svg>

So when loading the first document, we want to fill our component entirely...
But in for the second svg, we want to scale the svg to have the exact width and height, instead
of making the width and height dependent on the component dimensions...

And so the question we have is:

How can we access the unit of the document size in jsvg?

More specifically, there is SVGDocument.size(), which does give us the width and height as floats...
But the information about the unit is lost.

Is there a way to access it?

[stanio]

How can we access the unit of the document size in jsvg?

Possibly using DomProcessor – SVGLoader.load(URL, LoaderContext):

        URL source = ...;
        DomProcessor domProcessor = root -> System.out.printf(
                "width=%s height=%s\n", root.attribute("width"), root.attribute("height"));
        SVGDocument svg = new SVGLoader().load(source,
                LoaderContext.builder().preProcessor(domProcessor).build());
        System.out.println(svg.size());

You'll need to parse the units from the attribute values.

[weisJ]

This is the correct approach, if you need an immediate solution. However, I think what you really want is an API like document.sizeForViewport(ViewBox), which returns the size of the SVG relative to the given viewbox size. If the width and height are percentages they will be computed based on the size of the viewbox. If they are absolute the result is the same as the current size() method.

This should be an easy change.

[Gleethos]

Possibly using DomProcessor – SVGLoader.load(URL, LoaderContext):

Yes! Thank you @stanio , this solved our issue.

This is the correct approach, if you need an immediate solution. However, I think what you really want is an API like document.sizeForViewport(ViewBox), which returns the size of the SVG relative to the given viewbox size. If the width and height are percentages they will be computed based on the size of the viewbox. If they are absolute the result is the same as the current size() method.

Yes that is exactly what we are now doing manually.

Although such a method would be sufficient in most cases, we also want to be able to update the width or height
later on in our code. Let's say in the file it says the width and height is 40 and 50, in the code we may want to
to do mySvgIcon = mySvgIcon.withWidth(90, Unit.PX).

[weisJ]

I think your use case is very valid I would like to offer a convenient way for you to achieve it without having to rely on Dom processing.

Let's say in the file it says the width and height is 40 and 50, in the code we may want to
to do mySvgIcon = mySvgIcon.withWidth(90, Unit.PX).

I think this you could achieve this my using a wrapper class that offers a withWidth method. It would internally store whether the SVG source specified width has been overwritten by a call to withWidth.

• In the case it is overwritten use this width for rendering.

• If it is not overwritten you can use the function sizeForViewBox to obtain the size requested by the SVG source file

  • If the width is in percentages it will be percentage * viewBox.width.
  • If the width is absolute this value will be returned.

Is there a scenario that would not be handled by this approach. If yes I would be happy to hear about it and see what I can do in that regard. I am hesitant to expose Length and Unit as public API as those may need to change with support for more complex CSS features.