KReimage (2.5) is an useful tool, but converting an avif with a portrait forma, it could happen that the correct orientation (portrait) goes away.
A fix of this bug, is modifying the file reimaga-kdialogo (tipically in /urs/bin) with this new code: you can download it (too long to add as text here).
Gimp change colors
An useful tool to change undesired colors, in GIMP, is
colors -> map -> rotate colorsavif metadata
To write metadata in avif image files with Digikam, you have to set it in
settings – > metadata -> behavior, as in the attached image:
re-image unending pop-up
If the re-image pop-up doesn’t disappear after working (ad explained here), try this
`sudo apt install qtchooser`svg text on circle
To put a text on a circle you have either
a) to convert the circle in a path.
This website can help you.
Or b) use <circle> tag, such as in this example
<circle id="circle" cx="70" cy="80" r="68" />
<text style="fill: green; font-family: Arial, sans-serif; font-weight: bold; font-size: 12px; white-space: pre;">
<textPath href="#circle" startOffset="60%" side="right">some text</textPath>
</text>In this example the code side="right" will help you to get a not upside down text.
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.