Easiest way to read in svg path data with Java?

end-user picture end-user · Feb 23, 2014 · Viewed 8.1k times · Source

I'm looking to consume an svg image and parse/process the different paths to do a custom conversion. What is the easiest way, in Java, to simply extract the path data? I was looking at the apache xmlgraphics/batik packages, but it's not real obvious how to return the path types and parameters. Any suggestions?

Answer

helderdarocha picture helderdarocha · Feb 23, 2014

To simply extract the path data you can use XPath.

Suppose you have this SVG and you want to extract all the path data (from both path elements):

<svg>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>

You first load the XML as a Document:

DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse("image.svg");

Then you use XPath to select the desired nodes. The expression below selects the contents of the d attributes of all the path elements inside the file:

String xpathExpression = "//path/@d";

Now we can instantiate the XPath processor and compile the expression:

XPathFactory xpf = XPathFactory.newInstance();
XPath xpath = xpf.newXPath();
XPathExpression expression = xpath.compile(xpathExpression);

Since the expected result is a node-set (two strings), we evaluate the expression on the SVG document using XPathConstants.NODESET as the second parameter:

NodeList svgPaths = (NodeList)expression.evaluate(document, XPathConstants.NODESET);

From there you can extract the first set of path data using:

svgPaths.item(0).getNodeValue();