Andriy Andruhovski

Posted on Oct 9, 2018

Generating SVG document using Aspose.HTML

#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.

DEV Community