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.

Inkscape: text on path e text envelope deformation

1) text on path

a)  Selezionare entrambi il testo e il path;
b) cliccare su “put on path” (dal menu text)
c) poi per eventuali aggiustamenti cliccare due volte sul testo e girarlo come si vuole.

2) text envelope deformation

a) scrivere il testo e poi selezionarlo
b) trasformarlo in path (menu path: object to path)
c) menu path -> path effects -> add “envelope deformation”
d) cliccare sulla prima iconinavicino a top bend path e bottom bend path

e) deformare a piacere il testo trascinando la riga che si crea sopra o sotto il medesimo.

supporto SVG in IE9

Internet Explorer 9 supports the following methods to display SVG markup:

SVG fragments in HTML5 embedding, without using a foreign object (that is, simply include an tag within your HTML)
SVG as full document type (with .svg file extension)
SVG in XML or XHTML (similar to the HTML5 method, only with XML or XHTML files)
SVG as a CSS image
SVG using the object element, as in the following (note the type, height, and width attributes):

SVG using the img, embed, iframe, or frame elements, as in the following: