SVG Drawing – Basics Tutorial

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! We hope our SVG Drawing Tutorial helps you in your work or study. We try to explain common rules and standard steps for creating SVG from scratch based on simple examples.

This chapter aims to explain how to draw SVG images. This includes articles about SVG Coordinate Systems and Units, SVG Basic Shapes, SVG Path Data, SVG Text, Basic SVG Transformations, SVG Color, Fills and Strokes in SVG, SVG Embedded Content, and SVG Filters and Gradients.

In the articles, we will create vector SVG 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.

Text “Aspose Logo”

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

1<svg height="400" width="400" viewBox="-40 0 400 400" 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>

Aspose.SVG offers SVG Free Web Applications for converting SVG or image files, merging SVG files, image vectorizing, SVG sprite generating, SVG to base64 data encoding, and text vectorizing. These online Apps work on any operating system with a web browser and don’t require additional software installation. It’s a fast and easy way to efficiently and effectively solve your SVG-related tasks!

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.