SVG Element

The foreignObject element in SVG allows for the inclusion of non-SVG content in an SVG image. This can be useful for integrating HTML and other web technologies into an SVG image.

Syntax

<foreignObject x="0" y="0" width="100" height="100">
  <!-- Non-SVG content here -->
</foreignObject>

The x, y, width, and height attributes define the position and size of the foreignObject element. The content inside the foreignObject element can be any non-SVG content, such as HTML, CSS, and JavaScript.

Example

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="lightblue" />
  <foreignObject x="50" y="50" width="100" height="100">
    <div style="background-color: white; border-radius: 10px; padding: 10px;">
      <h1>Hello world!</h1>
      <p>This is some text inside a foreignObject element.</p>
    </div>
  </foreignObject>
</svg>

In this example, a blue rectangle is drawn using an SVG rect element, and a white box with text is displayed in the center using a foreignObject element containing a div element with h1 and p elements.

Browser Support

The foreignObject element is supported in most modern web browsers, including Chrome, Firefox, Safari, and Edge. However, support may vary. Always test your SVG images in different browsers to ensure compatibility.

Conclusion

The foreignObject element in SVG allows for the integration of non-SVG content in an SVG image. This can be useful for displaying HTML and integrating other web technologies. Remember to test your SVG images in different browsers to ensure compatibility.