Tutoriel Inkscape & Boxy - sommaire

Le logiciel Boxy SVG : les chemins & les defs (dégradés, motifs, symboles, découpes, masques)

Convertir une forme en chemin

Nous avons vu dans le chapitre précédent qu'on peut transformer un rectangle en losange (rotation) ou en paraléllogramme (cisaillement).
Mais vous voulez transformer le rectangle en trapèze ou un quadrilatère irrégulier, il faut au préalable le convertir en chemin.

Dans le document ci-dessous j'ai dessiné un rectangle puis je l'ai dupliqué cinq fois.
Pour dupliquer la forme sélectionnée, faites un clic droit et choisissez "Dupliquer" dans le menu contextuel.
La copie est au dessus de l'original et est sélectionnée ; il suffit donc de la déplacer.

Ensuite j'ai successivement sélectionné chaque copie et appliqué la commande (par menu) : Forme / convertir forme en chemin"
En produisant la commande "éditer" (deuxième icone de la BG) au chemin sélectionné, on fait apparaitre les noeuds de ce chemin (des ronds blancs).
En déplaçant les noeuds du chemin, le rectangle devient trapèze ou un quadrilatère irrégulier.
Un segment entre deux noeuds peut devenir un arc en tirant sur ce segment.

Pour le sixième et dernier chemin j'ai rajouté des noeuds en produisant la commande "complexifier le chemin" de la BH.

Convertir ellipses en chemins

Dans ce document j'ai créé un cercle et une ellipse.
J'ai dupliqué le cercle deux fois ; j'ai converti ces copies en chemins puis je les ai édités pour déplacer les noeuds.
J'ai dupliqué l'ellipse deux fois ; j'ai converti ces deux copies en chemins puis je les ai édités successivement.

Opérations booléennes

Grouper ou unir ?

Via l'exemple ci-dessous je vais vous montrer l'intérêt des opérations booléennes (le plus souvent l'union) par rapport à un simple regroupement de formes.

La commande "Objets" de la BD affiche 3 groupes et 3 chemins ...
Le deuxième objet de la première rangée est masqué !

Grouper

Concernant les objets de la première rangée :
• j'ai dessiné un rectangle et un cercle puis j'ai chevauché partiellement les deux formes.
• puis j'ai sélectionné les deux formes (sélection multiple en appuyant sur la touche "shift") ; puis un clic droit et sélection dans le menu contextuel de la commande "grouper"
• ensuite j'ai supprimé les traits et j'ai ensuite produit un dégradé radial au groupe et j'ai appliqué une ombre portée via la commande "composition" de la BD.
• j'ai dupliqué le groupe deux fois ; j'ai sélectionné les trois groupes et j'ai demandé "distribuer horizontalement" (commande dans BH) ; ainsi les espacements entre les objets sont identiques
• via la commande "objets" de la BD j'ai demandé que le deuxième groupe soit masqué et verrouillé.

Notez que le rendu n'est pas très satisfaisant ; il y en fait deux dégradés radiaux : un pour le cercle et un autre pour le rectangle.

En groupant plusieurs formes simples, je place les instructions qui dessinent ces formes à l'intérieur du conteneur G.
La balise G début peut avoir plusieurs attributs : id, style, opacity, visibility, display, pointer-events

Extrait du code du code du deuxième groupe (première rangée) : <g ... pointer-events: none; visibility: hidden;"> <rect ... style="fill: url(#gradient-3);"></rect> <ellipse style="fill: url(#gradient-4);" ... ></ellipse> </g>

Les attributs de la balise G début indiquent bien que l'objet n'est pas sélectionnable donc verrouillé (pointer-events : none) et masqué (visibility : hidden).

Unir

Pour les objets de la deuxième rangée j'ai procédé autrement :
• j'ai dessiné un rond et un rectangle qui se chevauchent partiellement
• j'ai sélectionné les deux formes puis j'ai produit la commande "Forme/unir" ; je transforme alors les deux formes en un chemin unique (élément path )
• j'ai supprimé les traits et appliqué un dégradé radial au chemin et une ombre portée
• j'ai dupliqué l'objet deux fois et demandé une distribution horizontale des trois objets.

le rendu est plus satisfaisant : cette fois un seul dégradé radial !
Donc dans certains cas il faut priviligier l'opération "unir" à l'opération "grouper".

Les autres opérations booléennes

L'opération "unir" est la plus fréquente mais il y en a d'autres !

J'ai dessiné un rectangle et un cercle qui se chevauchent partiellement et j'ai dupliqué 5 fois ces formes.
À chaque copie j'ai appliqué une opération booléenne.
Il suffit de sélectionner les deux formes puis de produire la commande "Forme/unir OU Forme/soustraire etc."

On utilise surtout les opérations "union" et "soustraire".

Importation d'images matricielles

Il est bien sûr possible d'importer une image matricielle dans un document Boxy voire une image vectorielle ...

Le document "image_incorporee.svg"

La procédure

J'ai importé une image matricielle : commande "Fichier/importer ..."
Je me suis promené alors dans l'arborescence du disque dur pour rechercher une image.
À la différence d'Inkscape, l'interface Boxy ne propose pas un choix entre incorporation ou liaison de l'image. C'est forcément une incorporation !

J'ai ensuite dupliqué cinq fois l'image importée.

Puis j'ai appliqué un filtre à chacune des copies :
• sépia
• nuance de gris
• inversion (négatif)
• noir et blanc
• duotone

Dans un document SVG les filtres sont définis dans la partie DEFS du document comme les dégradés, les symboles et les motifs.

Problème !

Le fichier Boxy pèse plus de 800 KO !
En effet l'image matricielle est "rastérisée" six fois dans le document d'où le poids élevé.

Importation d'images matricielles : astuce

Je vous propose une astuce pour que le document Boxy ait un poids raisonnable.
Il suffit de créer une liaison entre le document SVG et l'image matricielle. Mais Boxy et à la différence de Inkscape, ne propose que l'incorporation je suis obligé de procéder manuellement à la liaison.

Encodage manuel

Il faut utiliser un éditeur de textes tel NotePad pour créer un document SVG ("image_brut.svg")
Il suffit ensuite de taper : <svg xmlns="http://www.w3.org/2000/svg" viewBox ="0 0 620 550" xmlns:xlink="http://www.w3.org/1999/xlink" width ="100%" > <image href ="jolie_fille.jpg" width="200" height="250" x="0" y ="0"/> <image href ="jolie_fille.jpg" width="200" height="250" x="210" y ="0" /> <image href ="jolie_fille.jpg" width="200" height="250" x="420" y ="0"/> <image href ="jolie_fille.jpg" width="200" height="250" x="0" y ="300" /> <image href = "jolie_fille.jpg" width="200" height="250" x="210" y ="300"/> <image href = "jolie_fille.jpg" width="200" height="250" x="420" y ="300"/> </svg>

En cas de liaison entre un document SVG et des images, l'attribut xmlns:xlink="http://www.w3.org/1999/xlink" est obligatoire dans l'élément SVG début.
Sinon le navigateur affiche un message d'erreur : "Namespace prefix xlink for href on image is not defined".

Dans le code j'ai créé six liens entre l'image matricielle et le document SVG.
Il faut bien sûr que l'image matricielle "jolie_fille.jpg" soit rangée dans le même dossier que ce fichier boxy. Cette image pèse 80 KO.

Utilisation de Boxy SVG

Il suffit maintenant d'ouvrir le document "image_brut.svg" avec Boxy SVG puis de sélectionner successivement les cinq images et d'appliquer un filtre et ensuite d'enregistrer sous "image_liee.svg".

Le document Boxy "image_liee.svg" ne pèse que 5 KO ... (au lieu de 825 KO pour "images_incorporees").
Le code de ce document (extraits) : ... <defs> <filter id="sepia-filter-0" bx:preset="sepia 1 1" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feColorMatrix type="matrix" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0"/> </filter> <filter id="grayscale-filter-0" bx:preset="grayscale 1 1" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feColorMatrix type="matrix" values="0.213 0.715 0.072 0 0 0.213 0.715 0.072 0 0 0.213 0.715 0.072 0 0 0 0 0 1 0"/> </filter> <filter id="invert-filter-0" bx:preset="invert 1 1" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer> <feFuncR type="table" tableValues="1 0"/> <feFuncG type="table" tableValues="1 0"/> <feFuncB type="table" tableValues="1 0"/> </feComponentTransfer> </filter> <filter id="black-and-white-filter-0" bx:preset="black-and-white 1 0" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feColorMatrix type="saturate" values="0"/> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 "/> <feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 "/> <feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 "/> </feComponentTransfer> </filter> <filter id="duotone-filter-0" bx:preset="duotone 1 #bd0b91 #fcbb0d 1" color-interpolation-filters="sRGB" x="-50%" y="-50%" width="200%" height="200%"> <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"/> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="gamma" exponent="1.5" amplitude="1" offset="0"/> <feFuncG type="gamma" exponent="1.5" amplitude="1" offset="0"/> <feFuncB type="gamma" exponent="1.5" amplitude="1" offset="0"/> </feComponentTransfer> <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.741 0.988"/> <feFuncG type="table" tableValues="0.043 0.733"/> <feFuncB type="table" tableValues="0.569 0.051"/> <feFuncA type="table" tableValues="0 1"/> </feComponentTransfer> </filter> </defs> <image width="200" height="250" x="0" y="0" href="jolie_fille.jpg"/> <image width="200" height="250" x="210" y="0" href="jolie_fille.jpg" style="filter: url('#sepia-filter-0');"/> <image width="200" height="250" x="420" y="0" href="jolie_fille.jpg" style="filter: url('#grayscale-filter-0');"/> <image width="200" height="250" x="0" y="300" href="jolie_fille.jpg" style="filter: url('#invert-filter-0');"/> <image width="200" height="250" x="210" y="300" href="jolie_fille.jpg" style="filter: url('#black-and-white-filter-0');"/> <image width="200" height="250" x="420" y="300" href="jolie_fille.jpg" style="filter: url('#duotone-filter-0');"/> </svg>

Boxy s'est contenté de rajouter dans la partie DEFS la définition des différents filtres et d'ajouter pour chaque élément IMAGE l'attribut style = "filter : 'idDuFiltre';"

Le rendu de 'image_liee.svg'

Utilisez la balise OBJECT pour insérer le document SVG dans la page web. En effet l'insertion via la balise IMG ne fonctionne pas avec tous les navigateurs.

L'instruction HTML d'insertion est donc : <object type="image/svg+xml" data="image_liee.svg" style ="width : 80% ; display : block ; margin : auto"></object>

Conclusion

En cas d'importation d'une image matricielle dans un canevas Boxy vous avez le choix :
• laisser faire l'interface qui incorpore l'image et produit un document relativement lourd
• encoder manuellement des liaisons puis faire appel à Boxy pour compléter le code.

Les dégradés

Dans un document SVG, les dégradés, les motifs, les symboles, les filtres sont définis dans la partie DEFS du document.

Les dégradés radians

Exemple

Un dégradé radial à une origine qui est par défaut le centre de l'objet.
Un dégradé radial est par défaut monochrome mais avec une zone centrale plus transparente.
Ci-dessous un document BOXY avec quatre ronds. Chaque rond est rempli avec un dégradé radial.

De gauche à droite et de haut en bas :
• un dégradé radial monochrome non modifié
• un dégradé radial monochrome édité (zone claire étendue)
• un dégradé radial monochrome édité (origine du dégradé déplacé)
• un dégradé radial bicolore

Créer et éditer un dégradé radial

Pour remplir un objet avec un dégradé radial il faut d'abord appliquer à l'objet choisir une couleur unie dans la palette puis choisir (toujours dans la commande "Remplissage")"Dégradé radial".
Vous obtenez un dégradé radial monochrome avec pour origine le centre de l'objet.

Pour modifier le dégradé radial, il suffit de produire la commande "éditer" de la BG puis de sélectioner l'objet.
Un trait blanc (avec à chaque extrémité des ronds bleus) apparait.
En déplacant le rond bleu droit vous faites varier la zone claire.
En déplaçant le rond bleu gauche vous déplacez l'origine du dégradé radial.
En cliquant sur chaque rond bleu vous pouvez choisir une autre couleur via la palette. Vous pouvez donc obtenir un dégradé bicolore.

Ci-dessous capture d'écran

Le troisième cercle est en mode édition.
Vous constatez que l'origine du dégradé n'est plus le centre du cercle.

Les dégradés linéaires

Exemple

Un dégradé linéaire a un axe de dégradé qui est par défaut de haut en bas.
Ci-dessous un document BOXY avec quatre carrés. Chaque carré est rempli avec un dégradé linéaire.

De gauche à droite et de haut en bas :
• un dégradé linéaire monochrome non modifié
• un dégradé linéaire monochrome édité (zone claire réduite)
• un dégradé linéaire bicolore édité (axe du dégradé est une diagonal NE - SO)
• un dégradé linéaire bicolore édité (axe du dégradé est une diagonale NO - SE)

Créer et éditer une dégradé linéaire

Pour créer un dégradé :
• sélectionner un carré
• produisez la commande "remplissage"
• choisissez une couleur dans la palette
• cliquez sur "dégradé linéaire"

Vous obtenez alors un dégradé linéaire monochrome.

Pour modifier le dégradé linéaire, il suffit de produire la commande "éditer" de la BG puis de sélectioner l'objet.
Un trait blanc (avec à chaque extrémité des ronds verts) apparait.
Faites tourner le rond extérieur pour modifier l'axe du dégradé
En cliquant sur chaque rond vert vous pouvez choisir une autre couleur via la palette. Vous pouvez donc obtenir un dégradé bicolore.

La syntaxe des dégradés

Je vous invite à consulter la syntaxe relative aux dégradés SVG dans mon tuto sur ce langage.
Les dégradés SVG
Vous verrez que c'est pas si compliqué et que parfois ça peut valoir le coup d'encoder manuellement ...

Les motifs ou "patterns"

Ci-dessous un document SVG contenant un grand carré. Ce carré au lieu d'être rempli par une couleur unie ou dégradée est rempli N fois par le même motif ("pattern" en anglais).

Ce motif est une croix (deux segments qui se croisent à l'intérieur d'une zone de 100 par 100).
Il faut tout d'abord dessiner cette forme dans le document puis le définir en tant que motifs.

Procédure pour créer un motif associé à un document

Dans un carré de 100 par 100 je dessine un segment diagonal NO vers SE puis un second SO vers NE.
J'applique aux deux segments une largeur de trait de 8 et je colorie les traits en noir.
Je sélectionne les deux segments et je les groupe.
Je sélectionne "Defs" (BD) et je clique sur "Motifs".
Tout en bas de la boite de dialogue "Motifs" il y a un bouton + légendé "ajouter un motif". Je clique alors sur le + et je sélectionne dans le menu contextuel "ajouter un motif depuis les objets sélectionnés". La croix disparait alors du canevas mais apparait désormais dans la liste des motifs du document.
Je dessine alors un carré de 300 par 300 puis j'effectue un "drag & drop" de la boite "motifs" vers la forme.

Il est logique que la croix disparaisse du canevas lorsqu'elle est convertie en motif puisqu'elle fait alors partie des DEFS.

Le code du document Boxy SVG

Notez l'élément PATTERN dans la partie DEFS. Le motif est identifié "pattern-1".
Attribut STYLE de l'élément RECT : "fill: url('#pattern-1');"

Modifier un "pattern"

Je suis allé trop vite ; le motif est moche : un triangle blanc disgracieux !

À partir de la boite de dialogue "motifs" faites un clic droit et sélectionnez l'item "éditer".
Vous basculez dans l'éditeur de modèle pour le modifier.

La procédure :
• dégroupez l'objet
• pour chaque segment modifiez les extrémités et la couleur de trait
• regroupez les formes
• cliquez sur l'onglet "SVG" (juste au dessus de la zone de dessin) pour fermer l'éditeur de modèle
• observez le canevas : le rectangle est désormais rempli par la nouvelle version du motif.
• sauvegardez le document !

Ci-dessous nouvelle version du document SVG :

Les symboles

Un symbole est un modèle d'objet qui peut être dupliqué.
Mais à la différence d'une duplication classique, toute modification du symbole est répercutée aux copies.
On parle de "clonage".

Je vous invite à lire le chapitre en lien dans le tuto "dessin vectoriel avec SVG" : Le clonage en SVG

Vous lisez ainsi que pour créer un modèle il faut utiliser l'élément SYMBOL (ou G dans DEFS).
C'est sans doute pour cette raison que Boxy SVG parle de "symbole" pour évoquer un modèle clonable et "d'instance de symbole" pour désigner les clones.

Création d'un symbole

Ci-dessous première version d'un document Boxy avec utilisation d'un "symbole".

J'ai dessiné une bonhomme "fil de fer" (deux ellipses et quatre segments).
Ensuite j'ai sélectionné les six formes et j'ai groupé (menu contextuel)
Puis j'ai produit la commande "defs" de la BG et j'ai cliqué sur "symboles" (un coeur).
Tout en bas de la boite de dialogue "symboles" il y a un bouton + légendé "ajouter un symbole".
J'ai alors cliqué sur le + et j'ai sélectionné dans le menu contextuel "ajouter un symbole depuis les objets sélectionnés.
Le bonhomme fil de fer disparait alors du canevas mais apparait dans les listes des symboles du document.

Pour créer des copies du symbole dans le canevas il vous suffit de faire des "drag & drop" de la boite "symboles" vers le canevas. Les clones sont tous identiques au modèle mais n'ont pas forcément la même taille.

Modifier le symbole

À partir de la boite de dialogue "symboles" faites un clic droit et sélectionnez l'item "éditer".
Vous basculez dans l'éditeur de symbole pour le modifier :

• dégroupez l'objet pour modifier les couleurs de remplissage et de traits
• supprimez le remplissage pour les deux ellipses
• élargissez la deuxième ellipse
• regroupez les formes
• cliquez sur l'onglet "SVG" (au dessus du canevas) pour fermer l'éditeur de modèle
• sauvegardez les modifications

Le modèle a été modifié et cette édition se répercute chez les "instance de symboles" (les clones).
Observez l'onglet "Objets" : 7 "instance de symbole".

Intérêt syntaxique du clonage

Non seulement c'est un moyen de produire rapidement des objets identiques mais le recours au clonage simplifie énormément le code SVG : l'objet (ou le groupe d'objets) est défini une fois puis chaque duplication se traduit par une seule instruction USE.
Le code de "boxy_symbol.svg" ci-dessous (extraits) : ... <defs> <symbol id="symbol-0" viewBox="0 0 57 122" bx:pinned="true"> <g transform="matrix(1, 0, 0, 1, -25.94300079345703, -36.55699920654297)"> <ellipse style="fill: rgb(29, 28, 28); stroke: rgb(23, 21, 21);" cx="53.066" cy="47.465" rx="7.075" ry="10.908"/> <ellipse style="fill: rgb(29, 28, 28); stroke: rgb(23, 21, 21);" cx="52.477" cy="93.16" rx="12.382" ry="34.198"/> <path style="fill: rgb(29, 28, 28); stroke: rgb(23, 21, 21); stroke-width: 3px;" d="M 63.09 72.524 L 81.958 65.448"/> <path style="fill: rgb(29, 28, 28); stroke: rgb(23, 21, 21); stroke-width: 3px;" d="M 41.863 71.934 L 25.943 56.604"/> <path style="fill: rgb(29, 28, 28); stroke: rgb(23, 21, 21); stroke-width: 5px;" d="M 45.991 120.283 L 40.684 158.608"/> <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 5px;" d="M 57.783 122.052 L 67.806 158.019"/> </g> </symbol> </defs> <use href="#symbol-0" width="56.01499938964844" height="122.0510025024414" ... <use href="#symbol-0" width="56.01499938964844" height="122.0510025024414" ... <use href="#symbol-0" width="56.01499938964844" height="122.0510025024414" ... <use href="#symbol-0" width="56.01499938964844" height="122.0510025024414" ... ... </svg>

Le modèle est défini dans l'élément SYMBOL qui est contenu dans le conteneur DEFS.
Pour chaque clone une instruction use href="#symbol-0" ...

Détourer les images

Vous voulez que les images incorporés apparaissent non pas dans des rectangles mais dans des ellipses ou ronds. Il faut effectuer une découpe ou détourage.

Un document Boxy avec deux images détourées

Procédure pour détourer une image

Il faut :
1. importer une image
2. redimensionnner l'image
3. dessiner une forme au dessus (une ellipse par exemple)
4. sélectionner les deux Objets
5. produire la commande Objet/Clip

Le code obtenu

<clipPath id="clip-0"> <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" cx="137.5" cy="87.4" rx="137.5" ry="87.4"/> </clipPath> <clipPath id="clip-1"> <ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" cx="453.939" cy="245.612" rx="110.891" ry="112.26"/> </clipPath> </defs> <image href="data:image/jpeg;base64 ... " style="clip-path: url('#clip-0') > <title>bikini13</title> </image> <image href="data:image/jpeg;base64 ..." style="clip-path: url('#clip-1');" > <title>bikini16</title> </image> ...

Notez dans la partie DEFS les balises CLIPPATH qui définissent les découpes.
Notez aussi l'attribut clip-path dans la balise IMAGE.

Les masques

L'outil "mask" est très proche de l'outil "clipPath" : rognage de l'image mais aussi transparence de l'image.
Ci-dessous une image bénéficiant d'un masque :

J'ai défini un masque avec une transparence de 50%.

La procédure pour produire un masque

C'est simple :
• importer une image et redimensionner
• dessiner une ellipse en dehors de l'image
• remplir l'ellipse avec du blanc à demi transparent (opacité de 50%) et supprimer le contour
• Déplacer l'ellispe au dessus de l'image
• Sélectionnez l'image et l'ellipse et produire la commande "Objet/Masque".

Le code obtenu

... <defs> <mask id="mask-0"> <ellipse style="stroke: rgb(0, 0, 0); fill-opacity: 0.5; fill: rgb(244, 234, 234);" cx="237.5" cy="191.499" rx="137.5" ry="91.5"/> </mask> </defs> <image href="data:image/jpeg;base64,/9j/4AAQSkZJRgA ..." style="mask: url('#mask-0');" > </image> ...

Notez :
• le conteneur MASK dans DEFS
• les attributs fill & opacity dans la balise ELLIPSE
• la valeur de l'attribut style : "mask: url('#mask-0');" dans la balise IMAGE

À vous de jouer !

Le document Boxy que vous devez produire

Vous devrier être capable de réaliser le superbe paysage ci-dessous :

Les différents objets de ce document :
• le ciel et le sol sont des dégradés
• le soleil est un cercle flouté
• le nuage est un blob
• devant tous ces objets un groupe de sapins (clones d'un modèle ou "instance de symbole"
• en premier plan : un gif animé

  Consignes

  Sous Boxy, incorporez le gif animé dans le document.
  Après avoir sauvegardé le document, ouvrez le sous NotePad et modifiez l'instruction IMAGE ! <image href="data:image/gif;base64,R0lGODlhlgBwAMwS ... height="100" x="100" y="250"> <title>fondeur2</title> </image>

  J'ai supprimé les attributs style & transform et modifié les attributs height, x et y ; j'ai supprimé l'attribut width.
  En effet pour toute image importée il suffit de l'attribut width ou height, l'autre paramètre est alors calculé en fonction du ratio largeur/hauteur dans l'image d'origine.

  Problème d'affichage avec certains navigateurs

  Si vous visualisez cette page web avec le navigateur Firefox vous constatez que l'image GIF n'est plus animée ...
  Il faut mieux insérer le fichier SVG dans la page web via l'élément OBJECT comme ci-dessous.

  Le code de l'instruction HTML est alors : <object type="image/svg+xml" data="boxy_paysage.svg" style ="width : 80% ; display : block ; margin : auto"></object>