animate - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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


a - SVG: Gráficos Vetoriais Escaláveis

a
=

O elemento **<a>** do SVG cria um hiperlink para outras páginas da web, arquivos, locais na mesma página, endereços de email ou qualquer outra URL. É muito semelhante ao elemento `<a>` do HTML.

O elemento `<a>` do SVG é um contêiner, o que significa que você pode criar um link em torno do texto (como em HTML), mas também em torno de qualquer elemento.
```

@namespace svg url(https://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle"><circle></text>
  </a>
</svg>
```

```css
/\* As SVG does not provide a default visual style for links,
 it's considered best practice to add some \*/

@namespace svg url(https://www.w3.org/2000/svg);
/\* Necessary to select only SVG <a> elements, and not also HTML’s.
 See warning below \*/

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /\* Even for text, SVG uses fill over color \*/
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}
```

**Aviso:** Como esse elemento compartilha seu nome de tag com o elemento `<a>` do HTML, selecionar `a` com CSS ou `querySelector`, pode ser aplicar ao tipo errado de elemento. Experimente usar a regra @namespace (en-US) para distinguir os dois.

Attributes
----------

`download`
Experimental

 Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **no**

`href (en-US)`

 The URL or URL fragment the hyperlink points to.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **yes**

`hreflang`

 The human language of the URL or URL fragment that the hyperlink points to.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **yes**

`ping`
Experimental

 A space-separated list of URLs to which, when the hyperlink is followed, `POST` requests with the body `PING` will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see Navigator.sendBeacon() (en-US).
 *Value type*: **<list-of-URLs>** ; *Default value*: *none*; *Animatable*: **no**

`referrerpolicy`
Experimental

 Which referrer to send when fetching the URL.
 *Value type*: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; *Default value*: *none*; *Animatable*: **no**

`rel`
Experimental

 The relationship of the target object to the link object.
 *Value type*: **<list-of-Link-Types>** ; *Default value*: *none*; *Animatable*: **yes**

`target (en-US)`

 Where to display the linked URL.
 *Value type*: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; *Default value*: `_self`; *Animatable*: **yes**

`type`

 A MIME type (en-US) for the linked URL.
 *Value type*: **<string>** ; *Default value*: *none*; *Animatable*: **yes**

`xlink:href (en-US)`
Deprecated

 The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers.
 *Value type*: **<URL>** ; *Default value*: *none*; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id (en-US)`, `lang (en-US)`, `tabindex (en-US)`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes, Document element event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

XLink Attributes

Most notably: `xlink:title (en-US)`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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


missing-glyph - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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


svg - SVG: Gráficos Vetoriais Escaláveis

svg
===

O elemento `svg` é um contêiner que define um novo sistema de coordenadas e janela de visualização (en-US). É usado como o elemento mais externo dos documentos SVG, mas também pode ser usado para incorporar um fragmento SVG dentro de um documento SVG ou HTML.

**Nota:** The `xmlns` attribute is only required on the outermost `svg` element of *SVG documents*. It is unnecessary for inner `svg` elements or inside HTML documents.

Exemplo
-------
```

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

```html
<svg
 viewBox="0 0 300 100"
 xmlns="https://www.w3.org/2000/svg"
 stroke="red"
 fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>
```

Attributes
----------

`baseProfile (en-US)`
Deprecated

 The minimum SVG language profile that the document requires.
 *Value type*: **<string>** ; *Default value*: none; *Animatable*: **no**

`contentScriptType`
Deprecated

 The default scripting language used by the SVG fragment.
 *Value type*: **<string>** ; *Default value*: `application/ecmascript`; *Animatable*: **no**

`contentStyleType`
Deprecated

 The default style sheet language used by the SVG fragment.
 *Value type*: **<string>** ; *Default value*: `text/css`; *Animatable*: **no**

`height (en-US)`

 The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`preserveAspectRatio`

 How the `svg` fragment must be deformed if it is displayed with a different aspect ratio.
 *Value type*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *Default value*: `xMidYMid meet`; *Animatable*: **yes**

`version (en-US)`
Deprecated

 Which version of SVG is used for the inner content of the element.
 *Value type*: **<number>** ; *Default value*: none; *Animatable*: **no**

`viewBox (en-US)`

 The SVG viewport coordinates for the current SVG fragment.
 *Value type*: **<list-of-numbers>** ; *Default value*: none; *Animatable*: **yes**

`width`

 The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`x (en-US)`

 The displayed x coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y (en-US)`

 The displayed y coordinate of the svg container. No effect on outermost `svg` elements.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

**Nota:** Starting with SVG2, `x`, `y`, `width`, and `height` are *Geometry Properties*, meaning these attributes can also be used as CSS properties.

### Global attributes

Core Attributes (en-US)

Most notably: `id (en-US)`, `tabindex (en-US)`

Styling Attributes (en-US)
`class`, `style`
Conditional Processing Attributes (en-US)

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes (en-US), Graphical event attributes (en-US), Document event attributes (en-US), Document element event attributes (en-US)

Presentation Attributes (en-US)

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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


use - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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 - SVG: Gráficos Vetoriais Escaláveis

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


symbol - SVG: Gráficos Vetoriais Escaláveis

symbol
======

O elemento `symbol` é usado para definir um template que pode ser inicializado por um elemento `<use>`. A utilização de elementos `symbol` para gráficos que são usados várias vezes no mesmo documento acrescenta estrutura e semântica. Documentos que são ricos em estrutura podem ser renderizados graficamente, através da fala, ou do braille, e assim promover a acessibilidade. Note que o elemento `symbol` em si não é renderizado. Somente instâncias de um elemento `symbol` (por exemplo, uma referência à um elemento `symbol` feita por um elemento `<use>`) são renderizadas.

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>
  <!-- definição de symbol NUNCA é renderizada -->
  <symbol id="sym01" viewBox="0 0 150 110">
    <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
    <circle
 cx="90"
 cy="60"
 r="40"
 stroke-width="8"
 stroke="green"
 fill="white" />
  </symbol>

  <!-- renderização por elementos "use" -->
  <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
  <use xlink:href="#sym01" x="0" y="50" width="75" height="38" />
  <use xlink:href="#sym01" x="0" y="100" width="50" height="25" />
</svg>
```

Atributos
---------

### Atributos globais

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

* `preserveAspectRatio`
* `viewBox (en-US)`
Interface DOM
-------------

Esse elemento implementa a interface do `SVGSymbolElement`.

Compatibilidade
---------------

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

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

* `<marker>`
* `<pattern>`


rect - SVG: Gráficos Vetoriais Escaláveis

rect
====

