recursal/MDN huggingface dataset:
image
=====

O elemento SVG **`<image>`** carrega imagens dentro de documentos SVG. Ele pode exibir arquivos raster image (en-US) ou outros arquivos SVG.

The only image formats SVG software must support are JPEG, PNG (en-US), and other SVG files. Animated GIF (en-US) behavior is undefined.

SVG files displayed with `<image>` are treated as an image (en-US): external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL. To include SVG files and run scripts inside them, try <object> (en-US) inside of <foreignObject> (en-US).

**Nota:** The HTML spec defines `<image>` as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG (en-US).

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

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

Attributes
----------

### Global attributes

* Conditional processing attributes
* Core attributes
* Graphical event attributes
* Presentation attributes
* Xlink attributes
* `class`
* `style`
* `externalResourcesRequired`
* `transform (en-US)`
### Specific attributes

* `x (en-US)`: Positions the image horizontally from the origin.
* `y (en-US)`: Positions the image vertically from the origin.
* `width`: The width the image renders at. Unlike HTML's `<img>`, this attribute is required.
* `height (en-US)`: The height the image renders at. Unlike HTML's `<img>`, this attribute is required.
* `href (en-US)` and `xlink:href (en-US)`: Points at a URL for the image file.
* `preserveAspectRatio`: Controls how the image is scaled.
DOM Interface
-------------

`<image>` implements the `SVGImageElement` (en-US) interface.

Example
-------

Basic rendering of a PNG image in SVG:

### SVG


```html
<svg
 width="200"
 height="200"
 xmlns="https://www.w3.org/2000/svg"
 xmlns:xlink="https://www.w3.org/1999/xlink">
  <image href="mdn\_logo\_only\_color.png" height="200" width="200" />
</svg>
```

### Result

Especificações
--------------

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

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

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

`radialGradient` permite que autores definam gradientes radiais para preencher ou tracejar elementos gráficos

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

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

Exemplo
-------

» radialGradient.svg

Atributos
---------

### Atributos globais

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

* `gradientUnits (en-US)`
* `gradientTransform (en-US)`
* `cx (en-US)`
* `cy (en-US)`
* `r (en-US)`
* `fx (en-US)`
* `fy (en-US)`
* `spreadMethod (en-US)`
* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGRadialGradientElement`.

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

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

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

* `<linearGradient>`
animate
=======

O elemento SVG **`<animate>`** fornece uma maneira de animar um atributo de um elemento ao longo do tempo.
```

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}
```



```html
<svg viewBox="0 0 10 10" xmlns="https://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
 attributeName="rx"
 values="0;5;0"
 dur="10s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Attributes
----------

### Animation Attributes

Animation timing attributes
`begin (en-US)`, `dur (en-US)`, `end (en-US)`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`
Animation value attributes
`calcMode (en-US)`, `values (en-US)`, `keyTimes`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`
Other Animation attributes

Most notably: `attributeName (en-US)`, `additive (en-US)`, `accumulate (en-US)`

Animation event attributes

Most notably: `onbegin`, `onend`, `onrepeat`

### Global attributes

Core Attributes

Most notably: `id (en-US)`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

Usage notes
-----------

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

Accessibility concerns
----------------------

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query (en-US) to create a complimentary experience for users who have expressed a preference for no animated experiences.

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| SVG Animations Level 2 # AnimateElement |

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

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

Assim como o texto escrito em uma linha reta, o SVG também inclui a capacidade de colocar um texto ao longo de uma forma de um elemento `<path>`. Para especificar que um bloco de texto é renderizado ao longo da forma de um `<path>`, inclua o texto em um elemento `textPath` o qual inclui um atributo `xlink:href` com uma referência a um elemento `<path>`.

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

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

Exemplo
-------


```html
<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>
    <path
 id="MyPath"
 d="M 100 200
 C 200 100 300 0 400 100
 C 500 200 600 300 700 200
 C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      Nós vamos para cima, para baixo, para cima
    </textPath>
  </text>

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


Resultado:

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

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

Este elemento implementa a interface do `SVGTextPathElement`.
mpath
=====

O sub elemento `mpath` do elemento `<animateMotion>` fornece a habilidade de referenciar um elemento externo `<path>` como uma definição de um caminho de movimento.

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

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

Exemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 500 300"
 xmlns="https://www.w3.org/2000/svg"
 xmlns:xlink="https://www.w3.org/1999/xlink">
  <rect
 x="1"
 y="1"
 width="498"
 height="298"
 fill="none"
 stroke="blue"
 stroke-width="2" />

  <!-- Desenha o contorno da trajetória de movimento em azul, ao longo, com três pequenos círculos: inicio, meio e fim. -->
  <path
 id="path1"
 d="M100,250 C 100,50 400,50 400,250"
 fill="none"
 stroke="blue"
 stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- Aqui temos um triângulo que andará sobre o caminho do movimento.
 Define-se com uma orientação vertical com base no triângulo horizontalmente centralizado logo acima da origem. -->
  <path
 d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
 fill="yellow"
 stroke="red"
 stroke-width="7.06">
    <!-- Define o caminho de movimento da animação -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </path>
</svg>
```


Resultado:

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGMPathElement`.

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

* `<animateMotion>`
defs
====

A especificação do SVG permite que objetos gráficos sejam definidos para reuso posteriormente. Recomenda-se que, sempre que possível, os elementos referenciados sejam definidos dentro da tag `defs`. A definição destes elementos dentro de uma tag `defs` promove o entendimento do conteúdo do SVG e, consequentemente, promove a acessibilidade. Elementos gráficos definidos dentro da tag `defs` não serão diretamente renderizados. Você pode utilizar a tag `<use>` para renderizar tais elementos na janela de visualização.

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
-------


```xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
 xmlns="https://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
 fill="url(#Gradient01)" />
