Contenido integrado SVG - SVG Embedded Content
El contenido incrustado es contenido que se importa al documento desde otro recurso. Los elementos SVG <image> y <foreignObject> se utilizan para admitir contenido incrustado SVG.
Cargando y mostrando mapas de bits
El elemento SVG <image> permite incluir y representar mapas de bits dentro de un objeto SVG. Puede mostrar formatos de imagen JPEG, PNG y también imágenes SVG. Los atributos del elemento <image> indican que el contenido de un archivo (un mapa de bits) debe mostrarse en un rectángulo determinado (“ventana”) dentro del sistema de coordenadas del usuario actual.
Los principales atributos son:
x e y: las coordenadas de la esquina superior izquierda de la imagen.
width y height: el ancho y el alto de la “ventana” para la representación de la imagen. Estos atributos son obligatorios.
href y xlink:href: apuntan a una URL para el archivo de imagen.
preserveAspectRatio: controla cómo se escala la imagen.
¿Cómo utilizar el elemento SVG <image>? El siguiente fragmento de código se muestra como imágenes .png y .svg que se pueden incrustar dentro del documento SVG:
1<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
2 <image href="https://docs.aspose.com/svg/images/svg.png" x="20" y="20" height="180" width="180" />
3 <image href="https://docs.aspose.com/svg/files/shapes.svg" x="250" y="10" height="350" width="350" />
4 <text x="40" y="250">Embedded PNG image</text>
5 <text x="300" y="250">Embedded SVG image</text>
6</svg>El fragmento de código anterior se muestra así:
HTML dentro de SVG
SVG está diseñado para ser coherente con otros lenguajes XML para describir y representar contenido incrustado. El elemento <foreignObject> permite incluir en un archivo SVG los elementos en un espacio de nombres que no sea SVG. En el contexto de un navegador, lo más probable es que sea HTML. El contenido gráfico externo se puede procesar con transformaciones, filtros, recorte, enmascaramiento y composición.
Como atributos, debe especificar las coordenadas x, y, width y height del contenedor <foreignObject>. De lo contrario, los elementos secundarios no se mostrarán en absoluto.
Veamos un ejemplo:
1<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
2 <style>
3 div {
4 color: grey;
5 font: 14px serif;
6 }
7 </style>
8 <circle cx="65" cy="60" r="60" fill="red" fill-opacity="0.1" />
9 <!-- example of HTML text embedding in SVG -->
10 <foreignObject x="20" y="20" width="200" height="180">
11 <!--In the context of HTML embedded in the SVG document, the XHTML namespace is mandatory-->
12 <div xmlns="https://www.w3.org/1999/xhtml">
13 Convert SVG to PNG. Aspose.SVG for .NET can read and convert SVG files to PNG, PDF, XPS, and major image formats.
14 </div>
15 </foreignObject>
16</svg>
Al usar <foreignObject> dentro de SVG, debe especificar el espacio de nombres desde el cual se origina el objeto extraño. En este ejemplo, establece en la línea 12:
<div xmlns="https://www.w3.org/1999/xhtml">
Aspose.SVG ofrece Aplicaciones web gratuitas SVG para convertir archivos SVG o de imágenes, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a Base64 y vectorizar texto. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!