programmatically How to get shape width in SVG document using java

Question

I want to get shape width in this svg document

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.1, SVG Export Plug-In . SVG Version: 6.00 Build            14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="690.91px" height="2317.42px" viewBox="0 0 690.91 2317.42"   xml:space="preserve">
<path d="M502.375,1121.015l-80.08-54.199l-40.039,68.85l-81.06-55.67l45.412-76.17l79.59,54.2l43.949-71.29l78.131,53.22
L502.375,1121.015z M423.756,1312.415l-3.41,11.721c0,7.811,3.41,14.16,9.762,19.529c1.947,1.471,5.369,3.42,9.77,5.37
c10.25,5.859,37.59,8.79,61.029,8.79c12.211,0,20.02-0.48,25.881-0.97c-2.439-2.932-7.811-10.262-16.109-21.49
c-8.301-11.229-13.67-18.061-16.121-20.51c-14.16-13.182-27.34-20.012-39.549-20.012c-7.32,0-12.691,1.461-16.111,3.9
C434.016,1300.695,429.125,1305.095,423.756,1312.415L423.756,1312.415z M593.686,1527.266c-1.961,10.739-6.35,23.431-13.191,37.601
l-18.549,39.061c-19.051,40.521-60.061,78.609-122.561,113.279c-62.01,35.16-122.07,52.729-180.18,52.729l-27.34,0.49h-10.74
c-8.79,0-14.16-0.979-15.63-2.439c-28.32,0-56.64-5.37-84.47-16.11c-34.67-13.188-62.5-32.72-83.011-57.62
c-24.899-30.76-37.6-68.358-37.6-112.789l-0.97-26.37c0-20.021,4.88-46.391,15.13-78.609c11.72-37.601,28.319-76.66,50.3-116.7
c14.64-27.35,22.95-41.021,24.41-41.51l22.46,7.818l-1.95,3.41l-12.7,24.91l-27.34,69.82c-9.77,28.319-14.649,57.62-14.649,88.38
c0,22.46,5.859,45.899,17.09,70.8c9.77,21.48,17.58,33.2,23.93,34.67c3.41,8.301,18.06,17.58,43.94,27.83
c29.3,11.23,58.109,17.09,86.43,17.09c38.57,0,63.96-0.979,73.729-3.42c21.971,0,45.901-3.42,72.26-10.739
c29.791-8.301,57.131-19.529,83.01-34.181c16.111-9.279,36.131-25.39,61.041-47.359c7.811-7.33,18.061-17.09,31.25-29.79
c4.879-7.811,8.301-14.159,10.74-18.55c7.318-14.65,11.229-26.37,11.229-35.65c-0.49-8.3-1.471-16.6-4.881-27.829h-83.5
c-24.9,0-46.391-3.91-63.479-12.21c-5.369-2.44-11.709-6.83-18.551-12.2c-6.352-5.859-10.738-11.229-13.67-16.609
c-9.279-16.109-14.16-34.66-14.16-56.641c0-24.9,2.932-45.41,8.789-62.01c1.951-5.37,4.883-11.722,9.271-18.062
c9.281-19.539,17.09-34.18,23.932-43.459c20.51-28.811,41.988-43.461,64.939-43.461c21,0,40.039,11.721,58.109,34.67
c12.199,16.11,23.92,37.602,34.658,64.94c3.91,11.72,7.82,23.439,11.723,34.67c1.959,3.42,3.42,6.351,4.398,8.79
c3.898,9.28,7.318,19.53,9.762,31.74h93.26v89.84h-83.49c0,13.67-1.951,29.79-6.35,47.85
C599.055,1509.686,597.096,1517.495,593.686,1527.266z"/>
</svg>

This document contains only one shape(path), I want to get its width not the document width itself

Thanks a lot

Answer 1

To extract the shape coordinates, use this code:

String path = input.replaceAll(".+<path d=\"(.+?)\" ?/>.+", "$1");

Then you can try to split on comma's:

String[] parts = path.split(",");

I don't know how to interpret the data, but you can try something with a minX, minY, maxX and maxY. After searching for the largest and smallest values, you can get the width and height as this:

float width = maxX - minX;
float height = maxY - maxY;

This is something general, but I should take a look at Bakit SVG Toolkit .

Answer 2

Do you have to use Java?

You can get the answer by adding the following into the SVG:

<script type="text/ecmascript">
<![CDATA[
    function getWidth(evt)
    {
        var bb = evt.target.getBBox();
        alert(bb.width - bb.x);
    }
]]>
</script>

Then adding onmousedown="getWidth(evt)" into the path element. Then if you open up the SVG in a web browser and click on the image, you find its width is 691.466.

Otherwise you'll have to write your own program to interpret the path's coordinates, which is not straightforward.

Briefly:

• At * M *xy, move to coordinate xy
• At * l *xy, move to +x, +y
• At * h *x, move to +x, +0
• At * v *y, move to 0, +y
• At * c *x1 y1 x2 y2 x3 y3, move to +x3, +y3

However with the Bézier curves (indicated by c), some parts may stick out beyond the coordinates.

See http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands for more details.