Generating SVG document using Aspose.HTML 
Tags: csharp, beginners, svg, tutorial
Published: 2018-10-09 00:20:06

---
title: Generating SVG document using Aspose.HTML 
published: true
description: The easiest way to generate SVG image using C#
tags: csharp, beginners, SVG, tutorial
---

SVG - Scalable Vector Graphics (Scalable Vector Graphics) is a vector-based format for web developers. This type of format has become so popular due to the fact that its images can be displayed at high resolutions without quality losing since SVG is a vector format.

The impetus to the development of this language markup was first given by the World Wide Web Consortium in 1999. W3C has given the concept of SVG - language markup for creating two-dimensional graphical interfaces and images as part of HTML specification.



# Introduction
Aspose.HTML supports parsing of HTML5 and SVG documents. It also enables to construct a W3C Document Object Model based documents. In the previous article, we considered how to generate an HTML document. Now we will talk about SVG images creation.

As in the case with HTML documents, we have a class that represents the root of the SVG image. This class named SVGDocument and it has methods and properties according to SVG element description in the W3C standard. Additionally, `SVGDocument` has methods `Save` and `RenderTo`.

## Basic Shapes Created by SVG

We can use following SVG-elements to create shapes.
 
* Line;	
* Circle;	
* Rect (rectangle);
* Ellipse;
* Polygon;
* Polyline (a multiline shape);
* Path;	
* Text;

# Creating empty SVG document

The following snippet shows how to we create an empty SVG document:

    public static void GenerateSvgDemo(string widthStr, string heightStr, string bkColorStr)
    {
        //In this method, we demonstrate several techniques for setting values of width and height
        var width = float.Parse(widthStr);
        var height = float.Parse(heightStr); ;

        //Creat new (empty) image 
        var svgDocument = new SVGDocument(new Configuration());

        //Adjust image size
        svgDocument.RootElement.Width.BaseVal.ValueAsString = widthStr;
        svgDocument.RootElement.Height.BaseVal.ValueAsString = heightStr;

        svgDocument.RootElement.ViewBox.BaseVal.X = 0;
        svgDocument.RootElement.ViewBox.BaseVal.Y = 0;
        svgDocument.RootElement.ViewBox.BaseVal.Width = width;
        svgDocument.RootElement.ViewBox.BaseVal.Height = height;
    } 

# Drawing SVG images

## The SVGLine element
 
The line element draws the line. You can create a line definition by defining the starting and ending X and Y coordinates. Code to draw a line in SVG is given below:

    //Line 
    if (!(svgDocument.CreateElementNS(SvgXmlns, "line") is SVGLineElement line))
        throw new NullReferenceException("Line Element");

    line.X1.BaseVal.ValueAsString = "25";
    line.Y1.BaseVal.ValueAsString = "25";
    line.X2.BaseVal.ValueAsString = "200";
    line.Y2.BaseVal.ValueAsString = "200";
    line.Style.CSSText = "stroke:green;stroke-width:3";

In the previous example, the attributes X1 and Y1 are the starting coordinates of the string, and the attributes X2 and Y2 are the trailing attributes of the line. You can also change the direction of the line by simply changing the coordinates of the line.

## The SVGCircle Element

This element is used to define the circle. To define the circle you need to define a Cx, Cy attribute that will be the center of the circle and you need to define the radius R of the circle. The code to draw a circle in SVG is given below:

    //Circle
    if (!(svgDocument.CreateElementNS(SvgXmlns, "circle") is SVGCircleElement circle))
        throw new NullReferenceException("Circle Element");

    circle.Cx.BaseVal.ValueAsString = "120";
    circle.Cy.BaseVal.ValueAsString = "120";
    circle.R.BaseVal.ValueAsString = "50";
    circle.Style.CSSText = "stroke:black;stroke-width:2";
    // another way to set style properties
    circle.Style.SetProperty("fill", "red", string.Empty);

    svgDocument.RootElement.AppendChild(circle);


## The SVGRect Element 

