Seuil alpha SVG : rendre la transparence binaire

Pour un seuil alpha de 0.5, utilise feComponentTransfer avec <feFuncA type="discrete" tableValues="0 1"/>. Un alpha d’entrée inférieur à 0.5 devient transparent ; un alpha supérieur ou égal devient opaque. Omets les fonctions RGB si tu veux conserver leurs correspondances de transfert à l’identique.

Ce filtre modifie l’alpha rendu, sans changer la structure du dessin. Il ne peut pas supprimer un fond blanc opaque, car les pixels blancs d’alpha 1 franchissent le même seuil que les pixels colorés opaques. Un PNG intégré au SVG reste également une image matricielle.

Compare des pixels sources connus avant de choisir un seuil

Nous avons créé un petit PNG RGBA 8 bits comportant une variation progressive de l’alpha, un trou carré transparent, une zone blanche opaque et six échantillons contrôlés. Chaque SVG de ce test intègre les mêmes octets PNG dans un élément image. Les variantes sans filtre, à transfert discret et à table interpolée ne diffèrent que par la configuration du filtre.

Le damier ci-dessous appartient à la page environnante, en dehors du SVG. Il révèle la transparence sans faire croire qu’il appartient au canal alpha de l’image.

Notre page a chargé les véritables variantes SVG, les a dessinées sur un canevas du navigateur et a échantillonné l’intérieur des six aplats. Voici les octets alpha obtenus :

Les valeurs alpha normalisées correspondent à ces octets divisés par 255. Ainsi, 127/255 est légèrement inférieur à 0.5, tandis que 128/255 est légèrement supérieur. Ces échantillons encadrent le seuil mathématique ; un octet PNG 8 bits ne représente pas exactement 0.5.

Le trou de la source avait un alpha de 0 dans chaque version. La zone blanche avait un alpha de 255 dans chaque version. Ce sont des observations sur cet exemple contrôlé, et non une affirmation selon laquelle n’importe quel dessin conserverait tous les détails souhaités après seuillage.

Applique le transfert à l’alpha

Le filtre essentiel tient en quelques lignes :

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Applique-le à l’image avec filter="url(#alpha)". Dans cet exemple, la région du filtre couvre toute la source et la fenêtre de 320 sur 240. Utilise des limites adaptées à ton dessin au lieu de copier ces dimensions dans un fichier sans rapport.

La référence MDN de feFuncA le décrit comme la fonction de transfert alpha au sein de feComponentTransfer. La référence du transfert des composantes décrit la réaffectation par canal et les calculs sur des valeurs de couleur non prémultipliées.

La spécification actuelle des effets de filtre attribue une transformation identité aux fonctions de canal non précisées. Notre balisage omet feFuncR, feFuncG et feFuncB ; il ne change que la fonction de transfert alpha. Cela ne signifie pas que les couleurs visibles sur un fond semblent identiques : changer l’alpha modifie leur apparence après composition.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

L’exemple complet conserve les octets PNG. Le filtre ne recolore pas le fichier source enregistré et ne le remplace pas par des tracés. Le diagnostic des images matricielles intégrées explique pourquoi l’extension .svg ne garantit pas une géométrie vectorielle.

Distingue un palier d’une table interpolée

Les deux types de transfert utilisent tableValues, mais interprètent les entrées différemment. La référence de type énumère les fonctions de transfert disponibles ; la référence de tableValues décrit la liste de correspondance.

Avec discrete, chaque entrée occupe un intervalle d’entrée de même largeur. Avec les deux entrées 0 1, le premier intervalle est 0 ≤ A < 0.5 et le second 0.5 ≤ A ≤ 1. La sortie passe brusquement d’une valeur à l’autre.

Avec table, les entrées sont les extrémités de régions d’interpolation linéaire. Avec 0 1, l’interpolation renvoie chaque alpha d’entrée vers lui-même. C’est un transfert identité, ce qui explique pourquoi notre colonne table échantillonnée correspond à la colonne sans filtre.

Les formules d’intervalle de la spécification expliquent aussi les variantes documentées suivantes :

Notre capture teste les cas discrete et table à deux entrées. Les lignes à quatre entrées décrivent les correspondances de la spécification ; ce ne sont pas des variantes supplémentaires du dessin que nous avons mesurées. Choisis type délibérément, sans supposer qu’une liste composée uniquement de zéros et de uns produit nécessairement un seuil binaire.

Sépare l’alpha d’entrée de l’opacité appliquée ensuite

Fournis au filtre le véritable alpha de la source. Dans notre exemple, cet alpha est enregistré dans les pixels du PNG. Pour un test vectoriel, utilise l’alpha d’un remplissage ou fill-opacity avant d’appliquer le filtre.

