Il est assez simple de réaliser un nouveau fichier d’icônes de personnalité politique. Les fichiers de base ont été optimisés afin d’être le plus léger possible et d’être conforme au recommendation du W3C en termes de code, nous vous invitons donc à utiliser un éditeur de texte plutôt qu’un logiciel de retouche d’image vectorielle autant que possible, notamment si la modification à apporter ne concerne qu'un changement de couleurs.
Pour le corps gris de l’icône, téléchargez le fichier ? politic personality icon.svg montré ci-contre. Lorsque vous ouvrez le document avec un éditeur de texte, vous verrez le code ci-dessous :
Code |
---|
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="250"> <defs> <filter id="e"><feGaussianBlur stdDeviation="1"/></filter> <filter id="f"><feGaussianBlur stdDeviation="2"/></filter> <linearGradient id="k" x1="7" y1="167" x2="201" y2="167" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#999"/> <stop offset="1" stop-color="#FFF"/></linearGradient> <linearGradient id="p" x1="64" y1="138" x2="138" y2="123" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#EEE"/> <stop offset=".2" stop-color="#BBB"/> <stop offset=".8" stop-color="#FFF"/> <stop offset="1" stop-color="#CCC"/></linearGradient> <linearGradient id="q" x1="39" y1="29" x2="148" y2="101" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#777"/> <stop offset=".6" stop-color="#CCC"/> <stop offset="1" stop-color="#FFF"/></linearGradient> </defs> <g fill="none" stroke="#BBB" stroke-width="2"> <circle filter="url(#e)" cx="99" cy="70" r="61"/> <g stroke-width="3"> <path filter="url(#f)" d="m56,113c-29,16-55,59-40,90 18,35 153,33 169,1 15-29 4-64-37-91z"/> <path fill="url(#k)" stroke="#999" d="m53,110c-29,16-55,59-40,90 18,35 153,33 169,1 15-29 4-64-38-91z"/> </g><g stroke-width="1"> <path fill="#c5c5c5" stroke="#CCC" d="m61,110 1,1c-2,2-6,2-7,8-15,18-29,43-39,84 12-47 27-74 44-94z"/> <path fill="#b6b6b6" d="m137,113-1,2c17,17 34,40 46,82-11-42-26-66-44-84z"/></g> <path fill="url(#p)" stroke="#DDD" d="m79,125c-4,4-9,6-8,17-11-5-18-14-14-29 7,5 14,9 23,12zm36,0c4,4 9,6 9,17 11-5 18-14 15-29-7,5-14,9-23,12z"/> <circle fill="url(#q)" stroke="#999" cx="98" cy="68" r="60.5"/> </g> </svg> |
Nous allons maintenant créer l’écharpe colorée en insérant entre l’avant-dernière ligne (</g>
)et la dernière ligne (</svg>
) du code précédent les éléments nécessaires.
Notez que, quelques soit votre cas de figure, si l’une des couleurs extérieurs est blanche, vous avez la possibilité de dessiner une bordure en ajoutant le code stroke="#ddd"
aux directives du chemin.
Par ailleurs, vous pouvez également partir des fichiers exemples ci-après.
Dans ce premier cas, nous souhaitons obtenir une écharpe d’une seule couleur ou don le fond est uni. Ce premier cas peut également être utilisé comme « fond extérieur ».
Pour ce faire nous allons insérer le code suivant :
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/>
Dans ce second cas, nous étudierons une écharpe constitué de deux bande de même largeur. Nous utiliserons le code suivant :
<path fill="couleur_supérieure" d="M 33,110c33.2,53 77.8,92 137.6,118.3l-10.8,9.5c-60.9-18.65-107.7-58.15-135.8-118.8z"/> <path fill="couleur_inférieure" d="M 24,119c28.1,60.65 74.9,100.15 135.8,118.8l-10.8,9.5c-62-11-111-51-134-119.3z"/>
Dans ce troisième cas, nous nous intéressons à une écharpe constitué de trois bandes de même largeur. Deux possibilités s’offrent à nous :
Dans la première possibilité, nous utiliserons le code suivant :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-7.2,6.33c-60.53-21.2-106.6-60.53-136.4-118.63z"/> <path fill="couleur_centrale" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63l-7.2,6.34c-61.27-16.1-108.8-55.77-135.2-118.97z"/> <path fill="couleur_inférieure" d="M21,122c26.4,63.2 73.93,102.87 135.2,118.97l-7.2,6.33c-62-11-111-51-134-119.3z"/>
Dans la seconde, nous allons réutiliser le code de l’écharpe à fond uni auquel nous ajouterons le code de la bande centrale du code ci-dessus.
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/> <path fill="couleur_centrale" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63l-7.2,6.34c-61.27-16.1-108.8-55.77-135.2-118.97z"/>
Une petite variation du cas de l’écharpe à trois bandes égales est quand les trois bandes sont séparées par une quatrième couleur. Nous allons reprendre les codes vue ci-dessus et ajouter en dernier le code du liseré comme dans suit :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-7.2,6.33c-60.53-21.2-106.6-60.53-136.4-118.63z"/> <path fill="couleur_centrale" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63l-7.2,6.34c-61.27-16.1-108.8-55.77-135.2-118.97z"/> <path fill="couleur_inférieure" d="M21,122c26.4,63.2 73.93,102.87 135.2,118.97l-7.2,6.33c-62-11-111-51-134-119.3z"/> <path stroke="couleur_liserée" stroke-width="2" fill="none" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63M21,122c26.4,63.2 73.93,102.87 135.2,118.97"/>
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/> <path fill="couleur_centrale" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63l-7.2,6.34c-61.27-16.1-108.8-55.77-135.2-118.97z"/> <path stroke="couleur_liserée" stroke-width="2" fill="none" d="M27,116c29.8,58.1 75.87,97.43 136.4,118.63M21,122c26.4,63.2 73.93,102.87 135.2,118.97"/>
Avec les cas vus précédemment, nous allons pouvoir voir à présent des cas de figure plus particulier en commençant par ce quatrième cas.
Cette première possibilité est réalisé en découpant la bande en quatre bandes égales et en recombinant les bandes centrales :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-5.4,4.75c-60.35-22.48-106.05-61.73-136.7-118.55z"/> <path fill="couleur_centrale" d="M28.5,114.5c30.65,56.83 76.35,96.08 136.7,118.55l-10.8,9.5c-61.45-14.83-109.35-54.58-134.9-119.05z"/> <path fill="couleur_inférieure" d="M19.5,123.5c25.55,64.48 73.45,104.23 134.9,119.05l-5.4,4.75c-62-11-111-51-134-119.3z"/>
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/> <path fill="couleur_centrale" d="M28.5,114.5c30.65,56.83 76.35,96.08 136.7,118.55l-10.8,9.5c-61.45-14.83-109.35-54.58-134.9-119.05z"/>
Cette seconde possibilité part de l’écharpe à deux bandes égales et coupe la bande inférieure en deux. Voici le code :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-10.8,9.5c-60.9-18.65-107.7-58.15-135.8-118.8z"/> <path fill="couleur_centrale" d="M24,119c28.1,60.65 74.9,100.15 135.8,118.8l-5.4,4.75c-61.45-14.83-109.35-54.58-134.9-119.05z"/> <path fill="couleur_inférieure" d="M19.5,123.5c25.55,64.48 73.45,104.23 134.9,119.05l-5.4,4.75c-62-11-111-51-134-119.3z"/>
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/> <path fill="couleur_centrale" d="M24,119c28.1,60.65 74.9,100.15 135.8,118.8l-5.4,4.75c-61.45-14.83-109.35-54.58-134.9-119.05z"/>
De même que la précédente, cette troisième possibilité part de l’écharpe à deux bandes égales et coupe la bande supérieure en deux. Voici le code :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-5.4,4.75c-60.35-22.48-106.05-61.73-136.7-118.55z"/> <path fill="couleur_centrale" d="M28.5,114.5c30.65,56.83 76.35,96.08 136.7,118.55l-5.4,4.75c-60.9-18.65-107.7-58.15-135.8-118.8z"/> <path fill="couleur_inférieure" d="M24,119c28.1,60.65 74.9,100.15 135.8,118.8l-10.8,9.5c-62-11-111-51-134-119.3z"/>
<path fill="couleur_fond" d="M33,110c33.2,53 77.8,92 137.6,118.3l-21.6,19c-62-11-111-51-134-119.3z"/> <path fill="couleur_centrale" d="M28.5,114.5c30.65,56.83 76.35,96.08 136.7,118.55l-5.4,4.75c-60.9-18.65-107.7-58.15-135.8-118.8z"/>
Pour ce cinquième cas, nous verrons deux possibilités :
Cette première possibilité est amené en fusionnant les bandes supérieure et centrale d’une écharpe à trois bandes :
<path fill="couleur_supérieure" d="M33,110c33.2,53 77.8,92 137.6,118.3l-14,12.4c-67-21-112-55-135.6-118.7z"/> <path fill="couleur_inférieure" d="M21,122c32,79 79,99 135.6,118.7l-7.6,6.6c-62-11-111-51-134-119.3z"/>
Cette seconde possibilité est amené en fusionnant les bandes centrale et inférieure d’une écharpe à trois bandes :
<path fill="couleur_supérieure" d="M33,110c33,53 78,93 137.6,118.3l-6.6,5.7c-50-11-112-60-136-119z"/> <path fill="couleur_inférieure" d="M28,115c28,58 69,99 136,119l-15,13.4c-62-11-111-51-134-119.3z"/>
Ce sixième cas nous amène à une écharpe découpé en quatre quadrants (1 en haut à gauche, 2 en haut à droite, 3 en bas à droite, 4 en bas à gauche). Nous allons définir quatre possibilités :
Première possibilité, les quatre quadrants de couleurs distinctes :
<path fill="couleur_quadrant_1" d="M33,110c16.6,26.5 36.05,49.5 58.83,69.16l-12.23,14.99c-22.83-19.79-41.56-44.83-55.61-75.15z"/> <path fill="couleur_quadrant_2" d="M91.83,179.16c22.77,19.67 48.87,35.99 78.77,49.14l-10.8,9.5c-30.45-9.32-57.38-23.86-80.2-43.65z"/> <path fill="couleur_quadrant_3" d="M79.61,194.15c22.82,19.79 49.75,34.33 80.2,43.65l-10.8,9.5c-31.-5.5-58.75-18.25-81.62-38.16z"/> <path fill="couleur_quadrant_4" d="M24,119c14.05,30.33 32.78,55.37 55.61,75.15l-12.23,14.99c-22.88-19.91-40.88-46.99-52.38-81.14z"/>
Seconde possibilité, les quadrants 1 et 3 de même couleur, les quadrant 2 et 4 de couleurs distinctes :
<path fill="couleur_quadrants_1_et_3" d="M33,110c16.6,26.5 36.05,49.5 58.83,69.16l-24.45,29.98c22.87,19.91 50.62,32.66 81.62,38.16l10.8,-9.5c-60.9-18.65-107.7-58.15-135.8-118.8z"/> <path fill="couleur_quadrant_2" d="M91.83,179.16c22.77,19.67 48.87,35.99 78.77,49.14l-10.8,9.5c-30.45-9.32-57.38-23.86-80.2-43.65z"/> <path fill="couleur_quadrant_4" d="M24,119c14.05,30.33 32.78,55.37 55.61,75.15l-12.23,14.99c-22.88-19.91-40.88-46.99-52.38-81.14z"/>
Troisième possibilité, les quadrants 2 et 4 de même couleur, les quadrant 1 et 3 de couleurs distinctes :
<path fill="couleur_quadrant_1" d="M33,110c16.6,26.5 36.05,49.5 58.83,69.16l-12.23,14.99c-22.83-19.79-41.56-44.83-55.61-75.15z"/> <path fill="couleur_quadrants_2_et_4" d="M91.83,179.16c22.77,19.67 48.87,35.99 78.77,49.14l-10.8,9.5c-60.9-18.65-107.7-58.15-135.8-118.8l-9,9c11.5,34.15 29.5,61.23 52.38,81.14z"/> <path fill="couleur_quadrant_3" d="M79.61,194.15c22.82,19.79 49.75,34.33 80.2,43.65l-10.8,9.5c-31-5.5-58.75-18.25-81.62-38.16z"/>
Quatrième possibilité, les quadrants 1 et 3 de même couleur, les quadrant 2 et 4 de même couleur :
<path fill="couleur_quadrants_1_et_3" d="M33,110c16.6,26.5 36.05,49.5 58.83,69.16l-24.45,29.98c22.87,19.91 50.62,32.66 81.62,38.16l10.8,-9.5c-60.9-18.65-107.7-58.15-135.8-118.8z"/> <path fill="couleur_quadrants_2_et_4" d="M91.83,179.16c22.77,19.67 48.87,35.99 78.77,49.14l-10.8,9.5c-60.9-18.65-107.7-58.15-135.8-118.8l-9,9c11.5,34.15 29.5,61.23 52.38,81.14z"/>
Voici les codes pour des éléments supplémentaires :
L’étoile de David, symbole de la religion juive :
<g transform="matrix(0.77,0.64,-0.64,0.77,79.6,194.15)"> <path stroke="couleur_étoile" stroke-width="2" fill="none" d="M 8.7,5 0-10-8.7,5z M 8.7,-5 0,10-8.7-5z" /> </g>
Le croissant islamique et l'étoile, symbole religieux présent sur de nombreux drapeau de pays à majorité musulmane :
<g transform="matrix(0.77,0.64,-0.64,0.77,79.6,194.15)"> <path fill="couleur_croissant" d="M7.34,8.09 A 12,12 0 1,1 7.34,-8.09 10,10 0 1,0 7.34,8.09z" /> <path fill="couleur_étoile" d="M1.5,0l4.1,1.4 0,4.3 2.6-3.5 4.2,1.3-2.6-3.5 2.6-3.5-4.2,1.3-2.6-3.5 0,4.3z" /> </g>
La croix helvète, symbole présent sur le drapeau suisse et celui de la croix rouge :
<g transform="matrix(0.77,0.64,-0.64,0.77,79.6,194.15)"> <path fill="couleur_croix" d="M-12-3l9,0 0-9 6,0 0,9 9,0 0,6-9,0 0,9-6,0 0-9-9,0z" /> </g>
La croix scandinave est présente sur de nombreux drapeau d’Europe du nord :
<path fill="couleur_croix" d="M 26,117 22,121 C 35.1,151.3 48.9,173.4 67.3,191 L 57.8,200.2 64.2,206.3 73.7,196.8 C 94.4,214.4 120.8,227.2 157.6,239.7 L 162.8,235 C 128.3,224.6 101.4,209.8 79.7,190.7 L 91.5,178.9 85.5,173.5 73.6,185 C 54,166.1 38.8,143.5 26,117 z" />
N’oubliez pas que vous pouvez prendre des bouts de code et les assembler comme bon vous semble.