# How to draw SVG Logo in HTML5?

In the following article we are going to learn how to draw an SVG logo in HTML5. Before we jump into the article, let's discuss a few things about SVG. The image format known as Scalable Vector Graphics (SVG) uses vector data. Unlike other formats, SVGs do not use unique pixels to construct your image. It makes use of vector data instead.

The best thing of using it was Making pictures that scale to any resolution is possible with SVGs, which makes them ideal for web design among many other applications.

Let’s look into the simple example for understanding of SVG

## Example

<!DOCTYPE html>
<html>
<body>
<svg width="110" height="150">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
</svg>
</body>
</html>


When the script gets executed, it will generate an output consisting of an SVG circle drawn on the webpage with the given measurements in the above script.

## What is an SVG

Two-dimensional vector graphics are described using SVG, a markup language, which uses XML. This is a text-based technique that works with other technologies like CSS, DOM, JavaScript, and SMIL to describe images of any size.

SVG format vector pictures, for example, can be scaled without losing quality. In contrast to bitmapped pictures like JPEG and PNG, they can also be localized without the need for a graphics editor.

## Following are the Example to Draw SVG Logo in HTML5

### Example 1

In the following example we are creating a SVG logo on the webpage.

<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
<stop offset="0"
style="stop-color:rgb(187, 143, 206);" />
<stop offset="1"
style="stop-color:rgb(192, 57, 43);" />
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
<text fill="#58D68D" font-size="14" font-family="Verdana"
x="50" y="86">TUTORIALSPOINT</text>
</svg>
</body>
</html>


When the script gets executed, it will generate an output consisting of an ellipse drawn with a linear gradient with the text "TUTORIALSPOINT", which acts as a logo on the webpage.

### Example 2

Consider the following example we are creating SVG logo on the webpage

<!DOCTYPE html>
<html>
<body>
<svg width="140px" height="320px">
<rect x="19" y="19" width="110" height="300"
fill="white" stroke="black" stroke-width="3" />
<circle cx="75" cy="85" r="30"
fill="red" stroke="black" stroke-width="2" />
<circle cx="75" cy="165" r="30"
fill="yellow" stroke="black" stroke-width="2" />
<circle cx="75" cy="245" r="30"
fill="#40CC40" stroke="black" stroke-width="2" />
</svg>
</body>
</html>


When the above script is run, it will produce an output consisting of the traffic signals drawn on the webpage using the measurements given in the above script, which acts as a logo.

### Example 3

Let’s look another example, where we are creating a SVG logo on the webpage.

<!DOCTYPE html>
<html>
<title>HTML5 SVG logo</title>
<body>
<svg height="170" width="400">
<defs>
<stop offset="0%"
style="stop-color:rgb(184,78,43);stop-opacity:1" />
<stop offset="50%"
style="stop-color:rgb(241,241,241);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,141,52);stop-opacity:1" />