How to embed PHP code in an HTML page ?

How to include SVG code inside HTML file ?

Last Updated : 14 Oct, 2024

SVG stands for Scalable Vector Graphics. It is an XML-based format used to describe vector graphics. SVG is widely supported in modern web browsers, including Google Chrome, Firefox, Opera, and others, which can render SVG images seamlessly. Designers frequently use the SVG format for creating illustrations, logos, and icons, as SVG images are pixel-perfect at any resolution, ensuring clarity and quality regardless of scaling.

Let's see examples to understand How to Add the SVG Code.

Using the <svg> Tag

To include SVG graphics in an HTML document, you use the <svg> tag. This tag acts as a container for SVG graphics and is placed within the <body> section of the HTML file. The <svg> tag consists of both opening and closing tags, and it often includes attributes like width and height to define the size of the SVG image.

Example: In this example, we will use SVG code in the HTML file.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Include SVG Code</title>
</head>

<body>
    <center>
        <h2>Welcome To GFG</h2>
        <!-- SVG tag starts from here-->
        <svg width="600" 
             height="150">
            <rect width="600" 
                  height="150" 
                  fill="green" 
                  stroke="black" 
                  stroke-width="6" />
        </svg>
        <!-- SVG tag ends here-->
    </center>
</body>

</html>

Output:

How to embed PHP code in an HTML page ?

K

kunalmali

Improve

Article Tags :

Similar Reads

How to include HTML code snippets in HTML ?

In this article, we will learn how to include HTML snippets in HTML code. We will include the HTML code snippet of "gfg.html" into "index.html". To achieve this task, we are going to write a JavaScript function in "index.html" which traverses the collection of all HTML elements in "gfg.html" and sea

How to import a SVG file in JavaScript ?

SVG (Scalable Vector Graphics) files in JavaScript are XML-based vector image files commonly used for describing two-dimensional vector graphics. In this article, we are going to see and use different ways of using SVGs. Below are the methods to import an SVG file in JavaScript: Table of Content Usi

How to embed PHP code in an HTML page ?

PHP is the abbreviation of Hypertext Preprocessor and earlier it was abbreviated as Personal Home Page. We can use PHP in HTML code by simply adding a PHP tag without doing any extra work. Example 1: First open the file in any editor and then write HTML code according to requirement. If we have to a

How to use SVG Images in HTML?

SVG images are special graphics used in HTML that doesnâ€™t lose quality when resized. They are great for icons, logos, and shapes because they stay clear at any size. To use SVG images in HTML, add them with <img src=" image.svg"> or paste SVG code directly with <SVG>.1. Using SVG Image w

How to Insert an Image from Folder in HTML

The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path. Table of ContentUsing HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> tag

How to define a piece of computer code in HTML?

The <code> element in HTML is used to display computer code, ensuring it is displayed with a fixed-width font for proper alignment and readability. Unlike basic heading tags, the <code> tag maintains the correct formatting of the code, including spaces and line breaks. HTML offers variou