How to embed SVG element in an iframe ?

Last Updated : 30 Nov, 2021

In this article, we will learn how to embed an SVG into an iframe. It is an HTML element that represents nested browsing contexts, allowing one HTML page to be embedded inside of another. It has many attributes but here we discuss src and srcdoc attributes to solve this problem. The iframe src attribute specifies the URL of the document embedded in the <iframe>.

Note: We need to have some familiarity with HTML and CSS to be able to solve this problem.

Syntax:

<iframe src="https//www.geeksforgeeks.org/"
    title="GeeksforGeeks" width="400" height="300">
</iframe>

Example 1: In this example, we will use the src attribute.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
            display: flex; 
            justify-content: center; 
        } 
  
        h1, 
        container { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="container"> 
        GeeksForGeeks 
    </h1> 
  
    <div class="container"> 
        <iframe src= 
"https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg"> 
        </iframe> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use the srcdoc attribute. An inline frame shows the HTML content of the page specified by the srcdoc attribute. This attribute takes the HTML content of any other page.

HTML

<html> 
  
<head> 
    <style> 
        .container { 
            display: flex; 
            justify-content: center; 
        } 
  
        h1, 
        container { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="container">GeeksForGeeks</h1> 
    <div class="container"> 
        <iframe srcdoc='<svg xmlns="http://www.w3.org/2000/svg"
                    width="76.533" height="39.026" 
                    viewBox="0 0 76.533 39.026"> 
                    <path d="M2380.7,6597.866a12.252,12.252,0,0, 
                    0-.261-1.513l-30.726-.027a12.545,12.545,0,0, 
                    1,.908-3.443,12.337,12.337,0,0,1,2.739-4.044, 
                    12.151,12.151,0,0,1,4.018-2.581,12.634,12.634, 
                    0,0,1,14.3,3.051l4.852-4.748a18.176,18.176,0, 
                    0,0-6.131-4.331,20.037,20.037,0,0,0-8.112-1.564, 
                    20.25,20.25,0,0,0-7.671,1.459,19.158,19.158,0, 
                    0,0-6.261,4.07,19.584,19.584,0,0,0-4.226,6.184, 
                    18.7,18.7,0,0,0-1.487,5.947h-.2a18.674,18.674, 
                    0,0,0-1.489-5.947,19.544,19.544,0,0,0-4.226-6.184, 
                    19.133,19.133,0,0,0-6.261-4.07,21.354,21.354,0, 
                    0,0-15.783.1,18.2,18.2,0,0,0-6.131,4.331l4.853, 
                    4.748a13.264,13.264,0,0,1,14.3-3.051,12.131, 
                    12.131,0,0,1,4.017,2.581,12.323,12.323,0,0,1, 
                    2.74,4.044,12.527,12.527,0,0,1,.908, 
                    3.443l-30.726.027a12.256,12.256,0,0,0-.261,1.513, 
                    15,15,0,0,0-.1,1.773,20.713,20.713,0,0,0,1.1, 
                    6.783,15.709,15.709,0,0,0,3.443,5.686,17.309, 
                    17.309,0,0,0,6,4.123,20.587,20.587,0,0,0,7.983, 
                    1.46,20.226,20.226,0,0,0,7.669-1.46,19.086, 
                    19.086,0,0,0,6.261-4.07,19.506,19.506,0,0,0, 
                    4.226-6.184,18.163,18.163,0,0,0, 
                    1.153-3.629h.871a18.27,18.27,0,0,0,1.151, 
                    3.629,19.545,19.545,0,0,0,4.226,6.184,19.111, 
                    19.111,0,0,0,6.261,4.07,20.241,20.241,0,0,0, 
                    7.671,1.46,20.572,20.572,0,0,0,7.981-1.46, 
                    17.282,17.282,0,0,0,6-4.123,15.717,15.717,0, 
                    0,0,3.445-5.686,20.726,20.726,0,0,0, 
                    1.1-6.783A15.259,15.259,0,0,0,2380.7, 
                    6597.866Zm-46.245,5.608a12.1,12.1,0,0,1-2.766, 
                    4.043,12.467,12.467,0,0,1-4.043,2.583,14.378, 
                    14.378,0,0,1-9.939.052,11.776,11.776,0,0, 
                    1-3.522-2.218,8.459,8.459,0,0,1-1.8-2.374,13.476, 
                    13.476,0,0,1-1.173-3.208l23.658,0A11.487,11.487, 
                    0,0,1,2334.457,6603.475Zm38.236,2.086a8.466, 
                    8.466,0,0,1-1.8,2.374,11.771,11.771,0,0,1-3.522, 
                    2.218,14.378,14.378,0,0,1-9.939-.052,12.491, 
                    12.491,0,0,1-4.044-2.583,12.088,12.088,0,0, 
                    1-2.765-4.043,11.427,11.427,0,0, 
                    1-.415-1.126h11.92v0h11.739A13.509,13.509, 
                    0,0,1,2372.692,6605.561Z" 
                    transform="translate(-2304.273 -6578.666)" 
                    fill="#2f8d46"></path></svg>'> 
        </iframe> 
    </div> 
</body> 
  
</html>