Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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);" />
</linearGradient>
</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>
<p>FOLLOW TRAFFIC SIGNALS</p>
</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>
<head>
<title>HTML5 SVG logo</title>
</head>
<body>
<svg height="170" width="400">
<defs>
<linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
<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" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
<text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
x="50" y="86">logo</text>
</svg>
</body>
</html>
On running the above script, the output window will pop up, displaying the SVG logo mentioned with a linear gradient drawn on the webpage using the measurements mentioned in the above script.
1K+ Views
