CODEWITHSUNDEEP
c#svggdi+graphicspath
Icemanind
Icemanind

Reputation: 48726

Converting SVG path data into GDI+ GraphicsPath data

Is there an easy way to convert an SVG path tag into a C# System.Drawing.Drawing2D.GraphicsPath? They are both closely related and I was hoping there would be an easy to convert the SVG path data into GraphicsPath Points.

Upvotes: 14

Views: 12500

Answers (4)

user732592
user732592

Reputation: 245

I hope this ain't late! Check out the source code of the svg viewer program from AGG: https://github.com/timothytylee/agg/tree/master/examples/svg_viewer

The source code is in C++ and uses the AGG graphics engine, but it's easy to translate to GDI+. It also handles the conversion of SVG Arc to a Bezier Arc which can then be used with GDI+.

Good luck

Upvotes: 1

zaknafein
zaknafein

Reputation: 11

It's not that complicated.

If the svg path only consists of M L Q Z ZM functions your method looks like this:

private GraphicsPath svgMLQZToGraphicsPath(string svgString)
{
    GraphicsPath graphicsPath = new GraphicsPath();
    float[] x = new float[4];
    float[] y = new float[4];
    string prev = "";
    string[] splits = svgString.Split(' ');
    for (int s = 0; s < splits.Length; s++)
    {
        if (splits[s].Substring(0, 1) == "M")
        {
            x[0] = float.Parse(splits[s].Substring(1).Replace('.', ','));
            y[0] = float.Parse(splits[s + 1].Replace('.', ','));
            s++;
            prev = "M";
            graphicsPath.StartFigure();
        }
        else if (splits[s].Substring(0, 1) == "L")
        {
            x[1] = float.Parse(splits[s].Substring(1).Replace('.', ','));
            y[1] = float.Parse(splits[s + 1].Replace('.', ','));
            graphicsPath.AddLine(new PointF(x[0], y[0]), new PointF(x[1], y[1]));
            x[0] = x[1]; // x[1] = new float();
            y[0] = y[1]; //y[1] = new float();
            s++;
            prev = "L";
        }
        else if (splits[s].Substring(0, 1) == "Q")
        {
            x[1] = x[0] + (2 / 3) * (float.Parse(splits[s].Substring(1).Replace('.', ',')) - x[0]);
            y[1] = y[0] + (2 / 3) * (float.Parse(splits[s + 1].Replace('.', ',')) - y[0]);
            x[3] = float.Parse(splits[s + 2].Replace('.', ','));
            y[3] = float.Parse(splits[s + 3].Replace('.', ','));
            x[2] = x[3] + (2 / 3) * (float.Parse(splits[s].Substring(1).Replace('.', ',')) - y[3]);
            y[2] = y[3] + (2 / 3) * (float.Parse(splits[s + 1].Replace('.', ',')) - y[3]);
            graphicsPath.AddBezier(new PointF(x[0], y[0]), new PointF(x[1], y[1]), new PointF(x[2], y[2]), new PointF(x[3], y[3]));
            x[0] = x[3]; 
            y[0] = y[3]; 
            s = s + 3;
            prev = "Q";
        }
        else if (splits[s].Substring(0, 1) == "Z")
        {
            graphicsPath.CloseFigure();
            if (splits[s].Length >= 2 && splits[s].Substring(0, 2) == "ZM")
            {
                x[0] = float.Parse(splits[s].Substring(2).Replace('.', ','));
                y[0] = float.Parse(splits[s + 1].Replace('.', ','));
                s++;
                graphicsPath.StartFigure();
                prev = "M";
            }
        }
        else
        {
            string ok = @"^[a-zA-Z]*$";
            if (!Regex.IsMatch(splits[s + 1].Substring(0, 1), ok))
            {
                string replace = prev + splits[s + 1];
                splits[s + 1] = replace;
            }
        }
    }
    return graphicsPath;
}

Upvotes: 0

Drew Noakes
Drew Noakes

Reputation: 311255

This SVG project provides a solution in the following way:

var pathData = ...;

var graphicsPath = new GraphicsPath();

foreach (var segment in SvgPathBuilder.Parse(pathData))
    segment.AddToPath(graphicsPath);

graphics.DrawPath(Pens.Black, graphicsPath);

It's available as a NuGet package via:

PM> Install-Package Svg

Upvotes: 8

Igor Brejc
Igor Brejc

Reputation: 19004

There's no easy way, although SVG paths and GraphicsPath look similar and serve the same purpose, there are some differences in how things are specified and handled. One example: SVG arc definition is different from how GraphicsPath defines arcs, so you'll need to do a little bit of trigonometry to convert it.

Also check out Drawing SVG in .NET/C#?

Upvotes: 4

Related Questions