SVG <foreignObject> Element

Last Updated : 14 Oct, 2020

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

My Personal Notes

Related Articles