Extract points from loaded svg

Hi

When loading an SVG with ofxSvg, it creates a vector of ofPaths with a ofPath::Command sequence. Is there an easy way to convert those into an ofPolyline so I can extract the actual points?

Hi underdoeg,

This is from the svg example in examples / addons / svgExample:

svg.load("tiger.svg");
	for (int i = 0; i < svg.getNumPath(); i++){
		ofPath p = svg.getPathAt(i);
		// svg defaults to non zero winding which doesn't look so good as contours
		p.setPolyWindingMode(OF_POLY_WINDING_ODD);
		vector<ofPolyline>& lines = p.getOutline();
		for(int j=0;j<(int)lines.size();j++){
			outlines.push_back(lines[j].getResampledBySpacing(1));
		}
	}

Hi Nick thanks.

I tried to use getOutline but it returned a vector with zero length. Do I have to update/ calculate / create them first?

After loading in the svg, you should be able to access the polylines. Does the example work for you?

Yes, the example is working. I’ll recheck with another SVG file.

I ran into a similar issue loading different SVG files exported out of Illustrator CC and resolved it by replacing the description with the following:

<svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" height="900px"
	 viewBox="0 0 900 900" overflow="inherit" xml:space="preserve">

Note: id, width, height and viewBox will vary based on your artboard settings.

3 Likes

Interesting. My file is from Inkscape though. Were you unable to load the svg or jsut extracting points?

This just saved me a lot of time thanks! I had a designer render an SVG file totally matched up next to the ‘tiger.svg’ in the example and I could not get it to draw in the SVG oF example project. Opened the SVG file as an XML doc and changed these lines like you said and now works fine!