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.

expansible image with image-map

We managed to add an image map to the on-click expansible image.

This is the code:

<style type="text/css">
img[usemap] { zoom: 12%;}
img[usemap]:focus {zoom: 50%;}
<map name="mymap">
  <area shape="rect" coords="1294,253,1420,434" title="mount" />
  <area shape="rect" coords="1709,296,1835,477" title="tree" />
<img tabindex="0" src="path-to/myimage" usemap="#mymap" />

The problem is that to close the expansed image you must click either on a map area or outside the image.