Travailler avec les filtres SVG en Python

Reponse rapide: Pour travailler avec les filtres SVG en Python, chargez le SVG avec SVGDocument, trouvez l’element cible avec query_selector(), definissez son attribut filter avec set_attribute() et enregistrez le SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    element = document.root_element.query_selector("circle")
5    if element is not None:
6        element.set_attribute("filter", "url(#filter-id)")
7    document.save("filtered.svg")

Les filtres SVG creent des effets visuels comme le flou, l’ombre, la lueur, l’eclairage et le traitement des couleurs. Un filtre est generalement defini dans <defs> et applique a un element visible avec l’attribut filter="url(#filter-id)". Dans Aspose.SVG for Python via .NET, vous travaillez avec les filtres via le DOM SVG: trouver des elements cibles, creer des primitives de filtre, definir des attributs, ajouter des noeuds et enregistrer le fichier edite.

Dans cet article, vous apprendrez a:

creer un filtre SVG de flou en Python et l’appliquer a un element;
construire un filtre d’ombre avec des primitives de filtre;
editer des attributs de filtre comme stdDeviation, dx, dy et flood-color;
supprimer une reference de filtre d’un element SVG sans supprimer la definition reutilisable.

Bases de l’edition de filtres SVG

Un flux de filtre comporte deux parties: la definition du filtre et la reference au filtre. La definition se trouve dans <defs>, tandis que l’element visible y pointe par ID.

Tache	Balisage SVG a editer	Modele API typique
Appliquer un filtre existant	`filter="url(#filter-id)"`	Trouver l’element visible avec `query_selector()` et definir l’attribut `filter`
Creer un nouveau filtre	`<defs><filter id="..."></filter></defs>`	Creer des elements SVG avec `create_element_ns()` et les ajouter avec `append_child()`
Configurer flou ou ombre	Attributs de primitives de filtre comme `stdDeviation`, `dx`, `dy`, `flood-color`	Trouver la primitive et mettre a jour ses attributs
Supprimer un effet	Attribut `filter` sur l’element visible	Supprimer la reference de filtre avec `remove_attribute()`

Comment appliquer des filtres SVG en Python

Utilisez ce flux lorsqu’un fichier SVG a besoin d’un flou, d’une ombre, d’une lueur ou d’un autre effet de filtre:

Chargez le fichier SVG avec SVGDocument.
Trouvez ou creez l’element <defs> qui stocke les definitions reutilisables.
Trouvez ou creez un element <filter> avec un id stable.
Ajoutez ou mettez a jour des primitives de filtre comme <feGaussianBlur>, <feOffset> ou <feDropShadow>.
Appliquez le filtre a un element SVG visible avec filter="url(#filter-id)".
Enregistrez le SVG edite et verifiez la sortie rendue.

Les exemples ci-dessous utilisent svg-filters.svg comme fichier d’entree.

Creer et appliquer un filtre de flou

Un filtre doit etre defini avant qu’un element visible puisse l’utiliser. L’exemple suivant cree un filtre #blur dans <defs>, ajoute une primitive <feGaussianBlur>, applique le filtre au cercle et enregistre le resultat sous svg-blur-filter-applied.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4SVG_NS = "http://www.w3.org/2000/svg"
 5
 6input_folder = "data/"
 7output_folder = "output/"
 8input_path = os.path.join(input_folder, "svg-filters.svg")
 9output_path = os.path.join(output_folder, "svg-blur-filter-applied.svg")
10os.makedirs(output_folder, exist_ok=True)
11
12with SVGDocument(input_path) as document:
13    svg = document.root_element
14    defs = svg.query_selector("defs")
15
16    if defs is None:
17        defs = document.create_element_ns(SVG_NS, "defs")
18        svg.insert_before(defs, svg.first_child)
19
20    blur_filter = document.create_element_ns(SVG_NS, "filter")
21    blur_filter.set_attribute("id", "blur")
22    blur_filter.set_attribute("x", "-20%")
23    blur_filter.set_attribute("y", "-20%")
24    blur_filter.set_attribute("width", "140%")
25    blur_filter.set_attribute("height", "140%")
26
27    gaussian_blur = document.create_element_ns(SVG_NS, "feGaussianBlur")
28    gaussian_blur.set_attribute("in", "SourceGraphic")
29    gaussian_blur.set_attribute("stdDeviation", "3")
30
31    blur_filter.append_child(gaussian_blur)
32    defs.append_child(blur_filter)
33
34    circle = svg.query_selector("circle")
35    if circle is not None:
36        circle.set_attribute("filter", "url(#blur)")
37
38    document.save(output_path)

Le code montre les deux parties requises d’un flux de filtre SVG. Les elements <filter> et <feGaussianBlur> definissent l’effet, et l’attribut filter="url(#blur)" applique cet effet au cercle visible. L’illustration compare le SVG source dans l’image (a) au cercle floute dans l’image (b).

Cercle et texte SVG d’origine compares a un cercle floute par un filtre Gaussian blur en Python

Creer un filtre d’ombre

Creez un nouveau filtre lorsque le SVG ne contient pas encore l’effet requis. L’exemple suivant cree un filtre #label-shadow avec <feDropShadow>, l’ajoute a <defs> et l’applique a l’etiquette de texte.

 1import os
 2from aspose.svg import SVGDocument
 3
 4SVG_NS = "http://www.w3.org/2000/svg"
 5
 6input_folder = "data/"
 7output_folder = "output/"
 8input_path = os.path.join(input_folder, "svg-filters.svg")
 9output_path = os.path.join(output_folder, "svg-drop-shadow-filter.svg")
