Skip to content
Related Articles

Related Articles

Improve Article

SVG <foreignObject> Element

  • Last Updated : 14 Oct, 2020
Geek Week

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. 


<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">


  • 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.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content=
    <svg viewBox="500 500 ">
            div {
                color: green;
                font: 18px serif;
                height: 100%;
                overflow: auto;
                background-color: black;
        <foreignObject x="100" y="25" 
            width="160" height="160">


Supported Browsers:

  • Chrome
  • Edge
  • Opera
  • Internet explorer
  • Safari
  • Firefox

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :