Ombre SVG tronquée ? Vérifie filtre et zone d’affichage

Une ombre SVG tronquée peut rencontrer deux limites différentes. La région du filtre limite l’endroit où l’effet est calculé ; la zone d’affichage SVG ou un conteneur parent peut ensuite recadrer le résultat rendu. Agrandis d’abord la région du filtre. Si l’ombre s’arrête encore au bord de l’image, inspecte la zone d’affichage et ses règles de découpage.

Tu n’as pas besoin de retracer un SVG dont les tracés sont déjà intacts. Ce guide modifie la zone de travail de l’effet et le canevas visible tout en préservant la même silhouette originale.

Deux limites, un tracé inchangé

Nous avons créé une petite silhouette à la main et ouvert trois versions dans un navigateur. Chacune utilise le même tracé et les mêmes réglages feDropShadow : dx="22", dy="18" et stdDeviation="12". La capture ci-dessous montre un véritable rendu dans le navigateur, et non une conversion PerfectVector.

Dans la première version, la région du filtre va de (50, 50) à (210, 180). Cela produit une coupure nette sur les bords droit et inférieur de l’ombre. Dans la seconde, la région s’étend de (-20, -20) à (300, 280), mais le SVG ne montre toujours que 0 0 240 220. Le bord droit de l’ombre atteint maintenant le cadre de la zone d’affichage et y est recadré.

La troisième version garde la région de filtre agrandie et remplace le viewBox par -20 -20 320 300. Ses width et height deviennent aussi 320 et 300 : les trois démonstrations conservent donc une unité SVG par pixel CSS. L’espace supplémentaire contient l’ombre visible sans redimensionner le tracé.

Agrandis la région du filtre dans le bon système de coordonnées

Les attributs x, y, width et height de <filter> définissent sa région. Leurs valeurs par défaut sont -10%, -10%, 120% et 120% : des marges existent déjà, mais peuvent être insuffisantes pour un décalage et un flou donnés. MDN documente ces valeurs par défaut.

Vérifie filterUnits avant de changer les nombres :

• objectBoundingBox, la valeur par défaut, interprète la région par rapport à la boîte englobante de l’élément filtré. Une marge en pourcentage dépend des dimensions de la forme.
• userSpaceOnUse permet de définir la région dans le système de coordonnées utilisateur courant de l’élément référençant le filtre. C’est utile lorsque tu connais les coordonnées du dessin.

Ces règles s’appliquent à la région, comme l’indique la référence filterUnits. Elles ne changent pas automatiquement les unités du décalage ou du flou de l’ombre.

primitiveUnits contrôle les valeurs de longueur dans les primitives de filtre. Sa valeur par défaut est userSpaceOnUse ; nous la définissons explicitement dans l’exemple pour que 22, 18 et 12 conservent ce sens. La remplacer par objectBoundingBox changerait l’interprétation de ces valeurs. MDN sépare les unités de primitives de celles de la région du filtre.

Pour ton fichier, inspecte les limites de l’objet ou du groupe filtré, puis ajoute assez d’espace dans les directions où l’ombre s’étend. Les nombres ci-dessous conviennent à cette démonstration. Ce ne sont pas des marges universelles d’ombre. Si tu augmentes le flou, déplaces l’ombre ou transformes le groupe filtré, vérifie à nouveau le résultat.

Donne aussi de l’espace à la zone d’affichage SVG

Enregistre cet exemple complet sous shadow.svg et ouvre-le dans un navigateur. C’est le SVG exact utilisé pour le troisième état, également vérifié comme fichier autonome :

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

Le viewBox comporte quatre valeurs : x minimum, y minimum, largeur et hauteur. Il fait correspondre ce rectangle de coordonnées utilisateur à la zone d’affichage SVG. Augmenter ses dimensions en conservant les mêmes valeurs de largeur et de hauteur affichées rend le dessin visuellement plus petit ; cela n’ajoute pas d’espace de mise en page hors de l’élément. MDN explique la correspondance du viewBox.

Pour reproduire les deux échecs, change uniquement ces valeurs dans une copie de l’exemple :

1. Pour l’état central, conserve le filtre mais définis à la racine width="240", height="220" et viewBox="0 0 240 220".
2. Pour le premier état, conserve cette zone d’affichage plus petite et définis aussi le filtre avec x="50", y="50", width="160" et height="130".
3. Rétablis l’exemple complet et compare les bords droit et inférieur. Les données du tracé ne changent jamais.

Si tout ton dessin est hors du canevas, suis les contrôles généraux des SVG vides. Si le dessin est visible mais que ses dimensions changent à l’importation, inspecte la relation entre unités et taille SVG avant d’ajuster la géométrie.

Pourquoi overflow peut aider le SVG en ligne sans résoudre le problème du fichier

