Tag: svg

Pubblicato il

multilingual svg

I noticed that the very good and simple code systemlanguage, such in the following example

<switch>
<text x="400" y="500" systemLanguage="en">
  <tspan dy="-50">Love comes</tspan>
  <tspan x="400" dy="200">through the stomach.</tspan>
</text> 
<text x="400" y="500" systemLanguage="de">
  <tspan dy="-50">Liebe geht</tspan>
  <tspan x="400" dy="200">durch den Magen.</tspan>
</text> 
<text x="400" y="500" systemLanguage="es">
  <tspan dy="-50">El amor entra</tspan>
  <tspan x="400" dy="200">por el estómago.</tspan>
</text> 
<text x="400" y="500" systemLanguage="fr">
  <tspan dy="-50">L'amour passe</tspan>
  <tspan x="400" dy="200">par l'estomac.</tspan>
</text>
</switch>

unfortunately doesn’t work: the browsers don’t recognize it.

Pubblicato il

radial gradient in new KDE

The new KDE Plasma releases require a slight change in your svg files, if you have a radiant gradient (no problems instead with the linear ones).

You have to specify the radialGradient cx, cy and r, like in the following example:

<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="gradient" cx="0.50" cy="0.50" r="0.45">
      <stop offset="0%" stop-color="#fbfbf0"></stop>
      <stop offset="80%" stop-color="#bc5a1f"></stop>
    </radialGradient>
  </defs>
  <g>
    <path fill="url(#gradient)" d="M11 .008l3.4 6.888L22 8l-5.5 5.361 1.298 7.57L11 17.357l-6.798 3.574 1.298-7.57L0 8l7.6-1.104z" />
  </g>
</svg>

Because a svg with this other following code won’t work (will be invisible)

<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="gradient">
      <stop offset="0%" stop-color="#fbfbf0"></stop>
      <stop offset="80%" stop-color="#bc5a1f"></stop>
    </radialGradient>
  </defs>
  <g>
    <path fill="url(#gradient)" d="M11 .008l3.4 6.888L22 8l-5.5 5.361 1.298 7.57L11 17.357l-6.798 3.574 1.298-7.57L0 8l7.6-1.104z" />
  </g>
</svg>
Pubblicato il

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
Pubblicato il

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.

Pubblicato il

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.

Pubblicato il

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: