Texte, couleur et dégradé.

Dégradé d'une couleur vers la transparence.

En premier lieu, comme il n'y à pas d'objet à sélectionner, impossible d'appliquer un dégradé ou un remplissage de couleur. Dans l'onglet 'Calques' je ne trouve que 'Calque 1', dans l'onglet 'Objet', 'Calque 1' et dans l'onglet 'Editeur XML' il n'y a qu'un noeud 'id=layer1' et 'label=Calque 1'. Par contre les outils de texte et de dessin fonctionnent.

Donc, on va créer un nouvel objet avec les icônes 'formes' (carré, cercle, etc) qui va délimiter une zone où s'appliquera la couleur ou bien le dégradé. Suivant les paramètres par défaut, l'objet sera remplis par un aplat ou autre. Pour modifier cela, cliquer sur l'onglet 'Fond et contour', ici devrait s'afficher les options de couleurs et de dégradés où il est possible de ne pas avoir de remplissage, de faire des dégradés et de choisir la transparence pour les aplats. Ce sont les même options pour le 'Fond' que pour le 'Contour'.

Pour faire un dégradé linéaire, par défaut il débute avec la couleur sélectionnée vers la tranparence et dans le cas d'un dégradé linéaire, celui-ci est horizontal, la couleur débutant à gauche. Aux extrémités de la ligne qui figure le dégradés, il y a un cercle pour le canal alpha et un carré pour la couleur. Je peux les déplacer afin de changer la direction ou bien l'angle du dégradés mais aussi de choisir où commence la couleur dans l'objet ou bien son étendue tout comme pour la transparence.

Dégradé avec deux couleurs.

Pour le réaliser, je n'ai qu'à faire un 'drag&drop' en sélectionant les couleurs dans la barre du bas et de les mettre sur le carré et le cercle. Si je clique sur l'une des extrémité, les options de fond réaparaissent ce qui me permet de définir l'opacité de chacune des couleurs (chacune étant considérées comme un aplat).

Le texte.

Pour écrire un texte, cliquer sur l'icône 'Créer et éditer des objets textes'. Là, j'ai tout d'abords crée un nouveau calque puis j'ai cliqué. Les options s'affichent dans la barre du haut et les même aparaissent si je clique sur l'onglet 'Texte et police'. Une fois le texte tappé, je le sélectionne pour choisir sa police, son style, son alignement et sa taille. Une fois fait, si j'utilise l'outil de sélection, des poignées aparaissent autour de la boîte de texte que je peux manipuler pour l'ajuster ou bien le déformer mais les options de texte deviennent inaccessibles. Pour les retrouver, re-cliquer sur 'Créer et éditer des objets texte' et sélectionner le texte.

Losrque j'ai deux objets comme ici, seul l'objet sélectionné sera enregistré lors d'un export en PNG, ce qui permet de n'enregister que le texte par exemple. J'ai voulu définir un ensemble de sélection pour regouper les éléments mais à l'export cela n'a pas fonctionné...

Bon, je vais tout mettre sur le même calque pour le moment. En tappant le texte, dans l'onglet 'Fond et couleur' j'ai les options de couleurs. Et sur un seul calque l'export prend les deux objets sans avoir eu à les sélectionner. Lors de l'export, bien faire attention à sectionner l'objet le plus grand. Des soucis sont apparus, la bordure externe était rognée tout comme le texte ? Alors qu'à l'écran le texte avait une marge entre chacun des bords du rectangle... Le mieux semble être de sélectionner la racine du SVG.

Le résultat:

mon premier exercice

Le code légèrement nettoyé:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="188.63214mm"
   height="90.358337mm"
   viewBox="0 0 188.63214 90.358337"
>

<!-- obligatoire 
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-->


  <defs
     id="defs2">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient4491">
      <stop
         style="stop-color:#ffb453;stop-opacity:1;"
         offset="0"
         id="stop4487" />
      <stop
         style="stop-color:#483737;stop-opacity:1"
         offset="1"
         id="stop4489" />
    </linearGradient>
    <linearGradient
       xlink:href="#linearGradient4491"
       id="linearGradient4493"
       x1="101.85357"
       y1="100.83036"
       x2="101.49761"
       y2="11.627977"
       gradientUnits="userSpaceOnUse" />
  </defs>

  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-10.383333,-11.05)">
    <rect
       style="opacity:1;fill:url(#linearGradient4493);
       			fill-opacity:1;stroke:#00ccff;
       			stroke-width:0.40000001;
       			stroke-linecap:round;
       			stroke-linejoin:round;
       			stroke-miterlimit:4;
       			stroke-dasharray:none;
       			stroke-opacity:1"
       id="rect4485"
       width="188.23215"
       height="89.958336"
       x="10.583333"
       y="11.25" />
    <text
       xml:space="preserve"
       style="font-style:normal;
       		  font-weight:normal;
       		  font-size:43.91233444px;
       		  line-height:1.25;
       		  font-family:sans-serif;
       		  letter-spacing:0px;
       		  word-spacing:0px;
       		  fill:#89a4ff;
       		  fill-opacity:1;
       		  stroke:none;
       		  stroke-width:0.26458332"
       x="34.69772"
       y="45.225956"
       id="text4497"
       transform="scale(0.50198085,1.9921079)"><tspan
         sodipodi:role="line"
         id="tspan4495"
         x="34.69772"
         y="45.225956"
         style="font-style:normal;
         		 font-variant:normal;
         		 font-weight:normal;
         		 font-stretch:normal;
         		 font-size:43.91253662px;
         		 font-family:'Ashes To Ashes';
         		 -inkscape-font-specification:'Ashes To Ashes, Normal';
         		 font-variant-ligatures:normal;
         		 font-variant-caps:normal;
         		 font-variant-numeric:normal;
         		 font-feature-settings:normal;
         		 text-align:start;
         		 writing-mode:lr-tb;
         		 text-anchor:start;
         		 fill:#89a4ff;
         		 fill-opacity:1;
         		 stroke-width:0.26458332">
         Un texte en SVG.</tspan>
     </text>
  </g>
</svg>
									

Le SVG est externe puis mis dans la page de cette manière (pas bonne mais juste pour le coté rapide... autant le convertir en PNG !):

<img src="mon/chemin/test.svg" width="668px" height="320px" />
									

Par contre en l'état, la police sera une police par défaut et non celle choisie ici. Il faudra rajouter un lien pointant vers cette resource. Soit directement dans le code du SVG dans les balises <def> comme suit:

<style type="text/css">![CDATA[     
@font-face {
  font-family: "Ashes To Ashes";
    url("../Ashes_To_Ashes_Regular.ttf") format("truetype"); 
}     
]]</style>  
									

Soit dans la CSS de la page:

@font-face {
  font-family: "Ashes To Ashes";
    url("../Ashes_To_Ashes_Regular.ttf") format("truetype"); 
} 
							 		
tspan{
font-family: "Ashes To Ashes";
} 
									

Le texte en chemin.

Cette transformation permet par exemple de découper le texte dans un aplat de couleur pour faire aparaitre une image derrière mais aussi permet d'utiliser une police qui ne soit pas sur le système ou qu'il n'existe pas de ressources externes disponibles. Le texte est alors considéré comme une image et devient modifiable comme n'importe quel objet. Par contre, le texte en lui même n'est plus modifiable. Pour cela, selectioner le texte et cliquer dans le menu sur 'Chemin' puis sélectionner 'Objet en chemin'.



Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 02/01/2021