svg rounded corner and shadow

shadow (like css shadow-box)

At least with Firefox you can use a filter, like the following:

.shadow{filter: drop-shadow(8px 6px 6px gray);}

rounded corner

The simplest way to round the corners of a box is to

  • use rect element with rx and ry attributes (such as rx="20" ry="20")
  • and define the style of rect with stroke-linejoin:round; and something like stroke:[your color]; stroke-width:[the width you like];

You can see the following example

box rounded

svg with external image embedded

All browsers have this limitation: they not allow to show an svg with an external image embedded, such as

<image x="2" y="2" width="somewidth" height="someheight" xlink:href="myimage.jpg">

even though the image is in local.

For security reasons.