To put a text on a circle you have before to convert the circle in a path.
This website can help you.
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>background semi-transparent but not child text
Opacity can make an image (semi)transparent, but it affect the text as well, and so the readibility can be difficult. You can see the following example.
your text here
To fix this, you can use the this code background: rgba(0, 0, 0, 0.5);
your text here
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
rectelement with rx and ry attributes (such asrx="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
image-map online
A good, simple and free, website is ImageMap Generator, but you have to save your code after defining 3 or 4 map areas, otherwise the code will result wrong.
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%;}
</style>
<map name="mymap">
<area shape="rect" coords="1294,253,1420,434" title="mount" />
<area shape="rect" coords="1709,296,1835,477" title="tree" />
</map>
<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.