# Embedded content > Images, SVG, audio, video, canvas and iframes with small defaults for sizing and alignment. Page: https://pico.rusticstack.com/docs/content/embedded-content Media elements get a few defaults so they behave in a flowing layout. Nothing else is imposed: size them with attributes or your own CSS. | Element | Default | | --- | --- | | `img` | `max-width: 100%`, `height: auto`, no border | | `svg` | `fill: currentColor` when it has no `fill` attribute, overflow hidden | | `audio`, `video`, `canvas` | `inline-block`; `audio` without `controls` is hidden | | `iframe` | no border | | `audio`, `canvas`, `iframe`, `img`, `svg`, `video` | `vertical-align: middle` | ## Images An image never grows wider than its container. Set `width` and `height` attributes so the browser reserves space before it loads. **Example: Responsive image** ```html A gradient from blue to orange

``` Pair an image with a caption in a [figure](/docs/content/figure). ## SVG An inline `svg` without a `fill` attribute takes the current text color, so icons follow the theme and dark mode. Set `fill` on the root to opt out. **Example: Inline SVG** ```html ``` ## Audio and video Add `controls` to show the player. Without it, `audio` is hidden. **Example: Video** ```html

``` Add a `` to video that has speech. ## iframe An iframe has no border. Set a `title` so assistive tech can name it, and set the size with attributes or CSS. **Example: iframe** ```html ``` ## Customization There are no variables for media. Write your own rules for the elements. Unlayered CSS beats the framework layers, see [Themes](/docs/customization/themes).