Éclairage SVG : ombrer un emblème sans boucher son centre

Pour donner un aspect gaufré à un logo SVG, adoucis SourceAlpha, fournis cet alpha à feDiffuseLighting ou feSpecularLighting, combine la lumière à la couleur source et termine par une composition in avec le SourceAlpha original. Cette dernière étape garde le traitement dans l’emblème et préserve son ouverture. Enregistre une copie du chemin sans filtre comme maître plat.

L’effet change l’apparence rendue. Il ne crée ni solide en relief, ni nouveau contour, ni fichier de fabrication. Cette démonstration utilise un emblème original en anneau losange, créé directement en SVG, pour comparer les étapes d’éclairage et leur alpha.

Utilise l’alpha comme surface d’éclairage

feDiffuseLighting utilise l’alpha d’entrée comme carte de relief et produit une carte de lumière opaque. Son apparence dépend de la lumière et de la surface d’entrée. La référence de l’éclairage diffus de MDN explique ce comportement. Dans cet exemple, les parties opaques de l’anneau fournissent la zone haute et son ouverture fournit la zone basse.

Nous floutons uniquement SourceAlpha, en gardant le chemin coloré original disponible sous SourceGraphic. L’alpha adouci donne au calcul d’éclairage une transition progressive sur les bords intérieur et extérieur. feGaussianBlur contrôle cet adoucissement via stdDeviation ; la base utilise 2.5 dans un filtre à espace utilisateur explicite.

La carte diffuse brute peint toute sa région de filtre, y compris les endroits où le chemin original était transparent. C’est utile pour examiner le calcul de lumière, mais ce n’est pas la bonne silhouette finale pour notre emblème creux. Garde l’alpha original disponible pour l’étape finale de confinement.

Copie la base complète de l’emblème ombré

Enregistre ceci sous emblem-lighting.svg et ouvre-le dans un navigateur. Il possède un chemin composé et ne dépend d’aucune image externe.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Le filtre nomme chaque résultat intermédiaire pour que tu puisses en examiner le rôle :

La multiplication arithmétique utilise k1="1" avec les autres coefficients à zéro. L’addition utilise k2="1" k3="1" avec les autres à zéro. feComposite définit ces opérations de pixels et l’opérateur in. Garde la seconde entrée de la composition finale à SourceAlpha, et non au bump flouté, lorsque tu veux la limite d’origine.

Le filtre utilise explicitement color-interpolation-filters="linearRGB", qui est la valeur par défaut des opérations de filtre SVG. C’est distinct de l’interpolation ordinaire de la peinture. La référence de color-interpolation-filters de MDN documente cette distinction. Toutes les variantes d’éclairage mesurées ici utilisent ce même réglage.

Compare l’ombre diffuse au reflet spéculaire

L’éclairage diffus assombrit et éclaircit la couleur d’origine selon la carte de lumière. L’étape spéculaire ajoute une composante de réflexion. feSpecularLighting documente sa sortie dépendante de la lumière et ses paramètres. La base utilise une constante modérée de .7 et un exposant de 18 ; règle-les après avoir établi un traitement diffus exploitable.

Pour examiner le diffus seul, garde les étapes de flou, de diffusion et de multiplication, puis remplace la première entrée de la composition finale, paint, par lit. Supprime les étapes spéculaire et d’addition.

Pour examiner le spéculaire seul sur la couleur plate, garde les étapes de flou et spéculaire. Remplace la première entrée de l’addition, lit, par SourceGraphic, supprime les étapes de diffusion et de multiplication, et garde la composition finale paint in SourceAlpha. Les deux comparaisons conservent le même chemin original et la même direction de lumière.

Notre lumière distante utilise azimuth="225" elevation="45". feDistantLight est un élément de source lumineuse pour l’une ou l’autre des primitives d’éclairage. Ces angles sont en degrés, pas en positions de pixels. Change la direction des deux étapes d’éclairage ensemble pour comparer un traitement combiné.

Ce qu’ont montré les contrôles originaux du navigateur

Nous avons ouvert six exemples SVG créés par nos soins dans Chrome à 80 × 80 et 160 × 160 pixels CSS. Le maître plat, le diffus, le spéculaire et le traitement combiné restaient visuellement distincts. Le surfaceScale diffus plus élevé renforçait le contraste des bords dans ce fichier de test. Le contrôle diffus brut montrait un rectangle gris dont l’ouverture était remplie, au lieu d’une silhouette transparente.

Des lectures de pixels distinctes utilisaient la taille du canevas source 200 × 200. L’échantillon de la bande était à (100, 38), celui du bord à (101, 22), celui de l’ouverture à (100, 100) et celui de l’extérieur à (10, 10).

Chaque fichier conservait la même valeur d, un chemin et aucun élément image. L’effet à l’écran ne produisait aucune géométrie source supplémentaire. Ce sont des observations de ce navigateur et de cette source, plutôt que des garanties sur un autre moteur de rendu ou le comportement d’importation d’un éditeur.

Éclairage et maître plat

Règle le champ de hauteur avant de modifier le contour

