SVG Drawing - Basics Tutorial

Contents
[ ]
SVG is an XML language that is used for vector graphics drawing. If you are familiar with basic HTML and XML, you can easily create SVGs in any text editor! This chapter aims to explain how to draw SVG images.
  • SVG Coordinate Systems and Units In this article, you find the description of the workspace of SVG that is defined by the values of the viewport and viewBox attributes.
  • SVG Shapes In this article, you can learn how to create different simple shapes and apply some style properties to them.
  • SVG Path Data This article shows how the paths can be used to drawing various outlines or shapes by combining lines, arcs and Bezier curves. The group of commands for SVG path making is described here.
  • SVG Text This article introduces the text content elements and reviews some common attributes that help to display, format and style the text into an SVG image.
  • Basic SVG Transformations You find out how to apply the transform functions for graphic objects rotation, scaling, moving, and skewing through the SVG transform attribute and consider code examples for SVG transformations.
  • Fills and Strokes in SVG In this article, we describe several properties that allow you to set different aspects of fill and stroke, including color, opacity, thickness, use of dashing, etc.
  • SVG Color This article takes an in-depth look at the different ways SVG text and shapes can be colorized. You’ll find out an overview of how color is defined, including the various ways you can control the transparency of SVG content.
  • SVG Embedded Content is content that imports into the document from another resource. You will see how to include and render bitmap and HTML elements within an SVG object.
  • SVG Filters and Gradients Filter primitives that produce blurring, color and lighting effects are reviewed. The chapter demonstrates how linear or radial gradients can decorate any line, shape, or text in SVG graphics.

In the next SVG articles we will create vector images using XML code. The figure illustrates the Aspose logo - SVG image. Only a few lines of code and you can create an icon, logo or any simple image.

Aspose Logo

The following is shown an example of SVG code for the Aspose logo (aspose.svg):

1<svg height="1000" width="1000" viewBox="-30 0 300 300" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
4    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
5    <path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
6    <circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
7</svg>