How to Insert an Image from Folder in HTML

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 Insert an Image from Folder in HTML

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 add jQuery code to HTML file ?

In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and

How to Create an index.html File?

Creating an index.html file is a fundamental step in HTML programming and website development. This file serves as the backbone of a basic HTML webpage. In this article, we will explore four straightforward methods to create an index.html file, which is important for building and serving web content

How to define a client-side script in HTML5 ?

To define a client-side script in HTML5, we can do <script> tag or adding external script file by src attribute to the HTML file. <script> tag contains the JavaScript to be added for the client-side scripting. Syntax: <script> // JavaScript goes here console.log('GeeksforGeeks');

How to Insert Image in HTML from Folder?

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 Content Using HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> ta

How to Add Image inside Table Cell in HTML ?

Adding images inside HTML table cells can enhance the visual appeal of your tables, allowing you to effectively present images alongside text. These are the following approaches: Table of Content Using <img> tag inside Using CSS background-image propertyUsing <img> tag inside <td>T

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 CSS and 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

How to Include CSS Files in Vue2 ?

VueJS is one of the greatest frameworks for JavaScript similar to ReactJS. The user interface layer is designed with VueJS. When working with Vue2, styling your components is an essential aspect of creating a visually appealing and user-friendly application. In Vue2 you can include CSS files in vari