10os.makedirs(output_folder, exist_ok=True)
11
12with SVGDocument(input_path) as document:
13    svg = document.root_element
14    defs = svg.query_selector("defs")
15
16    if defs is None:
17        defs = document.create_element_ns(SVG_NS, "defs")
18        svg.insert_before(defs, svg.first_child)
19
20    shadow_filter = document.create_element_ns(SVG_NS, "filter")
21    shadow_filter.set_attribute("id", "label-shadow")
22    shadow_filter.set_attribute("x", "-20%")
23    shadow_filter.set_attribute("y", "-20%")
24    shadow_filter.set_attribute("width", "150%")
25    shadow_filter.set_attribute("height", "150%")
26
27    drop_shadow = document.create_element_ns(SVG_NS, "feDropShadow")
28    drop_shadow.set_attribute("dx", "6")
29    drop_shadow.set_attribute("dy", "8")
30    drop_shadow.set_attribute("stdDeviation", "2")
31    drop_shadow.set_attribute("flood-color", "#455a64")
32    drop_shadow.set_attribute("flood-opacity", "0.6")
33
34    shadow_filter.append_child(drop_shadow)
35    defs.append_child(shadow_filter)
36
37    label = svg.query_selector("#label")
38    if label is not None:
39        label.set_attribute("filter", "url(#label-shadow)")
40
41    document.save(output_path)

Cet exemple montre les deux parties du flux de filtre: le filtre reutilisable est cree dans <defs>, et l’element texte visible recoit filter="url(#label-shadow)". Si l’une des deux parties manque, l’ombre n’apparaitra pas. L’illustration montre l’etiquette d’origine dans l’image (a) et la meme etiquette avec une ombre dans l’image (b).

Texte SVG original compare au texte SVG apres ajout d’un filtre d’ombre en Python

Editer les attributs d’un filtre existant

Les effets de filtre sont controles par des attributs sur les primitives de filtre. L’exemple suivant ouvre le SVG cree par l’exemple de flou, trouve <feGaussianBlur> dans #blur et augmente sa valeur stdDeviation.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "output/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "svg-blur-filter-applied.svg")
 7output_path = os.path.join(output_folder, "svg-filter-attributes-edited.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    svg = document.root_element
12    blur = svg.query_selector("#blur feGaussianBlur")
13
14    if blur is not None:
15        blur.set_attribute("stdDeviation", "8")
16
17    document.save(output_path)

La sortie utilise le meme ID de filtre, mais le flou est plus fort car la valeur stdDeviation est passee de 3 a 8. L’illustration compare le premier resultat de flou dans l’image (a) au flou plus fort apres edition de la primitive de filtre dans l’image (b).

Resultat SVG Gaussian blur compare a un flou plus fort apres edition de stdDeviation en Python

Supprimer un filtre d’un element SVG

Supprimer un filtre d’un element visible est different de supprimer la definition du filtre. L’exemple suivant ouvre le SVG cree par l’exemple de flou et supprime seulement la reference filter du cercle; la definition #blur peut rester dans <defs> pour reutilisation.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "output/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "svg-blur-filter-applied.svg")
 7output_path = os.path.join(output_folder, "svg-filter-removed.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    circle = document.root_element.query_selector("circle")
12
13    if circle is not None and circle.has_attribute("filter"):
14        circle.remove_attribute("filter")
15
16    document.save(output_path)

Utilisez ce modele lorsqu’un filtre ne doit plus affecter un element precis, mais que d’autres elements peuvent encore utiliser la meme definition de filtre.

Erreurs courantes et solutions

Probleme	Solution
Le filtre n’apparait pas	Verifiez que l’element visible possede `filter="url(#filter-id)"` et que cet ID existe dans `<defs>`
L’ombre ou le flou est coupe	Agrandissez la region de filtre avec `x`, `y`, `width` et `height` sur `<filter>`
Le filtre affecte le mauvais element	Appliquez l’attribut `filter` a la forme ou au groupe visible qui doit recevoir l’effet
Modifier `fill` ou `stroke` ne change pas l’effet	Mettez a jour les attributs de la primitive de filtre, comme `stdDeviation`, `flood-color`, `dx` ou `dy`
Des IDs de filtre dupliques produisent une sortie confuse	Utilisez des IDs stables et uniques, puis mettez a jour les references `url(#...)`
Le fichier de sortie est inchange	Enregistrez le document edite et ouvrez le chemin de sortie, pas le SVG d’entree

FAQ

Comment appliquer un filtre SVG en Python?

Chargez le SVG avec SVGDocument, trouvez l’element cible visible et definissez filter="url(#filter-id)" avec set_attribute(). Le <filter> reference doit exister dans le document SVG, generalement dans <defs>.

Comment creer un filtre de flou SVG?

Creez un element <filter> dans <defs>, ajoutez la primitive <feGaussianBlur>, definissez stdDeviation, puis appliquez le filtre a un element visible avec filter="url(#filter-id)".

Comment ajouter une ombre a un SVG en Python?

Creez un filtre avec une primitive d’ombre comme <feDropShadow>, definissez des attributs comme dx, dy, stdDeviation et flood-color, ajoutez le filtre a <defs> et appliquez-le avec filter="url(#filter-id)".

Puis-je editer les attributs d'un filtre SVG existant?

Oui. Trouvez la primitive de filtre, par exemple #blur feGaussianBlur, et mettez a jour des attributs comme stdDeviation. Enregistrez le SVG apres la modification.

Puis-je supprimer un filtre sans le supprimer de defs?

Oui. Supprimez l’attribut filter de l’element visible. La definition <filter> peut rester dans <defs> si d’autres elements l’utilisent encore ou si vous voulez la reutiliser plus tard.