</svg>
```

Atributos
---------

### Atributos globais

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

*Não existem atributos específicos.*

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

Este elemento implementa a interface `SVGDefsElement`.

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

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

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

* `<use>`
polygon
=======

O elemento `polygon` define uma forma fechada que consiste em um conjunto de segmentos de linha reta reta ligados.

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
-------

» polygon.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 `SVGPolygonElement`.

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

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

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

* `<polyline>`
missing-glyph
=============

O conteúdo do `missing-glyph` é renderizado se, para um determinado caractere, não foi determinado um `<glyph>` apropriado.

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

|  |  |
| --- | --- |
| Categorias | Nenhum |
| 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
-------

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)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGMissingGlyphElement`.

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

* `<font>` (en-US)
* `<glyph>`
* SVG tutorial: SVG fonts
pattern
=======

Um padrão é utilizado para preenchimento ou traçado de um objeto utilizando um objeto gráfico pré-definido o qual pode ser replicado ("ladrilhado") com intervalos fixados em x e y para cobrir as áreas que serão pintadas. Padrões são definidos utilizando o elemento `pattern` e, em seguida, referenciado pelas propriedades `fill` e `stroke` em um determinado elemento gráfico para indicar que o elemento em questão deveria ser preenchido ou traçado com o padrão referenciado.

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
-------

» pattern.svg

Atributos
---------

### Atributos globais

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

* `patternUnits (en-US)`
* `patternContentUnits (en-US)`
* `patternTransform (en-US)`
* `x (en-US)`
* `y (en-US)`
* `width`
* `height (en-US)`
* `xlink:href (en-US)`
* `preserveAspectRatio`
Interface DOM
-------------

Este elemento implementa a interface do `SVGPatternElement`.
filter
======

O elemento `filter` fornece um recipiente para operações de um filtro atômico . Isso nunca será renderizado diretamente. Um filtro é referenciado pela utilização do atributo `filter (en-US)` com destino de um elemento SVG.

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

|  |  |
| --- | --- |
| Categorias | Nenhum |
| Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem:Elementos descritivosElementos de filtro primitivo`<animate>`, `<set>` |

Exemplo
-------

Atributos
---------

### Atributos globais

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

* `x (en-US)`
* `y (en-US)`
* `width`
* `height (en-US)`
* `filterRes`
* `filterUnits (en-US)`
* `primitiveUnits (en-US)`
* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGFilterElement`.

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

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

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

* `<feBlend>` (en-US)
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feFlood>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* Tutorial SVG: Efeitos de filtros
set
===

O elemento `set` fornece um meio simples para apenas definir o valor de um atributo para uma duração específica. Todos os tipos de atributos são suportados, incluindo aqueles que não podem ser razoavelmente interpolado, como uma string ou valores booleanos. O elemento `set` não é aditivo. Atributos aditivos e acumulados não são permitidos e serão ignorados se especificado.

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

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

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos de processamento condicional »
* Atributos principais »
* Atributos de eventos da animação »
* Atributos XLink »
* Atributos de destino do atributo da animação »
* Atributos de cronometragem da animação »
* `externalResourcesRequired`
### Atributos específicos

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

Este elemento implementa a interface do `SVGSetElement`.

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

* `<animate>`
use
===

O elemento `use` cria instâncias dentro de um documento SVG e os duplica em outro local. O efeito é o mesmo se as instâncias forem profundamente clonadas em um DOM não exposto, e então coladas onde o elemento `use` está (muito parecido com elementos de template clonados no HTML5). Como as instâncias clonadas não são expostas, é preciso ter cuidado ao utilizar CSS para estilizar o elemento `use` e seus descendentes ocultos. Não há garantia de que atributos CSS sejam herdados pelo DOM oculto e clonado, a menos que você os solicite explicitamente usando herança CSS.

Por motivos de segurança alguns navegadores poderão aplicar uma política de "mesma origem" com elementos `use`, bem como poderão recusar o carregamento de uma URI de múltiplas origens no atributo `xlink:href`.

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

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

Exemplo
-------


```xml
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>
```

Atributos
---------

### Atributos globais

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

* `x (en-US)`
* `y (en-US)`
* `width`
* `height (en-US)`
* `xlink:href (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGUseElement`.

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

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

O elemento `line` é uma forma básica do SVG, utilizada para criar uma linha conectando dois pontos.

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
-------

» line.svg

Você também pode aplicar transformações para obter o mesmo resultado. Começando com uma linha normal,

» line1.svg

adicionar as opções de transformação para mudar a direção da linha:

» line2.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

* `x1 (en-US)`
* `x2 (en-US)`
* `y1 (en-US)`
* `y2 (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGLineElement`.

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

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

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

* `<polygon>`
* `<path>`
stop
====

A rampa de cores para utilizar em um gradiente é definido pelo elemento `stop` que é elemento filho do elemento `<linearGradient>` ou do elemento `<radialGradient>`.

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

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

Exemplo
-------


```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 80 40"
 xmlns="https://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <!-- Outline the drawing area in black -->
  <rect fill="none" stroke="black" x="0.5" y="0.5" width="79" height="39" />

  <!-- The rectangle is filled using a linear gradient -->
  <rect
 fill="url(#MyGradient)"
 stroke="black"
 stroke-width="1"
 x="10"
 y="10"
 width="60"
 height="20" />
</svg>
```


Resultado:

Atributos
---------

### Atributos globais

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

* `offset`
* `stop-color (en-US)`
* `stop-opacity (en-US)`
Interface DOM
-------------

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

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

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

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

* `<linearGradient>`
* `<radialGradient>`