Icônes en SVG

Pour mon Media Player, baptisé VaeSoli!, littéralement « Malheur à ceux qui sont seuls », j'avais besoin d'icônes. Je me suis donc inspiré d'icônes trouvées sur flaticon, modifiées en CorelDraw, exportées en SVG, et finalement nettoyées manuellement pour aboutir à une série de nouvelles icônes originales.

Ces icônes partagent toutes une structure commune dans leur construction : un arrière-plan et un avant-plan, tous deux divisés en une partie gauche et une partie droite.

L'arrière-plan est composé de deux demi-cercles. L'avant-plan est également divisé une partie gauche superposée au demi-cercle gauche et une partie droite superposée au demi-cercle droit. Ces 4 éléments (demi-cercle gauche, demi- cercle droit, avant-plan gauche et avant-plant droit) portent des IDs qui sont toujours les mêmes pour toutes les icônes.

Pour mettre au point ces icônes, je me suis basé sur un modèle réalisé manullement et qui a donc été reproduit comme matrice de chaque icône. En voici la définition :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xml:space="preserve"
     version="1.1"
     shape-rendering="geometricPrecision"
     text-rendering="geometricPrecision"
     image-rendering="optimizeQuality"
     fill-rule="evenodd"
     clip-rule="evenodd"
     viewBox="0 0 512 512"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     class="trql-labs icon">


    <!-- Define the left and right colors of the elements (left + right
        half-circle + left and right foreground parts) -->
    <defs>
        <linearGradient id="lightred">
            <stop offset="0%"   style="stop-color: #f99f9f" />
            <stop offset="100%" style="stop-color: #f99f9f" />
        </linearGradient>
        <linearGradient id="darkred">
            <stop offset="0%"   style="stop-color: #910a0a" />
            <stop offset="100%" style="stop-color: #910a0a" />
        </linearGradient>
        <linearGradient id="lightblack">
            <stop offset="0%"   style="stop-color: #331b1b" />
            <stop offset="100%" style="stop-color: #331b1b" />
        </linearGradient>
        <linearGradient id="darkblack">
            <stop offset="0%"   style="stop-color: #000000" />
            <stop offset="100%" style="stop-color: #000000" />
        </linearGradient>
        <linearGradient id="red">
            <stop offset="0%"   style="stop-color: #f44336" />
            <stop offset="100%" style="stop-color: #f44336" />
        </linearGradient>
    </defs>

    <metadata><![CDATA[Copyright © Pat Boens 2024]]></metadata>

    <g data-keywords="list of keywords">
        <!-- background circle -->
        <g id="circle">
            <path id="left-circle"  fill="url(#lightred)" d="M255.83 512.17c-140.61,0 -256,-115.39 -256,-256 0,-140.61 115.39,-256 256,-256l0 512z"/>
            <path id="right-circle" fill="url(#darkred)" d="M511.83 256.17c0,-140.61 -115.39,-256 -256,-256l0 512c140.61,0 256,-115.39 256,-256zm0 0z"/>
        </g> <!-- #circle -->

        <!-- foreground objects -->
        <g id="parts">
            <g id="left-part" fill="url(#lightblack)">
            </g> <!-- #left-part -->

            <g id="right-part" fill="url(#darkblack)">
            </g> <!-- #right-part -->
        </g> <!-- #parts -->
    </g>
</svg>

Le demi-cercle gauche est affublé de la couleur de remplissage #f99f9f tandis que la couleur de remplissage du demi-cercle droit est #910a0a.

La couleur de remplissage de l'avant-plan gauche est #f44336 et celle de l'avant-plan droit est #000000.

Grâce aux IDs disposés dans les SVG il est possible de redéfinir aisément chaque couleur de remplissage en CSS et ainsi de disposer d'icônes thématiques. Pour autant, il est nécessaire d'inclure les icônes sous leur rormat primitif : en SVG , et non sous forme d'image (<img src="my-icon.svg" />)

Toutes les icônes sont bâties sur une matrice 512 x 512. Cette matrice est respectée dans l'attribut "viewbox" du SVG : viewbox="0 0 512 512". Grâce au CSS il est très aisé de déterminer la largeur et hauteur réelle d'affichage. Chaque icône possède en outre une classe générique positionnée sur la racine du svg : class="trql-labs icon".

Voici la liste des icônes dans leur définition initiale :

Voici la liste des icônes dans un thème différent :

Voici la liste des icônes dans un autre thème encore :

Pour télécharger chaque icône, servez-vous du clic droit et sauvez l'icône sur votre ordinateur. Toutes ces icônes sont disponibles sous licence (cc) d'attribution. Vous pouvez vous en servir sans demander notre permission, même pour des utilisations commerciales.

CONCLUSION: (1) grâce à une structure commune partagée par toutes les icônes nous pouvons nous servir du même jeu de SVGs pour les affubler de thèmes différents. (2) pour que cela soit le cas, il est nécessaire d'inclure les SVGs sous la forme de SVG (<svg>...</svg> et non sous la forme d'images <img src="myicon.svg" ... />)

LAST BUT NOT LEAST: Au fur et à mesure de mes développements je serai amené à créer plus d'icônes. Dès lors, si vous souhaitez vous mettre à jour … planifiez une visite sur la présente page, disons, tous les 3 mois.