How to Use SVG <foreignObject>  Embed HTML Inside SVG
SVG foreignObject lets you embed HTML elements inside SVG  styled text blocks, form inputs, and rich layouts within an SVG container.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG foreignObject Syntax and Use Cases
The `<foreignObject>` element requires `x`, `y`, `width`, and `height` attributes. Inside, you place HTML with an `xmlns='http://www.w3.org/1999/xhtml'` namespace. Browser support is universal in modern browsers.
- Wrapped text with CSS text-wrap inside SVG
- Form inputs embedded in SVG diagrams
- MathML or rich text formatting in SVG documents
foreignObject Security Considerations
foreignObject can embed JavaScript via HTML  making it an XSS risk in user-uploaded SVG. When displaying untrusted SVG, use `<img>` (which blocks foreignObject) or sanitize with DOMPurify before inlining.
- Never inline user-uploaded SVG with foreignObject
- DOMPurify removes foreignObject from sanitized SVG
- Use <img src> for untrusted SVG (blocks script execution)
Frequently Asked Questions
Does SVG foreignObject work in all browsers?
Yes  foreignObject is supported in Chrome, Firefox, Safari, and Edge. It does not work in Internet Explorer and is blocked when SVG is served via <img>.
Can I use CSS Flexbox inside SVG foreignObject?
Yes  HTML inside foreignObject supports full CSS including Flexbox, Grid, and all standard layout properties.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG