Un PNG dans un SVG ? Le grain créé dans Adobe Illustrator, dimensions et le viewBox

Les objectifs de ce premier test :

• Prendre connaissance de l’exportation SVG d’Adobe Illustrator (AI)
• Analyser le code généré
• Essayer le filtre de grain et prendre connaissance de son code
• Comprendre le viewBox en lien avec le artboard dans Illustrator

WordPress est lent et gèle si je colle tout le code en tant que texte pour le montrer! Le code est très long. Je ne met que le début pour discussion et analyse.

<?xml version="1.1" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"  width="111"
 height="129"
<!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 111 129" style="enable-background:new 0 0 111 129;" xml:space="preserve">

<style type="text/css">
	.st0{fill:#F7931E;}
</style>

<g id="sun">
	<path class="st0" d="M83.42,20.14c18.99,14.22,28.43,47.56,21.09,74.48s-28.68,37.21-47.66,22.99S0.61,46.46,7.94,19.54
		S64.44,5.92,83.42,20.14z"/>
<g>
		
<image style="overflow:visible;" width="172" height="192" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS

Notes

XMLNS

• AI génère l’entête avec un xmlns.
• Explication sur stackoverflow et sur MDN.
• Cela est très important pour définir un contexte (namespace) et faire en sorte que les agents comprennent à quel SVG appartient un circle, par exemple.
• Il n’y a pas de <title> – à ajouter moi-même lorsque nécessaire.

Grain

• Je remarque que le grain est carrément un PNG incorporé dans une balise <image width='603' height='480' xlink:href="data:image/png;base64..... </img>, ce qui explique la longueur du texte et la lourdeur de WordPress.
• Il faut trouver une autre façon de faire le grain –> regarder du côté des filtres SVG

Dimension

• À l’intégration dans WP, le SVG était énorme et même en changeant manuelle les dimensions du viewBox et de l’image png, ce n’était pas respecté à l’affichage et le rendu était très pixelisé.
• J’ai dû donner des dimensions fixe width="111" et height="129" suite à l’ouverture <svg>, pour contrôler la dimension.
• Dans AI, j’avais fait un grand artboard et je pensais pouvoir juste sauvegarder le dessin sélectionné mais la dimension du artboard devient finalement celle du viewBox et alors ça créeait une grande zone de vide blanc et le dessin était perdu dedans.
• Il faut donc redimensionner le artboard aux pourtours du dessin avant de le sauvegarder en SVG.
• Pourquoi lors de l’affichage, le viewBox n’est pas respecté? À quoi sert-il?

viewBox

Extraits de MDN sur l’attribut viewBox

La valeur de l’attribut viewBox est une liste de quatre nombres min-x, min-y, width et height, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l’espace utilisateur, qui doit correspondre aux coins du viewport établis par l’élément SVG donné, ceci en prenant en compte l’attribut preserveAspectRatio.

Les valeurs négatives de width et height ne sont pas autorisées et une valeur à zéro désactive le rendu de l’élément. Pourtant, même si les valeur négatives ne sont pas autorisées, elles fonctionnent et permettent de repositionner le dessin dans son cadre. Étrange.

C’est donc comme un viewport pour le html, avec un système de coordonnés et ce n’est pas un width et un height puisque ça se veut scalable, donc c’est un min-width et un min-height ! Ainsi, pour des dimensions fixes, il faut soit carrément inclure width et height suite à l’ouverture <svg> ou sinon le contrôler par une feuille de style CSS externe.

Les éléments suivants peuvent utiliser l’attribut viewBox mais attention aux <images>, c’est matricielle!

• <svg>
• <symbol>
• <image>
• <marker>
• <pattern>
• <view> (en-US)

L’élément <pattern> wow! À essayer!

Adobe Illustrator et sauvegarde SVG

La boite de dialogue comprend plusieurs options. Toutefois je n’ai pas saisi pourquoi la sauvegarde d’un même SVG avec des options différentes concernant CSS Properties donne toujours le même code à l’exception d’une fois. Je me demande si ça fonctionne correctement. Il faudrait tester davantage peut-être mais ayant par la suite découvert SVG OMG, un optimiseur de code, cela dépendra des besoins.

Il sera intéressant de comparer avec Figma. De plus, étant donné que l’objectif est aussi de produire des animations, je compte débuter mon apprentissage de Figma plus rapidement que prévu et mettre AI de côté, pour le moment.