The `SVGRectelement` draws a rectangle. Creating the rectangle is as simple as defining a width and height. The code to draw a rectangle is given below:

    // Rectangle
    if (!(svgDocument.CreateElementNS(SvgXmlns, "rect") is SVGRectElement rect))
        throw new NullReferenceException("Rect Element");
    rect.X.BaseVal.Value = 250;
    rect.Y.BaseVal.Value = 250;
    rect.Width.BaseVal.Value = width/4;
    rect.Height.BaseVal.Value = height/4;
    rect.Style.SetProperty("fill", "#" + bkColorStr, string.Empty);

    svgDocument.RootElement.AppendChild(rect);

## The SVGEllipse Element

The `SVGEllipseElement` element is used to draw an ellipse in SVG. Drawing of an ellipse is similar to drawing a circle but to define an ellipse you need to define 2 radiuses. The code to draw an ellipse in SVG is given below:

    // Ellipse
    if (!(svgDocument.CreateElementNS(SvgXmlns, "ellipse") is SVGEllipseElement ellipse))
        throw new NullReferenceException("Rect Element");
    ellipse.Cx.BaseVal.Value = 100;
    ellipse.Cy.BaseVal.Value = 250;
    ellipse.Rx.BaseVal.Value = 20;
    ellipse.Ry.BaseVal.Value = 30;
    ellipse.Style.SetProperty("fill", "#112233", string.Empty);

    svgDocument.RootElement.AppendChild(ellipse);

## The SVGPolygon Element

Polygons are 2-dimensional shapes. They are made of straight lines and the shape is "closed" (all the lines connect).

    // Polygon
    if (!(svgDocument.CreateElementNS(SvgXmlns, "polygon") is SVGPolygonElement polygon))
        throw new NullReferenceException("Polygon Element");            
    polygon.SetAttribute("points", "210,10 10,260 300,260");
    polygon.Style.SetProperty("fill", "#440066", string.Empty);

    svgDocument.RootElement.AppendChild(polygon);

## The SVGPolygonElement

A polyline is a drawing consisting of multiple line definitions. This example is mostly the similar to the previous:

    // Polyline
    if (!(svgDocument.CreateElementNS(SvgXmlns, "polyline") is SVGPolylineElement polyline))
        throw new NullReferenceException("Polyline Element");
    polyline.SetAttribute("points", "0,50 50,50 50,100 100,100 100,150 150,150 150,200");
    polyline.Style.CSSText = "fill:white;stroke:black;stroke-width:2";

    svgDocument.RootElement.AppendChild(polyline);


## The SVGPathElement 

To draw all the elements and all other complex elements you can use the path element. Using the path element you can create an arbitrary drawing. 

    // Path
    if (!(svgDocument.CreateElementNS(SvgXmlns, "path") is SVGPathElement path))
        throw new NullReferenceException("Path Element");
    path.SetAttribute("d", "M 100 350 q 150 -300 300 0");
    path.Style.CSSText = "stroke:black;stroke-width:2";

    svgDocument.RootElement.AppendChild(path);


## Drawing text

The last example shows how we can add text to SVG image:


    if (!(svgDocument.CreateElementNS(SvgXmlns, "text") is SVGTextElement text))
        throw new NullReferenceException("Path Element");

    text.SetAttributeNS(null, "x", (width / 2).ToString());
    text.SetAttributeNS(null, "y", (height / 2).ToString());
    text.TextContent = $"{widthStr}x{heightStr}";

    text.Style.SetProperty("font-family", "Arial", string.Empty);
    text.Style.SetProperty("font-weight", "bold", string.Empty);
    text.Style.SetProperty("dominant-baseline", "central", string.Empty);

    var fontSize = Math.Round(Math.Max(12, Math.Min(.75 * Math.Min(width, height), 0.75 * Math.Max(width, height) / 12)));
    text.Style.SetProperty("font-size", $"{fontSize}px", string.Empty);
    text.Style.SetProperty("fill", "purple", string.Empty);
    text.Style.SetProperty("text-anchor", "middle", string.Empty);

    svgDocument.RootElement.AppendChild(text);

#Conclusion

That's all the basics of SVG, in the following articles will be considered more complex examples of the use of vector graphics, but now as a simple living example, I invite you to consider [a Placeholder Generator](https://github.com/aspose-html/Aspose.HTML-for-.NET/tree/master/Showcases/SimplePlaceHolder).