O elemento **`<rect>`** é uma forma SVG básica (en-US) que desenha retângulos, definidos por sua posição, largura e altura. Os retângulos podem ter seus cantos arredondados.
```

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

```html
<svg viewBox="0 0 220 100" xmlns="https://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>
```

Attributes
----------

`x (en-US)`

 The x coordinate of the rect.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`y (en-US)`

 The y coordinate of the rect.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: `0`; *Animatable*: **yes**

`width`

 The width of the rect.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`height (en-US)`

 The height of the rect.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`rx (en-US)`

 The horizontal corner radius of the rect. Defaults to `ry` if it is specified.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`ry (en-US)`

 The vertical corner radius of the rect. Defaults to `rx` if it is specified.
 *Value type*: `auto`|**<length>**|**<percentage>** ; *Default value*: `auto`; *Animatable*: **yes**

`pathLength (en-US)`

 The total length of the rectangle's perimeter, in user units.
 *Value type*: **<number>** ; *Default value*: *none*; *Animatable*: **yes**

**Nota:** Starting with SVG2, `x`, `y`, `width`, `height`, `rx` and `ry` are *Geometry Properties*, meaning those attributes can also be used as CSS properties for that element.

### Global attributes

Core Attributes

Most notably: `id (en-US)`, `tabindex (en-US)`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

Aria Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

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

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

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

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

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

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

See also
--------

* Other basic SVG shapes: `<circle>`, `<ellipse>`, `<line>`, **`<polygon>`**, `<polyline>`


marker - SVG: Gráficos Vetoriais Escaláveis

marker
======

O elemento `marker` define os gráficos quem devem ser usados para desenhar setas or polymarkers em um determinado elemento `<path>`, `<line>`, `<polyline>` ou `<polygon>`.

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

» marker.svg

Atributos
---------

### Atributos globais

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

* `markerUnits (en-US)`
* `refX (en-US)`
* `refY (en-US)`
* `markerWidth (en-US)`
* `markerHeight (en-US)`
* `orient (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGMarkerElement`.

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

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


animateTransform - SVG: Gráficos Vetoriais Escaláveis

animateTransform
================

O elemento `animateTransform` anima a transformação de um atributo em um elemento alvo, permitindo assim as animações controlarem a movimentação, escala, rotação e/ou inclinação.

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

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

Exemplo
-------

```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="https://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="https://www.w3.org/1999/xlink">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
 attributeName="transform"
 attributeType="XML"
 type="rotate"
 from="0 60 70"
 to="360 60 70"
 dur="10s"
 repeatCount="indefinite" />
  </polygon>
</svg>
```

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 »
* Atributos de valor de animação »
* Atributos de animação adicionais »
* `externalResourcesRequired`
### Atributos específicos

* `by (en-US)`
* `from (en-US)`
* `to (en-US)`
* `type (en-US)`
Interface DOM
-------------

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


animateMotion - SVG: Gráficos Vetoriais Escaláveis

animateMotion
=============

O elemento `animateMotion` interfere em uma elemento referenciado para se mover ao longo de uma trajetória de movimento.

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

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

Exemplo
-------

» animateMotion.svg

Atributos
---------

### Atributos globais

* Atributos de processamento condicional (en-US) »
* Atributos principais (en-US) »
* Atributos de eventos da animação (en-US) »
* Atributos XLink (en-US) »
* Atributos de cronometragem da animação (en-US) »
* Atributos de valor de animação (en-US) »
* Atributos de animação adicionais (en-US) »
* `externalResourcesRequired`
### Atributos específicos

* `calcMode (en-US)`
* `path (en-US)`
* `keyPoints (en-US)`
* `rotate (en-US)`
* `origin (en-US)`
Interface DOM
-------------

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

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

* `<mpath>`


ellipse - SVG: Gráficos Vetoriais Escaláveis

ellipse
=======

O elemento `ellipse` é uma forma básica do SVG, utilizado para criar elipses baseado em uma coordenada central, tanto no raio x quanto no y.

As elipses são incapazes de especificar a orientação exatada dela mesma (se, por exemplo, você quiser desenha uma elipse inclinada a um ângulo de 45 graus), mas poderá ser rotacionada utilizando o atributo `transform (en-US)`.

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

» ellipse.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)`
* `rx (en-US)`
* `ry (en-US)`
Interface DOM
-------------

Este elemento implementa a interface do `SVGEllipseElement`.

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

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

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

* `<circle>`


Introdução a progressive web apps

Introdução a progressive web apps
=================================

* Menu: Progressive (en-US)
* Próxima  (en-US)

Este artigo fornece uma intrução as Progressive Web Apps (PWAs), explicando o que são e quais vantagens elas trazem em relação ao desenvolvimento de aplicações web comuns.

O que é uma Progressive Web App?
--------------------------------

As PWAs são aplicativos web desenvolvidos usando várias tecnologias e padrões específicos para permitir que eles aproveitem os recursos da web e dos aplicativos nativos.

Por exemplo, as aplicações web são mais detectáveis - é muito mais fácil e rápido visitar um site do que instalar um aplicativo, e você também pode compartilhar aplicações web por meio de um link.

Por outro lado, os aplicativos nativos são melhor integrados ao sistema operacional e, portanto, oferecem uma experiência melhor para os usuários. Você pode instalar um aplicativo nativo para funcionar off-line e os usuários adoram tocar nos ícones da tela inicial para acessar facilmente os aplicativos favoritos, em vez de acessá-lo usando um navegador.

As PWAs nos dão a capacidade de criar aplicações web com essas mesmas vantagens.

Isso não é um conceito novo - essas ideias foram pensadas muitas vezes na plataforma web com várias abordagens no passado. O aprimoramento progressivo e o design responsivo já nos permitem criar websites otimizados para dispositivos móveis. Trabalhar offline e instalar aplicativos foi possível no ecossistema Firefox OS há alguns anos.

PWAs, no entanto, fornecem tudo isso e muito mais, sem se livrar de qualquer um dos recursos existentes que tornam a web excelente.

O que torna uma aplicação web em uma PWA?
-----------------------------------------

Como sugerimos acima, as PWAs não são criadas com uma única tecnologia. Elas representam uma nova filosofia para a criação de aplicações Web, envolvendo alguns padrões específicos, APIs e outros recursos. Não é tão óbvio saber se uma aplicação web é uma PWA ou não, à primeira vista. Uma aplicação Web pode ser considerada uma PWA quando atende a determinados requisitos ou implementa um conjunto de recursos específicos: funciona offline, é instalável, é fácil de sincronizar, pode enviar notificações push etc.

Além disso, existem ferramentas para medir a integridade de uma aplicação Web em porcentagens. (Lighthouse é atualmente o mais popular.) Ao implementar várias vantagens tecnológicas, podemos fazer uma aplicação mais progressiva, terminando assim com uma pontuação mais alta no Lighthouse. Mas este é apenas um indicador aproximado.

Existem alguns princípios que uma aplicação Web deve tentar seguir para serem identificadas como uma PWA. Deveria ser:

* Detectável, o seu conteúdo deve poder ser encontrado por mecanismos de busca na Web.
* Instalável, deve poder ser acessada a partir da tela inicial do dispositivo.
* Linkavel, você deve poder compartilhar simplesmente enviando a sua URL.
* Independente de rede, deve funcionar offline e ou com uma conexão fraca.
* Progressiva, deve funcionar em um nível básico e navegadores antigos e em um nível completo nos mais modernos.
* Re-engajável, deve ser possível enviar notificações.
* Responsiva, deve ser utilizável em qualquer dispositivo com uma tela e em navegadores — telefones móveis, tablets, laptops, TVs, geladeiras, etc.
* Segura, a conexão deve ser segura contra terceiros que tentarem acessar dados confidenciais.
### Is it worth doing all that?

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

* A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
* The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
* A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
* Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.

There are many success stories of companies trying the PWA route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a result. The website PWA Stats shares many case studies which indiciate these benefits.

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

You can even generate PWAs online using the PWABuilder website.

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

Browser support
---------------

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

Other features such as Web App Manifest, Push, Notifications (en-US), and Add to Home Screen (en-US) functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

An example application
----------------------

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we'll be looking at the structure of our example app.

* Menu: Progressive (en-US)
* Próxima  (en-US)


Deixando seu site seguro - Segurança Web

Deixando seu site seguro
========================

Há várias coisas que você pode fazer para ajudar na segurança do seu site. Esse artigo oferece uma série de sugestões, bem como links para outros artigos fornecendo informações mais úteis.

**Nota:** Esse artigo é um trabalho em progresso e não está nem completo nem as sugestões a seguir irão garantir que seu site será completamente seguro.

Segurança da informação do usuário
----------------------------------

Como desligar o formulário de preenchimento automático

Campos de formulário têm preenchimento automático no Gecko, isto é, seus valores podem ser lembrados e automaticamente trazidos de volta na próxima vez que o usuário visitar seu site. Para certos tipos de dados, você pode querer desativar essa funcionalidade.

Privacidade e o seletor :visited

Esse artigo discute mudanças feitas no método `getComputedStyle()` que eliminam a habilidade de sites maliciosos de descobrir o histórico do navegador de usuários.

Segurança de conteúdo
---------------------

Configurar corretamente os tipos de MIME do servidor

Há várias formas para que tipos incorretos de MIME causem potenciais problemas de segurança no seu site. Esse artigo explica alguns deles e mostra como configurar seu servidor para fornecer arquivos com os tipos corretos de MIME.

HTTP Strict Transport Security

O cabeçalho HTTP `Strict-Transport-Security:` permite a um site especificar que somente pode ser acessado usando HTTPS.

Controle de acesso HTTP

O padrão *Cross-Origin Resource Sharing* fornece uma forma de especificar qual conteúdo pode ser carregado de outros domínios. Você pode usar isso para prevenir seu site de ser usado impropriamente; além disso, você pode usá-lo para estabelecer recursos que outros sites são expressamente permitidos de usar.

Política de Segurança de Conteúdo

Uma camada de segurança adicionada que ajuda a detectar e evitar certos tipos de ataques, incluindo *Cross Site Scripting* (XSS) e ataques de injeção de dados. Esses ataques são usado para tudo, desde roubo de dados até desfiguração de página ou distribuição de malware.

O cabeçalho de resposta X-FRAME-OPTIONS (en-US)

O cabeçalho de resposta HTTP `X-Frame-Options:` pode ser usado para indicar se um navegador deve ser autorizado a renderizar uma página ou não em um elemento `<frame>` (en-US). Sites podem usar isso para evitar ataques do tipo *clickjacking*, garantindo que seus conteúdos não estão embutidos em outros sites.

Deixando seu site seguro usando o Htaccess

Aprenda a melhor maneira e quase todos os truques para deixar seu site seguro usando o arquivo .htaccess. Você pode colocar endereços IPs em *blacklists*, restringir o acesso a certas áreas do website, proteger diferentes arquivos, proteger contra *hotlink* de imagens e muito mais.

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

* Projeto Open Web Application Security (OWASP)


How to Turn Off Form Autocompletion - Segurança Web

How to Turn Off Form Autocompletion
===================================

Este artigo explica como um Site da Web pode desabilitar a função autocompletar de campos de formulário.

Por padrão, navegadores lembram da informação que o usuário envia através de campos de formulário em Sites da Web. Isto habilita o navegador a oferecer termos para autocompletar (ao usuário iniciar a digitação o navegador oferece sugestões para campos que o usuário tenha iniciado a digitação) ou auto preenchimento (o navegador pré popula os campos ao carregar a página.

Estas funcionalidades de autocompletar podem gerar para os usuários preocupações quanto à privacidade. Por isso os navegadores permitem aos usuários que desabilitem essas funcionalidades, embora, por padrão, elas estejam habilitadas. Entretanto, alguns dados enviados em formulários não serão úteis no futuro (um número PIN, por exemplo), ou mesmo contém informações sensíveis (um número de documento ou um código de segurança de cartão de crédito, por exemplo). Um website deverá preferir que o navegador não se lembre de valores para estes tipos de campos, mesmo que a funcionalidade de autocompletar dos navegadores esteja ativa.

Desabilitando o auto completar
------------------------------

Para desabilitar o auto completar nos formulários, o Web Site precisa setar o atributo `autocomplete` para "off":

```html
autocomplete="off"
```

O site pode fazer isso para um formulário inteiro ou para elementos input especificos do formulário:

```html
<form method="post" action="/form" autocomplete="off">[...]</form>
```

```html
<form method="post" action="/form">
  [...]
  <div>
    <label for="cc">Credit card:</label>
    <input type="text" id="cc" name="cc" autocomplete="off" />
  </div>
</form>
```

O atributo `autocomplete="off"` tem dois efeitos:

* Dirá para o navegador parar de salvar dados inseridos pelo usuário em formulários para um futuro *autocomplete* (Isso varia de navegador para navegador).
* Isso fará o navegador parar de fazer caching dos dados do formulário na *session history* do navegador. Quando um dado é armazenado no *cache* no *session history*, os dados preenchidos pelo usuário serão mostrados para ele no caso dele submeter o formulário e clicar no botão Voltar e retornar à página original do formulário.
O atributo autocomplete e campos de login
-----------------------------------------

Navegadores modernos implementam gerenciamento de senhas integrado: quando o usuário preenche um usuário e senha para um site, o navegador se oferece para lembrar dos dados para o usuário. Quando o usuário visita o site novamente, o navegador preenche os campos de login automaticamente conforme os valores salvos por ele..

Os navegadores também permitem ao usuário selecionar uma senha mestra para que os dados salvos sejam criptografados.

Mesmo sem uma senha mestra, o gerenciamento de senhas dentro do navegador é geralmente vista como um ganho de segurança. Como os usuários não precisam se lembrar das senhas que o navegador salva para eles, eles podem escolher senhas mais fortes do que geralmente escolheriam.

Por esta razão, muitos navegadores modernos não suportam `autocomplete="off"` para campos de login.

* se um site utiliza `autocomplete="off"` para um `form` (en-US), e o formulário inclui campos de usuário e senha, então o navegador ainda assim se oferece para salvar os dados de login, e se o usuário aceitar, o navegador vai preencher estes dados automaticamente na próxima vez que o usuário visita a página.
* se um site utiliza `autocomplete="off"` para campos `input de usuário e senha` , então o navegador ainda assim se oferece para salvar os dados de login, e se o usuário aceitar, o navegador vai preencher estes dados automaticamente na próxima vez que o usuário visitar a página.

Este comportamento existe no Firefox (desde a versão 38), Google Chrome (desde a versão 34), e Internet Explorer (desde a versão 11).


Uma típica sessão HTTP - HTTP

Uma típica sessão HTTP
======================

Em protocolos cliente-servidor, como o HTTP, sessões consistem de três partes:

1. O cliente estabelece uma conexão TCP (ou a conexão apropriada caso o protocolo TCP não seja o protocolo usado na camada de transporte).
2. O cliente envia sua requisição, e então aguarda por uma resposta.
3. O servidor processa a requisição, enviando de volta sua resposta, fornecendo um "status code" (código de status), e os dados apropriados.

Na versão HTTP/1.1 a conexão não é mais fechada após a terceira etapa completar-se, mas é garantida ao cliente uma nova requisição, implicando na possibilidade da segunda e terceira etapa serem novamente realizadas quantas vezes forem desejadas.

Estabelecendo uma conexão
-------------------------

Em protocolos cliente-servidor é o cliente quem estabelece as conexões. Abrir uma conexão HTTP significa iniciar uma conexão na camada de transporte subjacente, geralmente uma conexão usando o protocolo TCP.

 Usando o protocolo TCP, a porta padrão para um servidor HTTP em um computador é a porta 80, porém outras portas podem ser utilizadas, como a 8000 ou 8080.
 A URL da página a se requisitar contém o nome do domínio e o número da porta, embora este último pode ser omitido caso a porta seja a 80. Leia Identificando recursos na Web para mais informações.

**Nota:** O modelo cliente-servidor não permite o servidor enviar dados ao cliente sem uma requisição explícita. Para contornar esse problema, os desenvolvedores Web usam várias técnicas: executar ping no servidor periodicamente por meio das APIs `XMLHTTPRequest`, `Fetch`, usando a WebSockets API ou protocolos semelhantes.

Enviando uma requisição de cliente
----------------------------------

Depois que a conexão é estabelecida, o *user-agent* pode enviar a solicitação (um *user-agent* normalmente é um navegador Web, podendo ser também qualquer outra coisa, como um *crawler*, por exemplo). Uma solicitação de cliente consiste em diretivas de texto, separadas por quebras de linhas (CRLF), divididas em três blocos:

1. A primeira linha contém um método de requisição seguido por seus parâmetros:
    * o caminho do documento, ou seja, uma URL absoluta sem o protocolo ou nome de domínio
    * a versão do protocolo HTTP
2. As linhas subsequentes representam um cabeçalho HTTP, fornecendo ao servidor informações sobre o tipo de dado apropriado (por exemplo, qual o idioma, quais os tipos MIME) ou outros dados que alteram seu comportamento (por exemplo, não enviando uma resposta se já estiver em cache). Esses cabeçalhos HTTP formam um bloco que termina com uma linha vazia.
3. O bloco final é um bloco de dados opcional, que pode conter dados adicionais usados principalmente pelo método POST.
### Exemplos de requisições

Buscando a página raiz do developer.mozilla.org (http://developer.mozilla.org/), e dizendo ao servidor que o *user-agent* preferiria a página em francês, se possível:
```

GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr
```

Observe que a linha final vazia separa o bloco de dados do bloco de cabeçalho. Como não há nenhum `Content-Length` fornecido em um cabeçalho HTTP, esse bloco de dados é apresentado vazio, marcando o final dos cabeçalhos, permitindo que o servidor processe a solicitação no momento em que recebe essa linha vazia.

Por exemplo, enviando o resultado de um formulário::
```

POST /contact_form.php HTTP/1.1
Host: developer.mozilla.org
Content-Length: 64
Content-Type: application/x-www-form-urlencoded

name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue
```

### Métodos de requisição

HTTP define um conjunto de métodos de requisição indicando a ação desejada a ser executada em um recurso. Embora eles também possam ser substantivos, essas solicitações são às vezes chamadas de verbos HTTP. As requisições mais comuns são `GET` e `POST`:

* O método `GET` solicita uma representação de dados do recurso especificado. Requisições usando GET só devem retornar dados.
* O método `POST` envia dados para um servidor para que possa alterar seu estado. Esse é o método geralmente usado para formulários HTML.
Estrutura de uma resposta do servidor
-------------------------------------

Depois que o agente conectado envia sua solicitação, esta é processada pelo servidor, que por fim, retorna uma resposta. Semelhante a uma requisição do cliente, uma resposta do servidor é formada por diretivas de texto, separadas por quebras de linhas, embora divididas em três blocos:

1. A primeira linha, a linha de status, consiste em uma confirmação da versão HTTP usada, seguida por uma requisição de status (e seu breve significado em texto legível por humanos).
2. As linhas subsequentes representam cabeçalhos HTTP específicos, fornecendo ao cliente informações sobre os dados enviados (por exemplo, tipo, tamanho dos dados, algoritmo de compressão usado, dicas sobre armazenamento em cache). Da mesma forma que o bloco de cabeçalhos HTTP para uma requisição do cliente, esses cabeçalhos HTTP formam um bloco que termina com uma linha vazia.
3. O bloco final é um bloco de dados, que contém os dados opcionais.
### Exemplo de respostas

Resposta de página da web bem-sucedida:
```

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html... (aqui vem os 29769 bytes da página web solicitada)
```

Notificação de que o recurso solicitado foi movido permanentemente:
```

HTTP/1.1 301 Moved Permanently
Server: Apache/2.2.3 (Red Hat)
Content-Type: text/html; charset=iso-8859-1
Date: Sat, 09 Oct 2010 14:30:24 GMT
Location: https://developer.mozilla.org/ (this is the new link to the resource; it is expected that the user-agent will fetch it)
Keep-Alive: timeout=15, max=98
Accept-Ranges: bytes
Via: Moz-Cache-zlb05
Connection: Keep-Alive
X-Cache-Info: caching
X-Cache-Info: caching
Content-Length: 325 (the content contains a default page to display if the user-agent is not able to follow the link)

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
</head><body>
<h1>Moved Permanently</h1>
<p>The document has moved <a href="https://developer.mozilla.org/">here</a>.</p>
<hr>
<address>Apache/2.2.3 (Red Hat) Server at developer.mozilla.org Port 80</address>
</body></html>
```

Notificação de que o recurso solicitado não existe:
```

HTTP/1.1 404 Not Found
Date: Sat, 09 Oct 2010 14:33:02 GMT
Server: Apache
Last-Modified: Tue, 01 May 2007 14:24:39 GMT
ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
Accept-Ranges: bytes
Content-Length: 10732
Content-Type: text/html

<!DOCTYPE html... (contém uma página customizada do site ajudando o usuário a localizar o recurso ausente)
```

### Códigos de status de resposta

Códigos de status de respostas HTTP (HTTP *response status codes*) indicam se uma requisição HTTP específica foi concluída com sucesso. As respostas são agrupadas em cinco classes: respostas informativas, respostas bem-sucedidas, redirecionamentos, erros de clientes e erros de servidores.

* `200`: *OK*. A requisição foi bem sucedida.
* `301`: *Moved Permanently*. Esse código de resposta significa que o URI do recurso solicitado foi alterado.
* `404`: *Not Found*. O servidor não pode encontrar o recurso solicitado.
Veja também
-----------

* Identificando recursos na web
* Cabeçalhos HTTP
* Métodos de requisição HTTP
* HTTP response status codes


Negociação de conteúdo - HTTP

Negociação de conteúdo
======================

No HTTP, ***negociação de conteúdo*** é o mecanismo que é usado para servir diferentesrepresentações de um recurso no mesmo URI, de forma que o agente do usuáriopossa especificar qual é a melhor representação adequada ao usuário(por exemplo, qual idioma de um documento, qual formato de imagem ouqual codificação de conteúdo)Princípios da negociação do conteúdo
------------------------------------

Um documento específico é denominado *recurso*. Quando um cliente quer obtê-lo, ele o requisita usando sua URL. O servidor usa esta URL para escolherum das variantes que ele provê - cada variante sendo chamada de *representação* - e retorna essa representação específica para o cliente. O recurso de forma geral, bem como suas representações, têm uma URL específica. Como uma representação específica é escolhida quando um recurso é chamado é determinado pela *negociação de conteúdo* e existem algumas maneiras de negociar entre entre o cliente e o servidor.

![](/pt-BR/docs/Web/HTTP/Content_negotiation/httpnego.png)

A determinação da representação mais adequada é feita através de um dos dois mecanismos:

* Cabeçalhos HTTP específicos pelo cliente (*negociação com base no servidor* ou *negociação pró-ativa*)
* Os códigos de resposta do servidor {HTTPStatus("300")}} (Múltiplas escolhas) or `406` (Não aceitável) (*negociação baseada no agente* ou *negociação reativa*), que são usados como mecanimos de reserva (*fallback*).

Ao longo dos anos, outras propostas de negociação de conteúdo, como *negociação de conteúdo transparente* e o cabeçalho `Alternates` foram propostas. Elas falharam em ganhar apoio e foram abandonadas.

Negociação baseada no servidor
------------------------------

Na *negociação baseada no servidor*, ou negociação proativa, o navegador (ou outro tipo de agente do usuário) envia diversos cabeçalhos HTTP junto com a URL. Estes cabeçalhos descrevem a escolha preferida do usuário. O servidor usa-os como sugestões e um algoritmo intero escolhe o melhor conteúdo para ser servido ao usuário. O algoritmo é específico para cada servidor e não é definido no padrão. Veja, por-exemplo, o algoritmo de negociação do Apache 2.2.

![](/pt-BR/docs/Web/HTTP/Content_negotiation/httpnegoserver.png)

O padrão HTTP/1.1 define uma lista de cabeçalhos-padrão que iniciam a negociação baseada no servidor (`Accept`, `Accept-Charset`, `Accept-Encoding`, `Accept-Language`). Apesar do `User-Agent` não estar formalmente na lista, ele é, às vezes, também usado para enviar uma representação específica do recurso requisitado, apesar disso não ser considerado uma boa prática. O servidor usa o cabeçalho `Vary` para indicar quais cebeçalhos de fato foram usados na negociação do conteúdo (ou, mais precisamente, nos cabeçahos de resposta associados), de forma que caches possam funcionar de forma otimizada.

Além desses, existe uma proposta experimental para adicionar mais cabeçalhos à lista dos disponíveis, as chamadas *sugestões do cliente*. Sugestões do cliente indicam qual é o tipo do dispositivo em que o agente do usuário roda (por-exemplo, se é um computador de mesa ou um dispositivo móvel).

Mesmo sendo a negociação com base no servidor a forma mais comum de concordar com uma representação específica de um recurso, ela ainda assim tem algumas desvantagens:

* O servidor não tem conhecimento total sobre o navegador. Mesmo com a extensão das Sugestões do cliente, o servidor continua sem saber completamente quais são as capacidades do navegador. Diferente da negociação de conteúdo reativa, onde o cliente faz uma escolha, a escolha do servidor é, até certo ponto, arbitrária.
* A informação do cliente é bastante verbosa (a compressão de cabeçalhos do HTTP/2 mitiga este problema) e um risco à privacidade (impressão digital HTTP).
* Como diversas representações de um recurso são enviadas, caches compartilhados são menos eficiantes e, implementações de servidor, mais complexas.
### The `Accept` header

The `Accept` header lists the MIME types of media resources that the agent is willing to process. It is comma-separated lists of MIME types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different MIME types.

The `Accept` header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an `<img>`, `<video>` or `<audio>` element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of default values for common browsers is available.

### The `Accept-CH` header
Experimental

**Nota:** This is part of an **experimental** technology called *Client Hints*. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.

The experimental `Accept-CH` lists configuration data that can be used by the server to select an appropriate response. Valid values are:

| Value | Meaning |
| --- | --- |
| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. |
| `DPR` | Indicates the client's device pixel ratio. |
| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. |
| `Width` | Indicates the resource width in physical pixels (in other words the intrinsic size of an image). |

### The `Accept-Charset` header

The `Accept-Charset` header indicates to the server what kinds of character encodings are understood by the user-agent. Traditionally, it was set to a different value for each locale for the browser, like `ISO-8859-1,utf-8;q=0.7,*;q=0.7` for a Western European locale.

With UTF-8 now being well-supported, being the preferred way of encoding characters, and to guarantee better privacy through less configuration-based entropy, browsers omit the `Accept-Charset` header: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 and Chrome 27 have abandoned this header.

### The `Accept-CH-Lifetime` header

**Nota:** This is part of an **experimental** technology called *Client Hints* and is only available in Chrome 61 or later.

The `Accept-CH-Lifetime` header is used with the `Device-Memory` value of the `Accept-CH` header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional.

### The `Accept-Encoding` header

The `Accept-Encoding` header defines the acceptable content-encoding (supported compressions). The value is a q-factor list (e.g.: `br, gzip;q=0.8`) that indicates the priority of the encoding values. The default value `identity` is at the lowest priority (unless otherwise declared).

Compressing HTTP messages is one of the most important ways to improve the performance of a Web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.

### The `Accept-Language` header

The `Accept-Language` header is used to indicate the language preference of the user. It is a list of values with quality factors (like: `"de, en;q=0.7`"). A default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences.

Due to the configuration-based entropy increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a Web site cannot trust this value to reflect the actual wish of the user. Site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience:

* They should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site. Most user-agents provide a default value for the `Accept-Language` header, adapted to the user interface language and end users often do not modify it, either by not knowing how, or by not being able to do it, as in an Internet café for instance.
* Once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. In other words, only entry pages of a site should select the proper language using this header.
### The `User-Agent` header

**Nota:** Though there are legitimate uses of this header for selecting content, it is considered bad practice (en-US) to rely on it to define what features are supported by the user agent.

The `User-Agent` header identifies the browser sending the request. This string may contain a space-separated list of *product tokens* and *comments*.

A *product token* is a name followed by a '`/`' and a version number, like `Firefox/4.0.1`. There may be as many of them as the user-agent wants. A *comment* is a free string delimited by parentheses. Obviously parentheses cannot be used in that string. The inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by '`;`'.

### The `Vary` response header

In opposition to the previous `Accept-*` headers which are sent by the client, the `Vary` HTTP header is sent by the web server in its response. It indicates the list of headers used by the server during the server-driven content negotiation phase. The header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.

The special value of '`*`' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content.

The `Vary` header was added in the version 1.1 of HTTP and is necessary in order to allow caches to work appropriately. A cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. That way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. Obviously, the wildcard '`*`' prevents caching from occurring, as the cache cannot know what element is behind it.

Agent-driven negotiation
------------------------

Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern.

From the beginnings of HTTP, the protocol allowed another negotiation type: *agent-driven negotiation* or *reactive negotiation*. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.

![](/pt-BR/docs/Web/HTTP/Content_negotiation/httpnego3.png)

Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the *server-driven negotiation*, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.


Mensagens HTTP - HTTP

Mensagens HTTP
==============

Dados são trocados entre servidor e cliente por meio de mensagens HTTP. Há dois tipos de mensagens: *requisições* (requests) enviadas pelo cliente para disparar uma ação no servidor, e *respostas* (responses), a réplica do servidor.

Mensagens HTTP são compostas de informação textual codificada em ASCII, e se espalham por multiplas linhas. Em HTTP/1.1, e versões anteriores do protocolo, estas mensagens eram abertamente enviadas através da conexão. Em HTTP/2, a mensagem antes legível por humanos é agora dividida em quadros HTTP, resultando em otimização e melhora de desempenho.

Desenvolvedores Web, ou webmasters, raramente lidam com essas mensagens textuais diretamente: um programa, um navegador, um proxy, ou um servidor Web, executam essa ação. Eles proveem mensagens HTTP por meio de arquivos de configuração (para proxys ou servidores), APIs (para navegadores) ou outras interfaces.

![From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.](/pt-BR/docs/Web/HTTP/Messages/httpmsg2.png)

O mecanismo de enquadramento binário foi projetado de modo a não requerer qualquer alteração das APIs ou arquivos de configuração aplicados: ele é transparente para o usuário.

Requisições e respostas HTTP compartilham estrutura similar e são compostas de:

1. Uma *linha inicial* (*start-line)* que descreve as requisições a serem implementadas, ou seu status de sucesso ou falha. Esta linha inicial é sempre uma única.
2. Um conjunto opcional de cabeçalhos HTTP especificando a requisição, ou descrevendo o corpo incluso na mensagem.
3. Uma linha em branco (*empty line*) indicando que toda meta-informação para a requisição já foi enviada.
4. Um *corpo* (*body*) contendo dados associados à requisição (como o conteúdo de um formulário HTML), ou o documento associado à resposta. A presença do corpo e seu tamanho são especificados pela linha inicial e os cabeçalhos HTTP.

A linha inicial e os cabeçalhos HTTP da mensagem HTTP são conjuntamente chamados de *cabeça* (*head*) da requisição, enquanto o que ela carrega, a sua carga, é conhecida como corpo.

![Requests and responses share a common structure in HTTP](/pt-BR/docs/Web/HTTP/Messages/httpmsgstructure2.png)

Requisições HTTP
----------------

### Linha inicial

Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Suas linhas iniciais contêm três elementos:

1. Um *método HTTP*, um verbo (como `GET`, `PUT` ou `POST`) ou um nome (como `HEAD` ou `OPTIONS`), que descrevem a ação a ser executada. Por exemplo, `GET` indica que um recurso deve ser obtido ou `POST` significa que dados são inseridos no servidor (criando ou modificando um recurso, ou gerando um documento temporário para mandar de volta).
2. O *alvo da requisição*, normalmente um URL, ou o caminho absoluto do protocolo, porta e domínio são em geral caracterizados pelo contexto da requisição. O formato deste alvo varia conforme o método HTTP. Pode ser
    * Um caminho absoluto, seguido de um `'?'` e o texto da consulta. Esta é a forma mais comum, conhecida como a *forma original*, e é usada com os métodos `GET`, `POST`, `HEAD`, e `OPTIONS`.
     `POST / HTTP/1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0`
    * Uma URL completa, conhecida como a *forma absoluta*, usada principalmente com `GET` quando conectado a um proxy.
     `GET http://developer.mozilla.org/pt-BR/docs/Web/HTTP/Messages HTTP/1.1`
    * O componente autoridade de um URL, que consiste no nome do domínio e opcionalmente uma porta (prefixada por `':'`), chamada de *forma autoridade*. Só usada com `CONNECT` ao estabelecer um túnel HTTP.
     `CONNECT developer.mozilla.org:80 HTTP/1.1`
    * A *forma asterisco*, um simples asterisco (`'*'`), usada com `OPTIONS`. Representa o servidor como um todo.
     `OPTIONS * HTTP/1.1`
3. A *versão HTTP*, que define a estrutura do restante da mensagem, atuando como um indicador da versão esperada para uso na resposta.
### Cabeçalhos

Cabeçalhos HTTP de uma requisição seguem a mesma estrutura básica de um cabeçalho HTTP: uma cadeia de caracteres insensível à caixa seguida de dois pontos (`':'`) e um valor cuja estrutura depende do cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha, que pode ser bem grande.

Há numerosos cabeçalhos de requisição disponíveis. Eles podem ser divididos em vários grupos:

* *Cabeçalhos gerais*, como `Via`, se aplicam à mensagem como um todo.
* *Cabeçalhos de requisição*, como `User-Agent`, `Accept-Type`, modificam a requisição, especificando-a mais (como `Accept-Language`), dando-a contexto (como `Referer`), ou restringindo-a condicionalmente (como `If-None`).
* *Cabeçalhos de entidade*, como `Content-Length` que se aplicam ao corpo da mensagem. Obviamente este cabeçalho não será transmitido se não houver corpo na requisição.

![Example of headers in an HTTP request](/pt-BR/docs/Web/HTTP/Messages/http_request_headers2.png)

### Corpo

A parte final da requisição é o corpo. Nem todas as requisições tem um: as que pegam recursos, como `GET`, `HEAD`, DELETE, ou OPTIONS, usualmente não precisam de um. Algumas requisições enviam dados ao servidor a fim de atualizá-lo: é o caso frequente de requisições `POST` (contendo dados de formulário HTML).

Corpos podem ser divididos, a grosso modo, em duas categorias:

* Corpos de recurso-simples, consistindo em um único arquivo, definido pelos dois cabeçalhos: `Content-Type` e `Content-Length`.
* Corpos de recurso-múltiplo, consistindo em um corpo de múltiplas partes, cada uma contendo uma porção diferente de informação. Este é tipicamente associado à Formulários HTML.
Respostas HTTP
--------------

### Linha de status

A linha inicial de uma resposta HTTP, chamada de *linha de status*, contém a seguinte informação:

1. A versão do *protocolo*, normalmente `HTTP/1.1`.
2. Um *código de status*, indicando o sucesso ou falha da requisição. Códigos de status comuns são `200`, `404`, ou `302`
3. Um texto de status. Uma descrição textual breve, puramente informativa, do código de status a fim de auxiliar o entendimento da mensagem HTTP por humanos.

Uma linha de status típica se parece com: `HTTP/1.1 404 Not Found.`

### Cabeçalhos

Cabeçalhos HTTP para respostas seguem a mesma estrutura de qualquer outro cabeçalho: uma cadeia de caracteres insensível à caixa seguida de dois pontos (`':'`) e um valor cuja estrutura depende do tipo de cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha.

Há numerosos cabeçalhos de resposta disponíveis. Eles podem ser divididos em vários grupos:

* *Cabeçalhos gerais*, como `Via`, aplicam-se à toda mensagem.
* *Cabeçalhos de resposta*, como `Vary` e `Accept-Ranges`, dão informação adicional sobre o servidor, que não cabe na linha de status.
* *Cabeçalhos de entidade*, como `Content-Length`, aplicam-se ao corpo da resposta. Obviamente este cabeçalho não será transmitido se não houver corpo na resposta.

![Example of headers in an HTTP response](/pt-BR/docs/Web/HTTP/Messages/http_response_headers2.png)

### Corpo

A última parte de uma resposta é o corpo. Nem toda resposta tem um: aquelas com código de status `201` ou `204` normalmente não tem.

Corpos podem ser divididos, a grosso modo, em três categorias:

* Corpos de recurso simples que consistem em um único arquivo de tamanho conhecido, definido pelos dois cabeçalhos: `Content-Type` e `Content-Length`.
* Corpos de recurso simples que consistem em um único arquivo de tamanho desconhecido, codificado aos pedaços com `Transfer-Encoding` ajustado para `chunked`.
* Corpos de recurso múltiplo, que consiste em um corpo com múltiplas partes, cada uma contendo diferentes seções de informação. Estes são relativamente raros.
Quadros HTTP/2
--------------

Mensagens HTTP/1.x têm algumas desvantagens quanto ao desempenho:

* Os cabeçalhos, ao contrário dos corpos, não são compactados.
* Cabeçalhos com frequência são similares entre uma mensagem e a seguinte, ainda assim são repetidos entre conexões.
* Nenhuma multiplexação pode ser feita. É necessário abrir várias conexões no mesmo servidor: e conexões TCP quentes são mais eficientes que frias.

HTTP/2 introduz um passo extra: ele divide mensagens HTTP/1.x em quadros que são embutidos em um fluxo. Quadros de dados e de cabeçalho são separados, isto permite a compressão do cabeçalho. Muitos fluxos podem ser conjugados, um processo chamado de multiplexação, permitindo mais eficiência nas conexões TCP subjacentes.

![HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.](/pt-BR/docs/Web/HTTP/Messages/binary_framing2.png)
```

Connection
```

Quadros HTTP agora são transparentes aos desenvolvedores web. Isso é um passo adicional no HTTP/2, entre mensagens HTTP/1.1 e o protocolo de transporte subjacente. Nenhuma mudança é necessária nas API usadas pelo desenvolvedor web para utilizar quadros; quando disponível tanto no navegador quanto no servidor, HTTP/2 é ativado e usado.

Conclusão
---------

Mensagens HTTP são a chave ao usar HTTP; sua estrutura é simples e elas são altamente extensíveis. O mecanismo de enquadramento do HTTP/2 adiciona uma nova camada intermediária entre a sintaxe HTTP/1.x e o protocolo de transporte subjacente, sem modificá-lo fundamentalmente: construído sobre mecanismos provados.


Redirecionamentos em HTTP - HTTP

Redirecionamentos em HTTP
=========================

Redirecionamento de URL, também conhecido como encaminhamento de URL, é uma técnica que à uma página, formulário ou uma aplicação web inteira, mais de um endereço de URL. HTTP fornece uma espécie especial de respostas, ***HTTP redirects***, executar esta operação é utilizada para vários objetivos: redirecionamento temporário enquanto está sendo feita a manutenção do web site, redirecionamento permanente para manter links externos funcionando após alterações na arquitetura do web site, páginas de progresso enquanto é feito o envio de um arquivo, e assim por diante.

Princípio
---------

Em HTTP, um redirecionamento é acionado pelo servidor enviando respostas especiais para uma solicitação: *redirects*. Os redirecionamentos HTTP são respostas com um código de status de 3xx. Um navegador, ao receber uma resposta de redirecionamento, usa o novo URL fornecido e carrega-o imediatamente: a maior parte do tempo, o redirecionamento é transparente para o usuário, além de um pequeno desempenho.

![](/pt-BR/docs/Web/HTTP/Redirections/httpredirect.png)

Existem vários tipos de redirecionamentos e eles se enquadram em três categorias: redirecionamentos permanentes, temporários e especiais.

### Redirecionamentos permanentes

Estes redirecionamentos devem durar permanentemente. Eles implicam que o URL original não deve mais ser usado e que o novo é preferido. Os robôs dos mecanismos de pesquisa desencadeiam uma atualização do URL associado para o recurso em seus índices.

| Code | Text | Method handling | Typical use case |
| --- | --- | --- | --- |
| `301` | `Movido permanentemente` | `GET` métodos inalterados. Outros podem ou não serem alterados para `GET`.[1] | Reorganização de um web site. |
| `308` | `Permanentemente redirecionado` | Método e corpo não alterados | Reorganização de um web site, com não-GET links/operações. |

[1]A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 308 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

### Redirecionamentos temporários

Às vezes, o recurso solicitado não pode ser acessado a partir da sua localização canônica, mas pode ser acessado a partir de outro local. Neste caso, um redirecionamento temporário pode ser usado. Os robôs do mecanismo de busca não memorizam o novo e temporário link. Os redirecionamentos temporários também são usados ao criar, atualizar e excluir recursos para apresentar páginas de progresso temporárias.

| Code | Text | Method handling | Typical use case |
| --- | --- | --- | --- |
| `302` | `Encontrado` | `GET` métodos inalterados. Outros podem ou não serem alterados para `GET`.[2] | A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. |
| `303` | `Ver outro` | `GET` Métodos inalterados. Outros *alterados* para `GET` (corpo perdido). | Usado para redirecionar após um `PUT` ou um `POST` para evitar uma atualização da página que reativaria a operação. |
| `307` | `Redirecionamento temporário` | Método ou corpo não alterados | A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. Melhor que 302 quando os links / operações não-GET estão disponíveis no site. |

[2] A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 307 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

### Redirecionamentos Especiais

Além desses redirecionamentos usuais, existem dois redirecionamentos específicos. O `304` (Não Modificado) redireciona uma página para a cópia em cache local (que estava obsoleta) e `300` (Múltipla escolha) é um redirecionamento manual: o corpo, apresentado pelo navegador como uma página da Web, lista os possíveis redirecionamentos e o usuário clica em um para selecioná-lo.

| Code | Text | Typical use case |
| --- | --- | --- |
| `300` | `Múltipla Escolha` | Não muitas: as opções estão listadas em uma página HTML no corpo. Poderia ser servido com um estado `200` OK. |
| `304` | `Não Modificado` | Atualização de cache: isso indica que o valor do cache ainda é recente e pode ser usado. |

Alternative way of specifying redirections
------------------------------------------

HTTP redirects aren't the only way to define redirections. There are two other methods: HTML redirections using the `<meta>` element, and JavaScript redirections using the DOM.

### HTML redirections

HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a `<meta>` element and the `http-equiv` attribute set to `refresh` in the `<head>` of the page. When displaying the page, the browser will find this element and will go to the indicated page.

```html
<head>
  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
</head>
```

The `content` attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to `0`, for better accessibility.

Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content.

**Nota:** Note that these redirections break the back button in a browser: you can go back to a page with this header but it instantaneously moves forward again.

### JavaScript redirections

Redirections in JavaScript are created by setting a value to the `window.location` property and the new page is loaded.

```js
window.location = "http://www.example.com/";
```

Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other side, there are more possibilities as you can trigger the redirection only if some conditions are met, for example.

### Order of precedence

With three possibilities for URL redirections, several methods can be specified at the same time, but which one is applied first? The order of precedence is the following:

1. HTTP redirects are always executed first when there is not even a page transmitted, and of course not even read.
2. HTML redirects (`<meta>`) are executed if there weren't any HTTP redirects.
3. JavaScript redirects are used as the last resort, and only if JavaScript is enabled on the client side.

When possible, always try to use HTTP redirects, and don't use a `<meta>` element. If a developer changes the HTTP redirects and forgets the HTML redirects, redirects are no more identical or end up in an infinite loop, or other nightmares happen.

Use cases
---------

There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum.

### Domain aliasing

Ideally, there is one location, and therefore one URL, for one resource. But there are reasons for wanting to have alternative names for a resource (several domains, like with and without the www prefix or shorter and easy to remember URLs, …). In these cases, rather than duplicating the resource, it is useful to use a redirect to the one true (canonical) URL.

Domain aliasing can be done for several reasons:

* Expanding the reach of your site. A common case is when your site resides under the `www.example.com` domain and accessing your pages from `example.com` should be possible, too. Redirections for `example.com` pages to `www.example.com` are set up in this case. You might also provide commonly used synonym names or frequent typos of your domain names.
* Moving to a different domain. For example, your company has been renamed and you when searching for the old name, you want people used to the old company Web site still find you under the new name.
* Forcing HTTPS. Requests to the HTTP version of your site will be redirected to the HTTPS version of your site.
### Keeping links alive

When you restructure Web sites, URLs of resources change. Even if you can update the internal links of your Web site to match the new naming scheme, you have no control over the URLs used by external resources. You don't want to break these links, as they bring you valuable users (and help your SEO), so you set up redirects from the old URLs to the new ones.

**Nota:** Even if this technique also works for internal links, you should try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request is done) and if you can avoid it by correcting internal links, you should fix these links.

### Temporary responses to unsafe requests

Unsafe requests modify the state of the server and the user shouldn't replay them inadvertently. Typically, you don't want your users to resend `PUT`, `POST` or `DELETE` requests. If you just serve the response as the result of this request, a simple press of the reload button will (possibly after a confirmation message), resend the request.

In this case, the server can send back a `303` (See Other) response that will contain the right information, but if the reload button is pressed, only this page is redisplayed, without replaying the unsafe requests.

### Temporary responses to long requests

Some requests may need more time on the server like sometimes `DELETE` requests that are scheduled for later processing. In this case, the response is a `303` (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about the progress, or allows to cancel it.

Configuring redirects in common servers
---------------------------------------

### Apache

Redirects can be set either in the server config file or in the `.htaccess` of each directory.

The mod\_alias module has `Redirect` and `Redirect_Match` directives that set up a `302` response (by default):
```

<VirtualHost *:80>
  ServerName example.com
  Redirect / http://www.example.com
</VirtualHost>
```

The URL `http://example.com/` will be redirected to `http://www.example.com/` (but not `http://example.com/other.html` )

`Redirect_Match` does the same but takes a regular expression to define a collection of URLs that are affected:
```

RedirectMatch ^/images/(.*)$ http://images.example.com/$1
```

All documents in the `images/` folder will be redirected to a different domain.

If you don't want to set up a temporary redirect, an extra parameter (either the HTTP status code to use or the `permanent` keyword) can be used to set up a different redirect:
```

Redirect permanent / http://www.example.com
Redirect 301 / http://www.example.com
```

The mod\_rewrite module can also be used to create redirects. It is more flexible, but a bit more complex to use.

### Nginx

In Nginx, you create a specific server block for the content you want to redirect:
```

server {
  listen 80;
  server_name example.com;
  return 301 $scheme://www.example.com$request_uri;
}
```

To apply a redirect to a folder or a subset of the pages only, use the `rewrite` directive:
```

rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
```

### IIS

In IIS, you use the `<httpRedirect>` element to configure redirections.

Redirection loops
-----------------

Redirection loops happen when successive redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will be found ultimately.

Most of the time this is a server problem, and if the server cannot detect it, it will send back a `500` `Internal Server Error`. If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop.

Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and post an error message. Firefox will display:
```

Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
```

while Chrome will display:
```

This Webpage has a redirect loop
```

In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies).

It is important to avoid redirection loops as they completely break the user experience.