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, 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 seconds.
Try It Free — Convert Image to SVG