recursal/MDN huggingface dataset:
glyphRef
========

O elemento `glyphRef` fornece um único glifo possível referenciando a substituição do `<altGlyph>`.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento de conteúdo textual |
| Conteúdo permitido | Vazio |

Atributos
---------

### Atributos globais

* Atributos principais »
* Atributos de apresentação »
* Atributos XLink »
* `class`
* `style`
### Atributos específicos

* `x (en-US)`
* `y (en-US)`
* `dx (en-US)`
* `dy (en-US)`
* `glyphRef`
* `format`
* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGGlyphRefElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<altGlyph>`

sv
vkern
=====

A distância vertical entre dois glifos de fontes cima-para-baixo podem ser bem otimizadas com um elemento `vkern`. Esse processo é conhecido como Kerning.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento de fonte |
| Conteúdo permitido | Vazio |

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos principais »
### Atributos específicos

* `u1 (en-US)`
* `g1 (en-US)`
* `u2 (en-US)`
* `g2 (en-US)`
* `k (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGVKernElement`.

Veja também
-----------

* `<font>` (en-US)
* `<glyph>`
* `<hkern>`
* Tutorial SVG: SVG fonts
view
====

Uma **`view`** é uma maneira definida de visualizar a imagem, como um nível de zoom ou uma visualização de detalhes.

Usage context
-------------

|  |  |
| --- | --- |
| Categorias | Nenhum |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos descritivos |

Attributes
----------

### Global attributes

* Aria attributes »
* Core attributes »
* Global event attributes »
* `externalResourcesRequired`
### Specific attributes

* `viewBox (en-US)`
* `preserveAspectRatio`
* `zoomAndPan (en-US)`
* `viewTarget`
Example
-------

### SVG


```html
<svg
 width="600"
 height="200"
 viewBox="0 0 600 200"
 xmlns="https://www.w3.org/2000/svg"
 xmlns:xlink="https://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="gradient">
      <stop offset="0%" stop-color="#8cffa0" />
      <stop offset="100%" stop-color="#8ca0ff" />
    </radialGradient>
  </defs>

  <circle r="50" cx="180" cy="50" style="fill:url(#gradient)" />

  <view id="halfSizeView" viewBox="0 0 1200 400" />
  <view id="normalSizeView" viewBox="0 0 600 200" />
  <view id="doubleSizeView" viewBox="0 0 300 100" />

  <a xlink:href="#halfSizeView">
    <text x="5" y="20" font-size="20">half size</text>
  </a>
  <a xlink:href="#normalSizeView">
    <text x="5" y="40" font-size="20">normal size</text>
  </a>
  <a xlink:href="#doubleSizeView">
    <text x="5" y="60" font-size="20">double size</text>
  </a>
</svg>
```

### Result

DOM Interface
-------------

This element implements the `SVGViewElement` (en-US) interface.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ViewElement |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
mask
====

No SVG, você pode especificar que quaisquer outros objetos gráficos ou elementos `<g>` podem ser utilizados com uma máscar de alfa para a composição do objeto atual para o fundo. A mask is defined with the `mask` element. A máscara é usada/referenciada usando a propriedade `mask (en-US)`.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento recipiente |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivosElementos de formaElementos estruturaisElementos de gradiente`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Exemplo
-------

» mask.svg

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de apresentação »
* `class`
* `style`
* `externalResourcesRequired`
### Atributos específicos

* `maskUnits (en-US)`
* `maskContentUnits (en-US)`
* `x (en-US)`
* `y (en-US)`
* `width`
* `height (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGMaskElement`.

Veja também
-----------

* `<clipPath>` (en-US)
desc
====

Cada elemento container ou elementos gráficos em um desenho SVG podem fornecer uma `desc`, string de descrição onde esta é somente textual. Quando o fragmento do documento SVG é renderizado como um SVG em uma mídia visual, elementos `desc` não são renderizados como parte da visualização gráfica. Alterne as exibições quando possível, tanto visual e auditiva, escolha a exibição do elemento `desc` mas não a exibição dos elementos `path` ou outros elementos gráficos. O elemento `desc` geralmente melhora a acessibilidade do documentos SVG.

Contexto de utilização
----------------------

|  |  |
| --- | --- |
| Categorias | Elemento descritivo |
| Conteúdo permitido | Quaisquer elementos ou dados de caracteres |

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos centrais »
* `class`
* `style`
### Atributos específicos

*Não existe especificação de atributos.*

Interface DOM
-------------

Este elemento implementa a interface `SVGDescElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<title>`
metadata
========

Metadados são dados estruturados sobre dados. Metadados que são incluídos com um conteúdo SVG devem ser especificados com um elemento `metadata`. O conteúdo do `metadata` devem ser elementos de outros namespaces XML tais como RDF, FOAF, etc.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento descritivo |
| Conteúdo permitido | Quaisquer elementos ou dados de caracteres |

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos principais »
### Atributos específicos

*Não existem atributos específicos.*

Interface DOM
-------------

Este elemento implementa a interface do `SVGMetadataElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
tref
====

O conteúdo textual para o `<text>` podem ser dados de caracteres diretamente embedados com o elemento `<text>` ou o conteúdo de dados de caracteres de um elemento referenciado, onde a referência é especificada com um elemento `tref`.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento de conteúdo textual, Elemento filho de conteúdo textual |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos descritivos`<animate>`, `<set>` |

Exemplo
-------


```xml
<svg width="100%" height="100%" viewBox="0 0 1000 300"
 xmlns="https://www.w3.org/2000/svg"
 xmlns:xlink="https://www.w3.org/1999/xlink">
  <defs>
    <text id="ReferencedText">
      Referenced character data
    </text>
  </defs>

  <text x="100" y="100" font-size="45" >
    Inline character data
  </text>

  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="#ReferencedText"/>
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
 fill="none" stroke-width="2" />
</svg>
```

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de eventos gráficos »
* Atributos de apresentação »
* Atributos XLink »
* `class`
* `style`
* `externalResourcesRequired`
### Atributos específicos

* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGTRefElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<text>`
switch
======

O elemento `switch` avalia os atributos `requiredFeatures (en-US)`, `requiredExtensions` e o `systemLanguage (en-US)` diretamente nos seus elementos filhos em ordem e, em seguida, processa e renderiza o primeiro filho que possua este atributo definido como verdadeiro. Todos os outros serão ignorados e, portanto, não renderizados. Se o elemento filho é um elemento recipiente como o `<g>`, então toda a subárvore será ou processada/renderizada ou ignorada/não renderizada.

Observe que os valores das propriedades `display` e `visibility` não possuem efeitos sob o processamento do elemento `switch`. Em particular, definindo `display` como `none` em um filho de um elemento `switch` não possuirá efeito sob o teste de verdadeiro/falso associado com o processamento de um elemento `switch`.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento recipiente |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivosElementos de forma`<a>`, `<foreignObject>` (en-US), `<g>`, `<image>`, `<svg>`, `<switch>`, `<text>`, `<use>` |

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de eventos gráficos »
* Atributos de apresentação »
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Atributos específicos

* `allowReorder`
Interface DOM
-------------

Este elemento implementa a interface do `SVGSwitchElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
path
====

**Primeiros passos (en-US)**
 Este tutorial irá te ajudar a utilizar caminhos no SVG.
Resumo
------

O elemento `path` é um elemento genérico para definir uma forma. Todas as formas básicas poderão ser criadas com elemento de caminho.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento gráfico, Elemento de forma |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivos |

Exemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 400 400"
 xmlns="https://www.w3.org/2000/svg">
  <path
 d="M 100 100 L 300 100 L 200 300 z"
 fill="orange"
 stroke="black"
 stroke-width="3" />
</svg>
```


Resultado:

Atributos
---------

### Atributos globais

* Atributos de processamento condicional (en-US) »
* Atributos centraiss (en-US) »
* Atributos de evento gráfico (en-US) »
* Atributos de apresentação (en-US) »
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Atributos específicos

* `d (en-US)`
* `pathLength (en-US)`
Interface DOM
-------------

Este elemento implementa a interace do `SVGPathElement` (en-US).

Compatibilidade dos navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<circle>`
* `<ellipse>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* O tutorial sobre SVG "Primeiros passos" na MDN: Path (en-US)
script
======

Um elemento `script` é equivalente a um elemento `script` em HTML e, portanto, é o lugar para os scripts (por exemplo, ECMAScript).

Quaisquer funções definidas dentro de qualquer elemento `script` tem um escopo global em todo o documento atual.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Nenhum |
| Conteúdo permitido | Quaisquer elementos ou dados de caracteres |

Exemplo
-------

O seguinte trecho de código demonstra o uso da tag `script` do SVG. Neste código, nós usamos o JavaScript para alterar o raio do elemento SVG `<circle>`.


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="https://www.w3.org/2000/svg">
  <script type="text/javascript">
 // <![CDATA[
 function change(evt) {
 var target = evt.target;
 var radius = target.getAttribute("r");

 if (radius == 15) {
 radius = 45;
 } else {
 radius = 15;
 }

 target.setAttribute("r", radius);
 }
 // ]]>
 </script>

  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
</svg>
```


Resultado:

Atributos
---------

### Atributos globais

* Atributos principais »
* Atributos XLink »
* `externalResourcesRequired`
### Atributos específicos

* `type (en-US)`
* `xlink:href (en-US)`
DOM interface
-------------

Este elemento implementa a interface do `SVGScriptElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Elemento `script` em HTML
circle
======

O elemento `circle` é uma forma básica do SVG, utilizada para criar círculos baseado em um ponto central e um raio.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento básico de forma, Elemento gráfico, Elemento de forma |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivos |

Exemplo
-------


```xml
<?xml version="1.0"?>
<svg viewBox="0 0 120 120" version="1.1"
 xmlns="https://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50"/>
</svg>
```


» circle.svg

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de eventos gráficos »
* Atributos de apresentação »
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Atributos específicos

* `cx (en-US)`
* `cy (en-US)`
* `r (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGCircleElement` (en-US) interface.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Relacionado
-----------

* `<ellipse>`
linearGradient
==============

O elemento `linearGradient` permite que os autores definam gradientes lineares para preenchimento (fill) ou contornos (stroke) de elementos gráficos.

Usage context
-------------

|  |  |
| --- | --- |
| Categorias | Elemento gradiente |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos descritivos`<animate>`, `<animateTransform>`, `<set>`, `<stop>` |

Example
-------

» linearGradient.svg

Atributos
---------

### Atributos globais

* Atributos centrais »
* Atributos de apresentação »
* Atributos Xlink »
* `class`
* `style`
* `externalResourcesRequired`
### Atributos específicos

* `gradientUnits (en-US)`
* `gradientTransform (en-US)`
* `x1 (en-US)`
* `y1 (en-US)`
* `x2 (en-US)`
* `y2 (en-US)`
* `spreadMethod (en-US)`
* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface `SVGLinearGradientElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<radialGradient>`
* `<stop>`
title
=====

Cada elemento recipiente ou elemento gráfico em um desenho SVG pode fornecer uma descrição de `title`, onde esta descrição é de apenas texto. Quando o atual fragmento do documento SVG é renderizado em aparelhos audiovisuais, o elemento `title` não é renderizado como parte do gráfico. Entretanto, alguns agentes de usuários poderão, por exemplo, exibir o elemento `title` como uma dica. Apresentações alternativas são possíveis, tanto visual quanto auditiva, que exibem o elemento `title` mas não mostram o elemento `path` ou outros elementos gráficos. O elemento `title` geralmente aumenta a acessibilidade de documentos SVG.

Geralmente o elemento `title` deve ser o primeiro elemento filho de seu pai. Observe que estas implementações que utilizam o `title` para exibir uma dica, muitas vezes só o farão se o `title` for o primeiro elemento filho de seu pai.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento descritivo |
| Conteúdo permitido | Quaisquer elementos ou dados de caracteres |

Exemplo
-------

O seguinte trecho de código demonstra a utilização da tag SVG `<title>`.


```xml
<svg width="500" height="300" xmlns="https://www.w3.org/2000/svg">
  <g>
    <title>Exemplo Demonstrativo de Título SVG</title>
    <rect x="10" y="10" width="200" height="50"
 style="fill:none; stroke:blue; stroke-width:1px"/>
  </g>
</svg>
```

Atributos
---------

### Atributos globais

* Atributos principais »
* `class`
* `style`
### Atributos específicos

*Não existem atributos específicos.*

Interface DOM
-------------

Este elemento implementa a interface do `SVGTitleElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<desc>`
glyph
=====

O `glyph` determina um único glifo em uma fonte SVG.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento de conteúdo textual |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivosElementos de formaElementos estruturaisElementos de gradiente`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Exemplo
-------


```xml
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'https://www.w3.org/2000/svg'>
<!-- Exemplo copiado de https://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
  <defs>

    <font id="Font1" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
 units-per-em="1000" cap-height="600" x-height="400"
 ascent="700" descent="300"
 alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Bold"/>
        </font-face-src>
      </font-face>

      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>

    </font>
  </defs>
  <text x="100" y="100"
 style="font-family: 'Super Sans', Helvetica, sans-serif;
 font-weight: bold; font-style: normal">Texto utilizando fonte embed@da!</text>
</svg>
```

Atributos
---------

### Atributos globais

* Atributos principais »
* Atributos de apresentação »
* `class`
* `style`
### Atributos específicos

* `d (en-US)`
* `horiz-adv-x (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `vert-adv-y (en-US)`
* `unicode (en-US)`
* `glyph-name (en-US)`
* `orientation (en-US)`
* `arabic-form (en-US)`
* `lang (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGGlyphElement`.

Relacionado
-----------

* `<font>` (en-US)
* `<missing-glyph>`
* Tutorial SVG: SVG fonts
g
=

O elemento `g` é um recipiente utilizado para agrupar objetos. Transformações aplicadas no elemento `g` são repassadas para todos os seus elementos filhos. Atributos também são herdados por elementos filhos. Além disso, pode ser utilizado para definir objetos complexos que poderão ser referenciados mais tarde pelo elemento `<use>`.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento recipiente, elemento estrutural |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivosElementos de formaElementos estruturaisElementos de gradiente`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Exemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 95 50"
 xmlns="https://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>
```

Atributos
---------

### Atributos globais

* Atributos de processamento condicional (en-US) »
* Atributos principais (en-US) »
* Atributos de eventos gráficos (en-US) »
* Atributos de apresentação (en-US) »
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Atributos específicos

*There is no specific attributes.*

Interface DOM
-------------

Este elemento implementa a interface do `SVGGElement` (en-US).

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
polyline
========

O elemento `polyline` é uma forma básica do SVG, utilizado para criar uma séries de linhas retas conectando vários pontos. Tipicamente um `polyline` é usado para criar formas abertas.

Contexto de uso
---------------

|  |  |
| --- | --- |
| Categorias | Elemento básico de forma, Elemento gráfico, Elemento de forma |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivos |

Exemplo
-------

» polyline.svg

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de eventos gráficos »
* Atributos de apresentação »
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Atributos específicos

* `points (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGPolylineElement`.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<line>`
* `<polygon>`