Bon je viens de faire un truc assez marrant comme vous pouvez le voir
En bidouillant avec le svg le wallpaper de probably-me et un fichier xml dynamique
ça c'est l'effet transition overlay
et autre bizarrie si je remplace le fichier svg(donc quel que chose comme ça /home/user/image.svg ) par les donné du svg (donc ça <svg> .... </svg>) on voit bien le fichier svg mais il ne fait pas les transition c'est béte ...
Bon vue que c'est pas trop mal je le met quand même
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1440px" height="900px" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>This graphic links to an external image
</desc>
<g><defs>
<linearGradient id="MonDegrade" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#F60" />
<stop offset="100%" stop-color="#FF6" />
</linearGradient>
</defs></g>
<g fill="url(#MonDegrade)" >
<rect x="0" y="0" width="1440px" height="900px"/>
</g>
<image x="0" y="0" width="1440px" height="900px"
xlink:href="/home/tyrus/Dev/crunchybranch_transp.png">
<title>My image</title>
</image>
<!-- Montre le contour du canevas avec un élément 'rect' -->
</svg>
Bon au dessus c'est du svg à enregistrer dans un fichier
Et on obtient ça
il y a la ligne à modifier xlink:href pour correspondre au chemin de l'image j'ai pris ton image probably-me
Donc par exemple dans ton cas tu fais 4 fichier svg ou tu modifie les couleur
Dans ce cas c'est un dégradé <linearGradient
les valeur des couleur de ce style #F60 on peut les obtenir avec l'interface qui permet de changer la couleur du fond d'écran plus d'info ici
http://www.yoyodesign.org/doc/w3c/svg1/pservers.html#LinearGradientElement
pour avoir une seul couleur
http://www.yoyodesign.org/doc/w3c/svg1/painting.html
remplacer la partie
<g><defs>
<linearGradient id="MonDegrade" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#F60" />
<stop offset="100%" stop-color="#FF6" />
</linearGradient>
</defs></g>
<g fill="url(#MonDegrade)" >
<rect x="0" y="0" width="1440px" height="900px"/>
</g>
par
<rect x="0" y="0" width="1440px" height="900px" fill="red"/>
