How to make responsive iframe in svg?

@kadin 

To create a responsive iframe in an SVG image, you can use the <foreignObject> element to embed the iframe within the SVG. Here's a step-by-step guide on how to do it:

1. Create the SVG container:

1
2
3

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Your SVG content here -->
</svg>

1. Add a

1
2
3
4
5

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="0" y="0" width="100%" height="100%">
    <iframe src="your-iframe-url" width="100%" height="100%"></iframe>
  </foreignObject>
</svg>

1. Style the SVG to make it responsive:

1
2
3
4
5

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

By following these steps, you can create a responsive iframe inside an SVG image that will adjust its size according to the parent container. You can further customize the appearance of the SVG and iframe by adding CSS styles as needed.