Open In App

How to include SVG code inside HTML file ?

Last Updated : 29 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Introduction: SVG stands for Scalable Vector Graphics. It is written in XML based format that is used to describe vector graphics. It is widely supported in browsers like Google Chrome, Firefox, Opera, etc. and many of them have the tendency to render SVG images. Designers also use SVG format for making the illustrations like logos, icons, etc. as they are pixel-perfect at any resolution.

In this article, we will insert a sample SVG code in the HTML file that will help you to include any SVG code that you want in your own HTML file.

<svg> Tag: In order to include SVG code, we have to use <svg> tag in the HTML code. It is a container that is used for SVG graphics. It is written inside the <body> section of the HTML file. It has both opening and closing tags. We also use width and height attributes with the <svg> tag

Now let’s see an example to understand it better.

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:


Similar Reads

How to include frameset inside another frameset in HTML ?
The frameset is the collection of frames in the browser window. It is used to specify the number of rows and columns in a frameset with their pixels of space. There are some real-world applications of frameset like while making the website for any purpose, the developer first makes the design of the whole website where he divides the whole website
2 min read
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 searches for elements with specific attributes. It cr
3 min read
How to include content of a PHP file into another PHP file ?
Including the content of a PHP file into another file reduces the complexity of code by reducing the code and improving its modularity by splitting the code into different files so that it is easy to understand and manage. There are two ways to do it by using the following PHP functions. PHP include() Function: It will show the warning if the file
2 min read
How to include a JavaScript file in another JavaScript file ?
In native JavaScript, before ES6 Modules 2015 was introduced had no import, include, or require functionalities. Before that, we can load a JavaScript file into another JavaScript file using a script tag inside the DOM that script will be downloaded and executed immediately. Now after the invention of ES6 modules, there are so many different approa
3 min read
What are the different ways to include CSS Code in HTML ?
In HTML, styles can be incorporated through external linking, where a separate CSS file is connected to the HTML document using the &lt;link&gt; tag in the &lt;head&gt; section, ensuring consistency across multiple pages. Alternatively, internal styling can be employed by placing CSS rules within a &lt;style&gt; tag in the &lt;head&gt; section, sui
1 min read
How to insert PHP code in HTML document using include or require keyword ?
Inserting PHP code in an HTML document involves embedding PHP scripts within HTML files. This is done using PHP tags (`&lt;?php ... ?&gt;`). Common methods include using include or require statements to incorporate external PHP files, allowing dynamic content within the HTML structure. We can insert any PHP file into the HTML code by using two keyw
3 min read
How to include Comments in CSS Code ?
In CSS, Comments can be added to provide explanations, notes, or annotations within the code. Comments are helpful for code documentation and collaboration, providing insights into the purpose or usage of certain styles. Note: Comments are ignored by the browser and do not affect the rendering of the webpage. There are two ways to include comments:
1 min read
What is the best way to include CSS file? Why use @import?
CSS property can be include in the HTML page in a number of different ways. HTML documents are formatted according to the information in the style sheet which is to be included.There are many ways to include CSS file which are listed below: External style sheet (Using HTML &lt;link&gt; Tag): External CSS contains separate CSS file which contains on
4 min read
How to include a JavaScript File in Angular and call a Function from that Script ?
In this article, we will learn how to include a JavaScript file in Angular and call a function, defined inside that file, from that script. In Angular, we can include JavaScript script files to import some features or utilize some external libraries or pieces of code, which can be a great asset while developing a certain feature that is dependent o
4 min read
How to include one CSS file in another?
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import various CSS files in the main HTML file or the main CSS file. It can be done by using the @import keyword. Example 1: To showcase to include a CSS file in another first create a structure of HTML without using any CSS properties. C/C++ Code &lt;!D
3 min read