Générateur d'effets de filtre SVG

Générateur d'effets de filtre SVG

Concevoir un filtre SVG <filter> effets visuellement. Choisissez une primitive de filtre — flou de Gauss, variantes de matrice de couleur (rotation de tonalité, saturation, luminance vers alpha), turbulence avec déplacement, ombre, ou un preset de matrice de convolution (relief, gravure, aiguisage, détection des bords) — et ajustez ses paramètres avec des curseurs tout en observant une prévisualisation SVG en temps réel sur du texte, des formes ou sur une photo que vous avez téléversée. Copiez le bloc XML généré et le snippet d'utilisation CSS prêt à être collé. <filter> Bloc XML généré et un snippet d'utilisation CSS prêt à être collé.

Comment utiliser

1. Choisissez une primitive de filtre dans la liste déroulante. Filtre Sélectionnez une valeur unique
2. — elle devient l' ID du filtre sur l' id élément et la cible de <filter> Ajustez les paramètres qui apparaissent pour la primitive choisie (curseurs, sélection de couleur, type de bruit, etc.). url(#…).
3. Basculer entre texte, formes ou photo — téléchargez votre propre image pour voir l'effet sur du contenu réel.
4. Intégrer dans votre page (elle peut être placée n'importe où — même dans un SVG invisible et de taille nulle). Cible de prévisualisation Appliquer en CSS avec le snippet fourni : soit l'abréviation native (quand disponible), soit le
5. Copiez le manifest.json généré XML du filtre SVG Sept primitives de filtre
6. — flou de Gauss, rotation de tonalité, saturation, luminance vers alpha, turbulence avec déplacement, ombre, et préférences de matrice de convolution (relief, gravure, aiguisage, détection des bords). filter: url(#filterId) Pourquoi le CSS ne génère-t-il pas d'erreur lorsque var() pointe vers une propriété personnalisée non définie ?

Caractéristiques

• — retour immédiat visuel lorsque vous déplacez les curseurs ; aucune étape de reconstruction, aucun effet de clignotement. Trois cibles de prévisualisation
• Prévisualisation SVG en temps réel — appliquer sur du texte net, des formes primitives ou sur une photo que vous avez téléversée pour voir comment le filtre se comporte sur du contenu réel.
• Deux sorties — le bloc complet XML (prêt à être collé dans n'importe quel SVG) et un snippet d'utilisation CSS avec l'abréviation native quand disponible.
• Ombre avec opacité — combine <filter> , ce que l'abréviation native CSS ne peut pas exprimer.
• Identifiants de filtre sécurisés — garde vos feDropShadow avec flood-opacityvaleurs en sécurité pour
• Quelle est la différence entre un filtre CSS et un filtre SVG ? Les abréviations CSS (flou, rotation de tonalité, ombre, etc.) constituent un catalogue fixe d'effets que le navigateur mappe aux primitives SVG de filtre. Un filtre SVG vous donne accès direct à ces primitives — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix, etc. — et vous permet de les combiner pour créer des effets (distorsions, bruit, relief, manipulation des canaux) que les abréviations ne peuvent pas exprimer. Tout ce que vous pouvez faire en CSS, vous pouvez le faire en SVG, mais la réciproque n'est pas vraie. id Quel est le sens de l'attribut stdDeviation sur feGaussianBlur ? url(#…) références.