Naviguer dans SVG – Aspose.SVG for Python via .NET

L’inspection du contenu des fichiers SVG est souvent nécessaire pour extraire des informations sur le fichier, ses éléments et leur hiérarchie. Aspose.SVG for Python via .NET API est entièrement conforme aux spécifications SVG officielles et fournit des fonctionnalités étendues pour travailler avec le modèle objet de document SVG (DOM). Cette API prend en charge un large éventail de fonctionnalités de navigation et d’inspection pour le contenu SVG.

Dans cet article, vous apprendrez:

• comment afficher le contenu SVG sous forme de chaîne, en extrayant l’intégralité du contenu SVG dans un format de chaîne pour une visualisation et une manipulation faciles;
• comment inspecter un document et ses éléments à l’aide de l’API.
• comment obtenir des informations sur un élément spécifique dans un fichier SVG, comme les attributs et les styles.
• comment naviguer dans un document à l’aide de sélecteurs CSS et de requêtes XPath pour rechercher et manipuler des éléments.

Pour continuer à suivre ce tutoriel, vous devez installer et configurer la bibliothèque Aspose.SVG for Python via .NET dans votre projet Python. Nos exemples de code vous aident à créer, charger et lire des fichiers SVG à l’aide de la bibliothèque Python.

Afficher le contenu SVG

Le moyen le plus simple d’inspecter le contenu d’un document consiste à examiner le contenu sous forme de chaîne. Les propriétés inner_html et outer_html de la classe Element renvoient un fragment de XML (ou HTML) qui représente l’élément et son contenu. Ils sont développés précisément pour visualiser le contenu SVG sous forme de chaîne. L’exemple de code Python suivant montre comment afficher le contenu d’un fichier SVG dans la console:

1. Définissez le chemin complet du fichier SVG que vous souhaitez charger.
2. Utilisez la classe SVGDocument pour charger le fichier SVG à partir du chemin spécifié.
3. Récupérez le code HTML externe de l’élément racine du document à l’aide de la propriété outer_html.
4. Imprimez le contenu HTML du document SVG sur la console pour afficher sa structure et son contenu.

using Aspose.Svg;
using System.IO;
...
import os
from aspose.svg import *

# Setup directories
data_dir = "data/"
document_path = os.path.join(data_dir, "document.svg")

# Load an SVG document
with SVGDocument(document_path) as document:
    html = document.document_element.outer_html

    print(html)
# View the document content

Navigation et inspection SVG utilisant DOM

Le modèle objet de document (DOM) est essentiel à la navigation dans les fichiers SVG en fournissant une vue structurée des éléments du document et de leurs relations. Il fournit un accès programmatique aux éléments et attributs SVG, permettant une inspection et une manipulation détaillées. Grâce au DOM, les développeurs peuvent parcourir la structure SVG à l’aide de méthodes permettant de sélectionner des éléments par nom de balise, classe ou ID. Ils peuvent également utiliser des sélecteurs CSS et des requêtes XPath pour rechercher efficacement des éléments spécifiques. Ce modèle hiérarchique facilite la lecture et la modification du contenu SVG, l’obtention d’informations détaillées sur des éléments spécifiques et l’interaction avec SVG de manière flexible et puissante.

Extraire des informations sur un élément SVG spécifique

L’exemple suivant montre comment extraire des informations sur un élément SVG particulier à partir d’un fichier shapes.svg. Cet extrait de code montre comment charger un document SVG, parcourir des éléments spécifiques (<rect> dans ce cas) et accéder et imprimer en toute sécurité leurs attributs:

1. Ajustez la variable input_path pour qu’elle pointe vers l’emplacement réel de votre fichier SVG.
2. Utilisez le constructeur SVGDocument(input_path) pour charger un fichier SVG à partir du input_path spécifié.
3. Utilisez la méthode get_elements_by_tag_name(“rect”) pour parcourir tous les éléments <rect> dans le document SVG.
4. Imprimez le nom de la balise et l’ID de chaque élément <rect>.

fimport os
from aspose.svg import *

# Prepare a path to the source and output SVG file
data_dir = "data/"
input_path = os.path.join(data_dir, "shapes.svg")

# Load the SVG document
document = SVGDocument(input_path)

# Iterate over elements in the SVG document
for element in document.get_elements_by_tag_name("rect"):
    print(f"Element: {element.tag_name}, ID: {element.id}")

# Print attributes of the element
    attributes = element.attributes
    for i in range(attributes.length):
        attr = attributes[i]
        if attr is not None:
            print(f" Attribute: {attr.name} = {attr.value}")

Après avoir exécuté cet exemple, vous obtiendrez le résultat suivant:

Element: rect, ID: first-rect
  Attribute: id = first-rect
  Attribute: x = 50
  Attribute: y = 90
  Attribute: width = 100
  Attribute: height = 90
  Attribute: style = stroke-width:5; stroke:FireBrick
Element: rect, ID: second-rect
  Attribute: id = second-rect
  Attribute: x = 120
  Attribute: y = 150
  Attribute: width = 120
  Attribute: height = 120
  Attribute: style = stroke-width:10; stroke:DarkCyan
