SVG in HTML
Last Updated :
22 Nov, 2023
In this article, we will learn about HTML SVG. It stands for Scalable Vector Graphics, based on the XML format used to describe vector graphics. SVG is popular and widely used due to its responsive web-design feature, it ensures the clarity of the graphics on any device and dimensions without losing image quality. Another feature of SVG is you can easily integrate SVG in your HTML file with the help of <svg> element. With the help of JavaScript, we can manipulate SVG elements, and give dynamic effects.
Example 1: This example illustrates how to embed SVG into an HTML document along with SVG graphics.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG to HTML</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div style="display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height:100vh;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px">
SVG in HTML
</p>
<svg width="200"
height="200"
style="border: 2px solid black;">
<circle cx="95"
cy="95"
r="70"
stroke="green"
stroke-width="5"
fill="yellowgreen" />
</svg>
</div>
</body>
</html>
|
Output:
Output
Example 2: This example illustrates how to embed SVG into an HTML document along with SVG graphics.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>SVG to HTML</title>
</head>
<body>
<div style="display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height:100vh;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px;">
SVG in HTML
</p>
<svg width="200"
height="200"
style="border: 2px solid black;">
<line x1="20"
y1="20"
x2="150"
y2="150"
stroke="blue" />
</svg>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...