SVG <foreignObject> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification.

Syntax:

<foreignObject x = "The x coordinate of the foreignObject"
         y = "The x coordinate of the foreignObject"
         width = "The width of the foreignObject" 
         height = "The height of the foreignObject">
</foreignObject>

Attributes:

x = The x coordinate of the foreignObject.
y = The x coordinate of the foreignObject.
width = The width of the foreignObject.
height = The height of the foreignObject.

Example:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <meta name="viewport" content= 

        "width=device-width, 

         initial-scale=1.0"> 

</head> 

<body> 

    <svg viewBox="500 500 "> 

        <style> 

            div { 

                color: green; 

                font: 18px serif; 

                height: 100%; 

                overflow: auto; 

                background-color: black; 

            } 

        </style> 

        <foreignObject x="100" y="25" 

            width="160" height="160"> 

            <div> 

                <br><br>GEEKSFORGEEKS<br><br> 

            </div> 

        </foreignObject> 

    </svg> 

</body> 

</html>

Output:

Supported Browsers:

Chrome
Edge
Opera
Internet explorer
Safari
Firefox

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element