Le modèle de composition des effets de filtre applique les filtres avant l’opacité. Une opacité globale sur l’élément ou un groupe englobant peut donc réduire le résultat rendu après le filtre. Si tu appliques un seuil à la source, puis composes le résultat avec une opacité plus faible, il peut redevenir visuellement translucide. Écarte cette opacité ultérieure d’un test contrôlé du seuil.

Un seuil strict supprime aussi la transition semi-transparente de la source. Les pixels peu visibles disparaissent et les pixels translucides conservés deviennent totalement opaques. Cela peut supprimer une lueur douce ou un bord fin que tu voulais garder. Inspecte le résultat à sa taille finale et sur plusieurs fonds. Un alpha de sortie binaire ne garantit pas que le bord finalement affiché soit exempt d’effets d’échantillonnage ou de composition.

Si la translucidité fait partie du dessin, conserve-la ou utilise un transfert progressif au lieu d’imposer un seuil. Pour un masque de visibilité volontairement monochrome, le guide des masques CSS SVG décrit une autre méthode de présentation.

Le blanc opaque demande un autre diagnostic

La zone blanche subsiste parce que son alpha est entièrement opaque. Cette opération sélectionne selon l’alpha, et non selon l’apparence blanche d’un pixel. Les pixels de fond totalement opaques ne deviennent pas transparents avec cette correspondance discrète 0 1.

Si le fichier contient un fond blanc indésirable, détermine d’abord s’il s’agit d’une forme SVG distincte ou d’une partie d’image matricielle. Supprime ou modifie directement une forme vectorielle de fond indésirable. Pour un PNG dont le blanc est incorporé aux pixels, nettoie la source matricielle avant la reconstruction ou utilise une méthode adaptée de suppression du fond. Le guide des SVG à fond transparent explique ces cas.

Pense aux parties réellement blanches du sujet avant de supprimer un fond par sa couleur. Ce filtre alpha ne peut pas déterminer quelle région blanche appartient au fond ou au dessin, ni restituer des informations de couleur perdues lors de l’aplatissement de la source.

Prépare une image matricielle transparente avant la reconstruction vectorielle

PerfectVector peut t’aider lorsque le dessin final existe uniquement sous forme matricielle et que tu as besoin d’une géométrie SVG. Prépare d’abord un PNG réellement transparent, puis convertis le PNG en SVG. Compare l’aperçu sur un fond contrasté, inspecte la silhouette et les ouvertures, puis vérifie que le fichier téléchargé ne contient pas de géométrie de fond indésirable.

Notre exemple de filtre est une expérience d’affichage. Il ne soumet pas un SVG filtré à une vectorisation et ne présente pas un nouveau résultat de traçage. Si tu dois conserver l’apparence matricielle obtenue par seuillage, prépare et vérifie une véritable copie matricielle destinée à la livraison dans ton éditeur avant d’envisager la reconstruction vectorielle. Inspecte l’alpha de cette copie au lieu de te fier à l’aperçu du navigateur.

Utilise directement un original vectoriel disponible. Conserve la semi-transparence lorsqu’elle apporte une information utile au dessin, et redessine un symbole simple si c’est plus facile à maintenir. La présentation de la vectorisation d’images distingue la reconstruction matricielle de la modification de présentation d’un SVG existant.

FAQ

Quel seuil alpha utilise discrete avec tableValues 0 1 ? Un alpha d’entrée inférieur à 0.5 devient 0 ; un alpha supérieur ou égal à 0.5 devient 1. Dans les échantillons PNG 8 bits testés, l’octet 127 devient transparent et l’octet 128 opaque.

Pourquoi tableValues 0 1 laisse-t-il ma transparence inchangée ? Avec le type table, ces entrées définissent une interpolation linéaire de 0 à 1, soit l’identité. Utilise le type discrete pour la correspondance à deux paliers présentée ici.

Cela supprime-t-il le blanc ou transforme-t-il un PNG en tracés vectoriels ? Non. Le blanc entièrement opaque franchit ce seuil alpha. Nos variantes SVG contiennent toujours le même PNG dans un élément image unique et aucun tracé ; nettoyer le fond et reconstruire les vecteurs sont deux tâches distinctes.

Sources

1. W3C — Filter Effects Level 1 — Définit les valeurs identité par défaut, le transfert de canaux non prémultipliés et les formules d’intervalle table/discrete.
2. MDN — feComponentTransfer — Explique la réaffectation des canaux effectuée par la primitive de filtre.
3. MDN — feFuncA — Identifie la fonction de transfert du canal alpha.
4. MDN — type — Énumère les types de fonctions de transfert des composantes et le contexte de leurs attributs.
5. MDN — tableValues — Décrit les entrées de correspondance utilisées par les transferts table et discrete.

Besoin de géométrie vectorielle à partir d’un dessin matriciel ? Prépare et convertis un PNG transparent, puis inspecte la silhouette et les trous dans l’aperçu et vérifie le SVG téléchargé sur un fond coloré.