surfaceScale définit l’échelle de hauteur de surface utilisée par le calcul d’éclairage. Il ne dilate pas le chemin. Nos contrôles diffus 4 et 12 ne changeaient que cette valeur : la bande plate échantillonnée gardait la même couleur tandis que l’échantillon du bord devenait plus sombre à 12.

Utilise une séquence contrôlée :

1. Établis la silhouette et l’ouverture transparentes originales sans filtre.
2. Choisis l’adoucissement de l’alpha et la direction de lumière.
3. Compare un petit surfaceScale et un plus grand en gardant tout le reste fixe.
4. Ajoute le reflet spéculaire, puis confine la peinture avec l’alpha original en dernière opération.
5. Vérifie le dessin livré à sa taille d’affichage réelle et sur un fond contrasté.

La spécification actuelle Filter Effects définit l’alpha de sortie diffuse à un partout, et celui de la sortie spéculaire à partir de ses composantes de couleur. Ne présume pas que l’une ou l’autre de ces sorties conserve l’ouverture d’origine. Elle définit aussi le calcul de la normale à partir des échantillons alpha voisins. Cette base laisse kernelUnitLength non défini ; notre inspection à deux tailles n’établit pas des échantillons d’éclairage indépendants de la taille.

Si le tampon intermédiaire d’une étape d’éclairage apparaît comme résultat final, vérifie les entrées nommées et la dernière primitive. Pour cet anneau, c’est en renvoyant directement la carte de lumière diffuse que nous avons reproduit le rectangle gris opaque. L’étape finale in SourceAlpha est volontaire, même lorsqu’une multiplication précédente semble déjà préserver la transparence.

Si un flou ou un effet est coupé à un rectangle inattendu, examine la région du filtre avec le guide du rognage SVG. Garde cette région distincte du confinement final par l’alpha source : l’une limite la zone de travail de l’effet, l’autre rétablit notre silhouette voulue.

Livre le traitement d’écran avec un maître plat

Retire l’attribut de filtre du chemin pour examiner le maître plat. Il conserve le même contour extérieur, la même ouverture intérieure et le même fond corail uni. Garde cette copie à côté de la version web ombrée pour que les modifications futures partent de la géométrie originale.

Pour une finition physique, utilise un processus de préparation distinct, comme celui des illustrations vectorielles pour le gaufrage. Un préréglage d’éclairage d’écran fournit une apparence, pas une géométrie de matrice de gaufrage ni une profondeur de relief mesurée. Le guide des contours par morphologie SVG explique un autre traitement de bord à base de filtres sans le présenter comme des chemins reconstruits.

Si ton logo n’existe qu’en PNG ou JPG, vectorise-le avec PerfectVector, examine le contour extérieur et l’ouverture récupérés et conserve un maître plat propre avant d’ajouter l’éclairage dans ton processus SVG. Le service récupère une géométrie vectorielle ; cette chaîne diffuse/spéculaire est un traitement d’affichage créé séparément. Si tu possèdes déjà le maître vectoriel, applique et vérifie directement le filtre.

Questions fréquentes

Les filtres d’éclairage SVG peuvent-ils donner un aspect gaufré à un logo ? Ils peuvent simuler des ombres et des reflets à partir d’un champ de hauteur fondé sur l’alpha. Le traitement rendu ne crée ni relief physique, ni contours de chemin supplémentaires, ni fichier de matrice de production.

Pourquoi mon effet d’éclairage SVG remplit-il l’ouverture transparente ? Une carte de lumière diffuse brute est opaque sur toute sa région de filtre. Combine la lumière à la couleur source et termine par une composition in avec le SourceAlpha original pour confiner le traitement à la silhouette originale.

Quelle différence entre éclairage diffus et spéculaire en SVG ? L’éclairage diffus fournit un éclairage général pour ombrer la couleur d’origine. L’éclairage spéculaire fournit une composante de réflexion à ajouter comme reflet. Les deux utilisent l’alpha d’entrée comme carte de relief et dépendent de la lumière choisie et des réglages de surface.

surfaceScale change-t-il le chemin de mon logo ? Non. Il change l’échelle de hauteur utilisée dans le calcul d’éclairage. Dans nos deux contrôles diffus, les données de chemin restaient identiques tandis que le contraste des bords rendus changeait.

Sources

1. MDN feDiffuseLighting — Entrée alpha comme carte de relief et sortie de lumière diffuse opaque.
2. MDN feGaussianBlur — Entrée adoucie et considérations de région du filtre.
3. MDN feComposite — Multiplication/addition arithmétique et confinement par l’alpha source.
4. MDN color-interpolation-filters — linearRGB comme valeur par défaut des opérations de filtre.
5. MDN feSpecularLighting — Composante de réflexion et ses réglages.
6. MDN feDistantLight — Source de lumière pour les deux primitives d’éclairage.
7. MDN surfaceScale — Échelle de hauteur de surface pour le calcul.
8. Spécification d’éclairage Filter Effects — Alpha d’éclairage, unités d’angle et calculs des échantillons voisins.