Элемент SVG <метаданные>

Опубликовано: 4 Января, 2023

SVG означает масштабируемую векторную графику, написанную в формате XML и используемую для определения векторной графики для Интернета.

Элемент SVG <metadata> позволяет разработчику описать более подробную информацию о SVG, которая аналогична элементу <desc>, который используется для предоставления доступного текстового описания любого из доступных элементов SVG, будь то контейнер или графический элемент. . <metadata> следует использовать с пространством имен XML, таким как RDF, FOAF и т. д. Текстовое описание не отображается.

Синтаксис:

<svg>
    <metadata>
        <rdf:RDF> ... </rdf:RDF>  
    </metadata>
</svg>

Атрибуты: Он поддерживает как глобальные атрибуты, т.е. глобальные атрибуты событий, так и основной атрибут.

Пример 1: В этом примере мы создаем круг желтого цвета, и в <metadata> мы использовали RDF для предоставления информации о круге.

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 circle with yellow color"
                           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>

Выход:

Пример 2. В этом примере мы создали прямоугольник синего цвета, в котором мы описали прямоугольник, например, его заголовок, дату и сведения об издателе в теге метаданных.

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>

Выход:

Пример 3: В этом примере мы видим, что можем использовать <metadata> с любым элементом SVG, а ниже мы создали текст и описали его внутри метаданных.

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>

Выход

Picked HTML

Элемент SVG <метаданные>

HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