Documents for Imaging .NET Edition | GCDocuments
Features / Work with SVG Files
In This Topic
    Work with SVG Files
    In This Topic

    GcImaging supports SVG (Scalable Vector Graphics) image file format which allows you to render vector images at any size without loss of quality.

    The GcSvgDocument class is provided in the GrapeCity.Documents.Svg namespace in the GcImaging library. This class allows you to create, load, inspect, modify and save the internal structure of an SVG image.

    SVG graphics can be loaded from files or strings into the object model of GcSvgDocument class, further drawn to the GcGraphics class to effectively output the result to GcPdfDocument, GcBitmap or GcWicBitmap classes. SVG documents can be drawn to objects derived from GcGraphics, such as GcPdfGraphics or GcBitmapGraphics using the GcGraphics.DrawSvg method overloads.

    Render SVG to PNG

    To render an SVG image to a PNG image and output the result to GcBitmap class:

    1. Load an SVG image by using the FromFile method of GcSvgDocument class.
    2. Initialize the GcBitmap class and create a drawing surface using CreateGraphics method of the GcBitmap class.
    3. Draw the specified SVG document at a location in PDF document by using DrawSvg method of GcGraphics class.
    4. Save the image to a file in PNG format using SaveAsPng method.
      C#
      Copy Code
      using var svg = GcSvgDocument.FromFile("Smiling-Girl.svg");
      var rect = svg.Measure(PointF.Empty);
      float factor = 1.5f;
      using var bmp = new GcBitmap((int)(rect.Width * factor + 0.95f), (int)(rect.Height * factor + 0.95f), true, 96f * factor, 96f * factor);
      using (var g = bmp.CreateGraphics(Color.White))
      {
          g.DrawSvg(svg, new PointF(-rect.X, -rect.Y));
      }
      bmp.SaveAsPng("Smiling-Girl.png");
      

    Similarly as above, use the following code to render an SVG image to a PNG image and output the result to GcWicBitmap class:

    C#
    Copy Code
    using var svg = GcSvgDocument.FromFile("Smiling-Girl.svg");
    var rect = svg.Measure(PointF.Empty);
    float factor = 1.5f;
    using var bmp = new GcWicBitmap((int)(rect.Width * factor + 0.95f), (int)(rect.Height * factor + 0.95f), true, 96f * factor, 96f * factor);
    using (var g = bmp.CreateGraphics(Color.White))
    {
        g.DrawSvg(svg, new PointF(-rect.X, -rect.Y));
    }
    bmp.SaveAsPng("Smiling-Girl.png");
    

    The output of above code snippets will look like below:

     

    You can also render an SVG image to a PDF document. For more information, refer Images topic in GcPdf docs.

    Render Graphics and Text to SVG

    GcImaging lets you render graphics and text on a GcSVGDocument by using ToSvgDocument method of the GcSvgGraphics class. This class is derived from the GcGraphics class.

    C#
    Copy Code
      using var g = new GcSvgGraphics(800, 600); 
      g.DrawRoundRect(new RectangleF(5, 5, 790, 590), 20, Color.Blue, 2, DashStyle.DashDot); 
    
      var tl = g.CreateTextLayout(); 
      tl.Append("Hello World!", new TextFormat() 
      { 
          ForeColor = Color.SandyBrown, 
          FontSize = 50f, 
          FontName = "Segoe UI", 
      }); 
      g.Transform = Matrix3x2.CreateRotation(30 * (float)Math.PI / 180) * Matrix3x2.CreateTranslation(100, 50); 
      g.DrawTextLayout(tl, PointF.Empty); 
    
     
      var rect = new RectangleF(0, 0, 300, 200); 
      g.Transform = Matrix3x2.CreateRotation(-30 * (float)Math.PI / 180) * Matrix3x2.CreateTranslation(400, 400); 
      g.FillEllipse(rect, new HatchBrush(HatchStyle.Backslashes) { ForeColor = Color.MediumPurple }); 
      g.DrawEllipse(rect, new Pen(Color.Red, 3)); 
    
     
      using var svg = g.ToSvgDocument(); 
      svg.Save("GcImagingRenderToSVG.svg", new XmlWriterSettings() { Indent = true });   
            
    

    Limitation

    Text is always rendered as graphics using paths. Hence, resulting .svg files for text pages are large and it is not possible to select or copy text on the SVG images opened in the browsers.

    Note: You need to apply a license key to use the ToSvgDocument() method. Without a license key, only a few calls of ToSvgDocument() are allowed, after which an exception is thrown. For more information about applying license, see Apply License.

    Save SVG to File or Stream

    GcImaging lets you save a newly created SVG document or a modified document as a file or a stream. You can use the GcSvgDocument.Save method to serialize the new or modified SVG document to a file or a stream.

    C#
    Copy Code
    using var svg = GcSvgDocument.FromFile("cerdito.svg");
    
    var paint = new SvgPaint(Color.Bisque);
    foreach (var elem in svg.GetElementsByClass("rose"))
    {
        elem.Fill = paint;
    }
    
    svg.Save("cerdito2.svg", new XmlWriterSettings() { Indent = true });
    
    File.WriteAllBytes("cerdito2.svgz", svg.ToSvgz());
    

    Limitations