Navegar SVG – Aspose.SVG for Python via .NET

A menudo es necesario inspeccionar el contenido de los archivos SVG para extraer información sobre el archivo, sus elementos y su jerarquía. Aspose.SVG para Python a través de la API .NET es totalmente compatible con las especificaciones SVG oficiales y proporciona una amplia funcionalidad para trabajar con el modelo de objetos de documento (DOM) SVG. Esta API admite una amplia gama de capacidades de navegación e inspección para contenido SVG.

En este artículo aprenderás:

• cómo ver el contenido SVG como una cadena, extrayendo todo el contenido SVG en un formato de cadena para facilitar su visualización y manipulación;
• cómo inspeccionar un documento y sus elementos utilizando la API.
• cómo obtener información sobre un elemento específico en un archivo SVG, como atributos y estilos.
• cómo navegar por un documento utilizando selectores CSS y consultas XPath para encontrar y manipular elementos.

Para continuar siguiendo este tutorial, debe instalar y configurar la biblioteca Aspose.SVG for Python via .NET en su proyecto Python. Nuestros ejemplos de código le ayudan a crear, cargar y leer archivos SVG utilizando la biblioteca Python.

Ver contenido SVG

La forma más sencilla de inspeccionar el contenido del documento es mirar el contenido como una cadena. Las propiedades inner_html y outer_html de la clase Element devuelven un fragmento de XML (o HTML) que representa el elemento y su contenido. Están desarrollados precisamente para ver contenido SVG como una cadena. El siguiente ejemplo de código Python muestra cómo ver el contenido de un archivo SVG en la consola:

1. Defina la ruta completa al archivo SVG que desea cargar.
2. Utilice la clase SVGDocument para cargar el archivo SVG desde la ruta especificada.
3. Recupere el HTML externo del elemento raíz del documento usando la propiedad outer_html.
4. Imprima el contenido HTML del documento SVG en la consola para ver su estructura y contenido.

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

Navegación e inspección SVG usando DOM

El modelo de objetos de documento (DOM) es fundamental para navegar por archivos SVG al proporcionar una vista estructurada de los elementos del documento y sus relaciones. Proporciona acceso programático a elementos y atributos SVG, lo que permite una inspección y manipulación detalladas. A través del DOM, los desarrolladores pueden navegar por la estructura SVG utilizando métodos para seleccionar elementos por nombre de etiqueta, clase o ID. También pueden utilizar selectores CSS y consultas XPath para encontrar elementos específicos de manera eficiente. Este modelo jerárquico facilita la lectura y modificación del contenido SVG, la obtención de información detallada sobre elementos específicos y la interacción con SVG de forma flexible y potente.

Extraer información sobre un elemento SVG específico

El siguiente ejemplo muestra cómo extraer información sobre un elemento SVG particular de un archivo shapes.svg. Este fragmento de código demuestra cómo cargar un documento SVG, iterar a través de elementos específicos (<rect> en este caso) y acceder e imprimir de forma segura sus atributos:

1. Ajuste la variable input_path para que apunte a la ubicación real de su archivo SVG.
2. Utilice el constructor SVGDocument(input_path) para cargar un archivo SVG desde la input_path especificada.
3. Utilice el método get_elements_by_tag_name(“rect”) para recorrer todos los elementos <rect> en el documento SVG.
4. Imprima el nombre de la etiqueta y el ID de cada elemento <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}")

Después de ejecutar este ejemplo obtendrá el siguiente resultado:

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

Inspección de un documento SVG y sus elementos

Aspose.SVG contiene una lista de métodos que se basan en las Element Traversal Specifications. Puede realizar una inspección detallada del documento y sus elementos utilizando la API. El siguiente ejemplo de código muestra el uso generalizado de las funciones de Element Traversal.

Aquí está el código Python que carga un documento SVG ( shapes.svg), navega a través de sus elementos e imprime los nombres de las etiquetas:

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. El elemento <svg> es un contenedor y se utiliza como el elemento más externo de los documentos SVG. Para señalar el elemento <svg>, use la propiedad document_element de la clase SVGDocument que brinda acceso directo al elemento <svg> del documento. En el fragmento de código anterior, usamos esta manera.
2. La propiedad last_element_child devuelve el último nodo del elemento secundario de este elemento. En el ejemplo anterior, es el elemento <g>.
3. Según el fragmento de código anterior, la propiedad first_element_child devuelve el primer hijo del elemento <g>. Es el elemento <rect>.

Editar SVG usando el selector CSS

Aspose.SVG for Python via .NET también implementa la especificación CSS Selector que le permite navegar por el documento utilizando un estilo similar a CSS.

El método query_selector(selector) de la clase Element le permite obtener el primer elemento dentro del documento que coincide con el selector especificado. El método query_selector_all(selector) toma como parámetro el selector de consulta y devuelve una NodeList de todos los elementos que coinciden con el selector. Con los elementos resultantes, puedes realizar diversas manipulaciones: cambiar su texto, atributos, estilos CSS, etc.

En el siguiente ejemplo, utilizamos el método query_selector() para navegar por un documento SVG y buscar el elemento necesario para editarlo:

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)

En la figura: la imagen fuente (a) y la imagen editada (b).

Navegar SVG con consulta XPath

La consulta XPath ( XML Path Language), a menudo denominada simplemente XPath, es un lenguaje de consulta que se utiliza para consultar datos de documentos. Se basa en una representación DOM del documento SVG y selecciona nodos según varios criterios. La sintaxis de las expresiones XPath es bastante simple y, lo que es más importante, es fácil de leer y de soportar.

Aspose.SVG también tiene una potente implementación de especificaciones XPath junto con especificaciones transversales. Las consultas XPath se realizan principalmente utilizando el método evaluate() de la clase Documento. El método evaluar (expresión, contextoNodo, resolución, tipo, resultado) acepta una expresión XPath y otros parámetros dados y devuelve un resultado del tipo especificado. Esto le permite utilizar XPath Query para navegar por el documento ( shapes.svg) como se muestra en el siguiente ejemplo de código:

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)

Ver también

• El artículo Instalación proporciona una guía paso a paso sobre cómo instalar Aspose.SVG for Python via .NET en su computadora.
• Si está interesado en configurar una licencia, aplicar una licencia medida o desea probar una versión de evaluación para la biblioteca Aspose.SVG Python, consulte el artículo Licencias.
• Los escenarios de conversión y renderizado de SVG a otros formatos se ven en la sección Convertir archivos SVG en Python.