pelicin › web › SVG

Image

The <image> element inserts an image to the current SVG. The supported image formats are JPEG, PNG, and SVG.

SVG elements

<image>

Inserts an image.

  • x — top-left x coordinate of the image
  • y — top-left y coordinate of the image
  • width — width of the image
  • height — height of the image
  • href — URL of the image file
  • preserveAspectRatio — see preserveAspectRatio
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- insert image -->
  <image
    x="0" y="0" width="100" height="100"
    href="/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg"
    preserveAspectRatio="xMidYMid slice"
  />
  <!-- text overlay -->
  <text x="50" y="60%" font-size="28" text-anchor="middle" fill="black">
    SVG
  </text>
</svg>
| LIVE PREVIEW
SVG

References