Element: rect, ID: third-rect
  Attribute: id = third-rect
  Attribute: x = 170
  Attribute: y = 220
  Attribute: width = 90
  Attribute: height = 90
  Attribute: style = stroke-width:5; stroke:FireBrick

Inspection d’un document SVG et de ses éléments

Aspose.SVG contient une liste de méthodes basées sur les Spécifications Element Traversal. Vous pouvez effectuer une inspection détaillée du document et de ses éléments à l’aide de l’API. L’exemple de code suivant montre l’utilisation généralisée des fonctionnalités Element Traversal.

Voici le code Python qui charge un document SVG ( shapes.svg), navigue à travers ses éléments et imprime les noms des balises:

import os
from aspose.svg import *

# Setup directories
data_dir = "data/"
document_path = os.path.join(data_dir, "shapes.svg")

# Load a document
with SVGDocument(document_path) as document:
    # Get the root element
    element = document.document_element
    print(element.tag_name)  # svg

    # Get the last child element of the root (which should be a <g> element)
    element = element.last_element_child
    print(element.tag_name)  # g

    # Get the first child element of the <g> element (which should be a <rect> element)
    element = element.first_element_child
    print(element.tag_name)  # rect

1. L’élément <svg> est un conteneur et il est utilisé comme élément le plus externe des documents SVG. Pour pointer l’élément <svg>, vous utilisez la propriété document_element de la classe SVGDocument qui donne un accès direct à l’élément <svg> du document. Dans l’extrait de code ci-dessus, nous utilisons cette méthode.
2. La propriété last_element_child renvoie le dernier nœud d’élément enfant de cet élément. Dans l’exemple ci-dessus, il s’agit de l’élément <g>.
3. Selon l’extrait de code ci-dessus, la propriété first_element_child renvoie le premier enfant de l’élément <g>. C’est l’élément <rect>.

Modifier SVG à l’aide du sélecteur CSS

Aspose.SVG for Python via .NET implémente également la spécification CSS Selector qui vous permet de naviguer dans le document en utilisant un style de type CSS.

La méthode query_selector(selector) de la classe Element vous permet d’obtenir le premier élément du document qui correspond au sélecteur spécifié. La méthode query_selector_all(selector) prend en paramètre le sélecteur de requête et renvoie une NodeList de tous les éléments qui correspondent au sélecteur. Avec les éléments résultants, vous pouvez effectuer diverses manipulations: modifier son texte, ses attributs, ses styles CSS, etc.

Dans l’exemple suivant, nous utilisons la méthode query_selector() pour parcourir un document SVG et rechercher l’élément nécessaire à des fins d’édition:

import os
from aspose.svg import *

# Setup directories
output_dir = "output/"
data_dir = "data/"

document_path = os.path.join(data_dir, "shapes.svg")

# Load an SVG document from the file
document = SVGDocument(document_path)

# Get root svg element of the document
svg_element = document.root_element

# Get circle element to change color
circle_element = svg_element.query_selector("circle")

# Set a new "fill" attribute value for the circle element
circle_element.set_attribute("stroke", "DarkCyan")

# Save the SVG document to a file
output_path = os.path.join(output_dir, "circle-color.svg")
document.save(output_path)

Sur la figure: l’image source (a) et l’image éditée (b).

Naviguer dans SVG avec la requête XPath

XPath Query ( XML Path Language), souvent appelé simplement XPath, est un langage de requête utilisé pour interroger les données des documents. Il est basé sur une représentation DOM du document SVG et sélectionne les nœuds selon différents critères. La syntaxe des expressions XPath est assez simple et, plus important encore, elle est facile à lire et à prendre en charge.

Aspose.SVG dispose également d’une puissante implémentation de spécifications XPath ainsi que de spécifications Traversal. Les requêtes XPath sont principalement effectuées à l’aide de la méthode evaluate() de la classe Document. La méthode evaluate(expression, contextNode, solver, type, result) accepte une expression XPath et d’autres paramètres donnés et renvoie un résultat du type spécifié. Cela vous permet d’utiliser XPath Query pour naviguer dans le document ( shapes.svg), comme indiqué dans l’exemple de code suivant:

import os
from aspose.svg import *
from aspose.svg.dom.xpath import XPathResultType

# Setup directories
output_dir = "output/"
data_dir = "data/"
if not os.path.exists(output_dir):
    os.makedirs(output_dir)

# Prepare a path to a file loading
document_path = os.path.join(data_dir, "shapes.svg")

# Load an SVG document from the file
document = SVGDocument(document_path)

# Evaluate XPath expression
xpath_expression = "//rect[@x='120']"
xpath_result = document.evaluate(xpath_expression, document, None, XPathResultType.ANY, None)

# Get the next evaluated node and print its parent_element
node = xpath_result.iterate_next()
if node:
    print(node.parent_element)

Voir aussi

• L’article Installation fournit un guide étape par étape sur la façon d’installer Aspose.SVG for Python via .NET sur votre ordinateur.
• Si vous souhaitez configurer une licence, appliquer une licence limitée ou si vous souhaitez essayer une version d’évaluation de la bibliothèque Aspose.SVG Python, veuillez vous référer à l’article Licensing.
• Les scénarios de conversion et de rendu du SVG vers d’autres formats sont visualisés dans la section Convertir des fichiers SVG en Python.