L’exemple définit explicitement overflow="hidden" afin de rendre reproductible la limite de zone d’affichage. Pour un SVG en ligne, overflow="visible" peut supprimer ce découpage. Il ne peut pas restituer les pixels déjà éliminés à la région du filtre, et un ancêtre ayant son propre découpage peut encore masquer le résultat. Le CSS peut aussi remplacer l’attribut de présentation SVG. La référence SVG overflow décrit ces règles de découpage.

Inspecte la méthode réelle d’intégration. Un SVG en ligne sur une page spacieuse, un SVG autonome et un SVG chargé dans un élément image HTML n’offrent pas la même mise en page environnante. Notre capture à trois états utilise des éléments image et donne au fichier fixe assez d’espace interne de canevas. Utilise cette approche lorsque le SVG doit circuler comme image autonome : inclus l’effet dans ses limites prévues, puis rouvre ce fichier exact dans sa destination.

S’il semble correct seul mais se tronque dans une carte d’interface, vérifie le débordement, le découpage et le masque de cette carte. S’il échoue uniquement dans un éditeur ou exporteur donné, compare une copie simplifiée et consulte la prise en charge des filtres par cette application. Le guide des changements d’apparence SVG couvre ce problème distinct d’importateur.

Préserve la géométrie et reconstruis l’effet séparément

Une ombre portée rendue ajoute une apparence au tracé ; elle ne transforme pas le flou en un autre contour modifiable. Conserve un original SVG avec la géométrie initiale. Pour la découpe, inspecte les contours des tracés séparément : l’ombre visible n’est pas une ligne de découpe supplémentaire.

Si ta source existe uniquement en PNG ou JPG, PerfectVector peut aider à reconstruire la géométrie SVG avant l’ajout de l’effet. Convertis le dessin sans ombre en vecteurs, puis inspecte dans un éditeur le contour, les espaces et les formes de fond indésirables. Ajoute l’ombre dans cet éditeur et teste ses limites avec les contrôles ci-dessus.

Utilise une source sans flou incorporé lorsqu’elle est disponible. Tracer une image aplatie ne peut ni restaurer les réglages originaux du filtre ni prouver où le concepteur voulait arrêter la silhouette nette. Pour un symbole simple sans source propre, un redessin manuel peut être plus contrôlable. La présentation de la vectorisation d’images explique ce que le traçage reconstruit.

Vérifie le fichier livré

Ouvre le SVG exporté lui-même, pas seulement le canevas de l’éditeur. Confirme que l’ombre prévue tient à la taille finale d’affichage et que la sortie contient encore les tracés nécessaires. Vérifie aussi la page web ou l’application cible réelle, car un découpage environnant ou un filtre non pris en charge peut réintroduire le symptôme.

Évite de laisser une immense région de filtre comme correction par défaut. Une région très supérieure aux besoins de l’effet rend le fichier plus difficile à comprendre ; elle ne peut pas non plus corriger une limite de découpage extérieure. Utilise une marge délibérée, garde la source sans filtre et vérifie à nouveau après tout changement de flou ou de décalage.

FAQ

Pourquoi l’ombre reste-t-elle tronquée après l’augmentation de la largeur du filtre ? La zone d’affichage SVG, un conteneur parent, un chemin de découpage ou un masque peut imposer une autre limite. Vérifie x et y du filtre ainsi que sa largeur et sa hauteur, puis inspecte l’alignement de la coupure restante.

filterUnits change-t-il le rayon du flou ? filterUnits contrôle le système de coordonnées de la région du filtre. primitiveUnits contrôle les valeurs de longueur dans les primitives de filtre, notamment les réglages de décalage et de flou de l’ombre. Garde-les séparés lors du diagnostic du fichier.

Puis-je corriger le découpage en vectorisant à nouveau le SVG ? Si le SVG possède déjà des tracés utilisables, répare plutôt la région du filtre ou la zone d’affichage. La vectorisation intervient en amont lorsque la source est matricielle ; elle ne récupère pas les paramètres originaux de l’ombre.

Sources

1. MDN : élément filter — Définit l’élément filtre et les marges par défaut de sa région.
2. MDN : filterUnits — Explique les coordonnées de boîte englobante et d’espace utilisateur de la région du filtre.
3. MDN : primitiveUnits — Distingue les longueurs des primitives de la région extérieure du filtre.
4. MDN : viewBox — Décrit la correspondance des coordonnées utilisateur avec la zone d’affichage SVG visible.
5. MDN : overflow — Documente le découpage de zone d’affichage, les valeurs par défaut du SVG en ligne et la priorité CSS.

Tu pars d’une silhouette uniquement matricielle ? Prépare des tracés SVG avec PerfectVector, inspecte d’abord le contour reconstruit, puis ajoute ton ombre et rouvre le SVG final pour vérifier les deux limites.