SVG significa Gráfico vectorial escalable, que está escrito en formato XML y se utiliza para definir gráficos basados en vectores para la Web.
El elemento SVG <metadata> permite al desarrollador describir información más detallada sobre el SVG, que es similar al elemento <desc> que se utiliza para proporcionar una descripción de texto accesible para cualquiera de los elementos SVG disponibles, ya sea un contenedor o un elemento gráfico. . Los <metadatos> deben usarse con espacios de nombres XML como RDF, FOAF, etc. La descripción textual no se muestra.
Sintaxis:
<svg>
<metadata>
<rdf:RDF> ... </rdf:RDF>
</metadata>
</svg>
Atributos: Admite tanto los atributos globales , es decir, los atributos de eventos globales como el atributo central.
Ejemplo 1: En este ejemplo, estamos creando un círculo de color amarillo y dentro de los <metadatos>, usamos RDF para dar información sobre el círculo.
HTML
<!DOCTYPE html> <html> <head> <title>SVG <metadata >Element</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>SVG <metadata >Element</h3> <?xml version="1.0" standalone="yes"?> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> <metadata> <rdf:RDF xmlns:rdf= "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs= "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc= "http://purl.org/dc/elements/1.1/"> <rdf:Description about= "http://example.org/myfoo" dc:title="Circle" dc:description= "A round cicle with yellow collore" dc:publisher="geek for geeks" dc:date="2022-06-17" dc:format="image/svg+xml" dc:language="en"> </rdf:Description> </rdf:RDF> </metadata> </svg> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, hemos creado un rectángulo de color azul donde hemos descrito el rectángulo como su título, fecha y detalles del editor dentro de la etiqueta de metadatos.
HTML
<!DOCTYPE html> <html> <head> <title>SVG <metadata > Element</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>SVG <metadata >Element</h3> <?xml version="1.0" standalone="yes"?> <svg width="400" height="110"> <rect width="300" height="100" style= "fill:rgb(0,0,255); stroke-width:3;stroke:rgb(0,0,0)" /> <metadata> <rdf:RDF xmlns:rdf= "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs= "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc= "http://purl.org/dc/elements/1.1/"> <rdf:Description about= "http://example.org/myfoo" dc:title="rectangle" dc:description= "A blue colored rectangle" dc:publisher="geekforgeeks" dc:date="2022-06-17" dc:format="image/svg+xml" dc:language="en"> </rdf:Description> </rdf:RDF> </metadata> </svg> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, podemos ver que podemos usar <metadatos> con cualquier elemento SVG, y debajo hemos creado un texto y dentro de los metadatos, lo hemos descrito.
HTML
<!DOCTYPE html> <html> <head> <title>SVG <metadata >Element</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>SVG <metadata >Element</h3> <?xml version="1.0" standalone="yes"?> <svg height="300" width="240"> <text x="0" y="15" fill="green"> GeeksforGeeks - Learning Together! </text> <metadata> <rdf:RDF xmlns:rdf= "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs= "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc= "http://purl.org/dc/elements/1.1/"> <rdf:Description about= "http://example.org/myfoo" dc:title="text" dc:description= "geeksforgeeks-learning together" dc:publisher="geek for geeks" dc:date="2022-06-17" dc:format="image/svg+xml" dc:language="en"> </rdf:Description> </rdf:RDF> </metadata> </svg> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por alphanumeric91 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA