Referência de elementos SVG - SVG: Gráficos Vetoriais Escaláveis

Referência de elementos SVG
===========================

« SVG / SVG Attribute reference »

Os desenhos e imagens SVG são criados usando uma grande variedade de elementos dedicados a construção, desenho e leiaute de imagens e diagramas vetoriais. Aqui você encontrará documentação de referência para cada um dos elementos SVG.

Elementos SVG de A a Z
----------------------

### A

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
### C

* `<circle>`
* `<clipPath>` (en-US)
* `<color-profile>`
### D

* `<defs>`
* `<desc>`
* `<discard>`
### E

* `<ellipse>`
### F

* `<feBlend>` (en-US)
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDistantLight>` (en-US)
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>`
* `<foreignObject>` (en-US)
### G

* `<g>`
### H

* `<hatch>`
* `<hatchpath>`
### I

* `<image>`
### L

* `<line>`
* `<linearGradient>`
### M

* `<marker>`
* `<mask>`
* `<mesh>`
* `<meshgradient>`
* `<meshpatch>`
* `<meshrow>`
* `<metadata>`
* `<mpath>`
### P

* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
### R

* `<radialGradient>`
* `<rect>`
### S

* `<script>`
* `<set>`
* `<stop>`
* `<style>`
* `<svg>`
* `<switch>`
* `<symbol>`
### T

* `<text>`
* `<textPath>`
* `<title>`
* `<tspan>`
### U

* `<unknown>`
* `<use>`
### Z

* `<view>`
Elementos SVG por Categoria
---------------------------

### Elementos de animação

`<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>` , `<discard>`, `<mpath>` , `<set>`### Formas básicas

`<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`### Elementos "container"

`<a>`, `<defs>`, `<g>`, `<marker>`, `<mask>`, `<missing-glyph>`, `<pattern>`, `<svg>`, `<switch>`, `<symbol>`, `<unknown>`### Elementos descritivos

`<desc>`, `<metadata>`, `<title>`### Elementos de filtro simples

`<feBlend>` (en-US), `<feColorMatrix>` (en-US), `<feComponentTransfer>` (en-US), `<feComposite>` (en-US), `<feConvolveMatrix>` (en-US), `<feDiffuseLighting>` (en-US), `<feDisplacementMap>` (en-US) , `<feDropShadow>` (en-US), `<feFlood>` (en-US), `<feFuncA>` (en-US), `<feFuncB>` (en-US), `<feFuncG>` (en-US), `<feFuncR>` (en-US), `<feGaussianBlur>` (en-US), `<feImage>` (en-US), `<feMerge>` (en-US) , `<feMergeNode>` (en-US), `<feMorphology>` (en-US), `<feOffset>` (en-US), `<feSpecularLighting>` (en-US), `<feTile>` (en-US), `<feTurbulence>` (en-US)### Elementos de fonte

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US), `<hkern>`, `<vkern>`### Elementos de gradiente

`<linearGradient>` , `<meshgradient>`, `<radialGradient>`, `<stop>`### Elementos gráficos

`<circle>`, `<ellipse>`, `<image>`, `<line>` , `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<use>`### Elementos gráficos de referência

`<mesh>`, `<use>`### Elementos de iluminação

`<feDistantLight>` (en-US), `<fePointLight>` (en-US), `<feSpotLight>` (en-US)### Elementos nunca renderizados

`<clipPath>` (en-US), `<defs>`, `<hatch>`, `<linearGradient>`, `<marker>`, `<mask>`, `<meshgradient>`, `<metadata>`, `<pattern>`, `<radialGradient>`, `<script>`, `<style>`, `<symbol>`, `<title>`### Elementos para pintura

`<hatch>`, `<linearGradient>`, `<meshgradient>`, `<pattern>`, `<radialGradient>`, `<solidcolor>`### Elementos renderizáveis

`<a>`, `<circle>`, `<ellipse>`, `<foreignObject>` (en-US), `<g>`, `<image>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<switch>`, `<symbol>`, `<text>`, `<textPath>`, `<tspan>`, `<unknown>`, `<use>`### Elementos de forma

`<circle>`, `<ellipse>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`### Elementos estruturais

`<defs>`, `<g>`, `<svg>`, `<symbol>`, `<use>`### Elementos de conteúdo textual

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<glyph>`, `<glyphRef>`, `<textPath>`, `<text>`, `<tref>`, `<tspan>`### Elementos filho de conteúdo textual

`<altGlyph>`, `<textPath>`, `<tref>`, `<tspan>`### Elementos sem categoria

`<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>`, `<foreignObject>` (en-US), `<hatchpath>`, `<meshpatch>`, `<meshrow>`, `<script>`, `<style>`, `<view>`Elementos obsoletos e descontinuados
------------------------------------

**Aviso:** Aviso: Esses são elementos SVG antigos que foram descontinuados e não devem ser usados. Você nunca deve usá-los em novos projetos e deve susbstituí-los em projetos antigos o mais rápido possível. Eles estão listados aqui apenas para fins informativos.

### A

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<animateColor>`### C

`<cursor>` (en-US)### F

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US)### G

`<glyph>`, `<glyphRef>`### H

`<hkern>`### M

`<missing-glyph>`### T

`<tref>`### V

`<vkern>`Veja também
-----------

* Referência de atributos SVG
* SVG Tutorial
* SVG interface reference


Content type - SVG: Gráficos Vetoriais Escaláveis

Content type
============

Angle
-----

<angle>

Angles are specified in one of two ways. When used in the value of a property in a stylesheet, an <angle> is defined as follows:
```

angle ::= number (~"deg" | ~"grad" | ~"rad")?
```

where deg indicates degrees, grad indicates grads and rad indicates radians.

For properties defined in CSS2, an angle unit identifier must be provided. For angle values in SVG-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. If not provided, the angle value is assumed to be in degrees. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the angle identifier, if specified, must be in lower case.

When angles are used in an SVG attribute, <angle> is instead defined as follows:
```

angle ::= number ("deg" | "grad" | "rad")?
```

The unit identifiers in such <angle> values must be in lower case.

In the SVG DOM, <angle> values are represented using `SVGAngle` (en-US) or `SVGAnimatedAngle objects`.

Anything
--------

<anything>

O tipo básico <anything> é uma sequência de zero ou mais caracteres. Especificamente:
```

anything ::= Char*
```

onde Char é a produção de um caractere, como definido no XML 1.0 , seção 2.2).

Clock-value
-----------

<clock-value>

Clock values have the same syntax as in SMIL Animation specification. The grammar for clock values is repeated here:
```

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]
```

For `Timecount` values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

The following are examples of legal clock values:

* Full clock values:
 `02:30:03` = 2 hours, 30 minutes and 3 seconds
 `50:00:10.25` = 50 hours, 10 seconds and 250 milliseconds
* Partial clock value:
 `02:33` = 2 minutes and 33 seconds
 `00:10.5` = 10.5 seconds = 10 seconds and 500 milliseconds
* Timecount values:
 `3.2h` = 3.2 hours = 3 hours and 12 minutes
 `45min` = 45 minutes
 `30s` = 30 seconds
 `5ms` = 5 milliseconds
 `12.467` = 12 seconds and 467 milliseconds

Fractional values are just (base 10) floating point definitions of seconds. Thus:

`00.5s = 500 milliseconds 00:00.005 = 5 milliseconds`

Color
-----

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of the `color (en-US)` attribute and is a component of the definitions of attributes `fill`, `stroke (en-US)`, `stop-color (en-US)`, `flood-color (en-US)` and `lighting-color (en-US)`, which also offer optional ICC-based color specifications.

SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types, and (depend on the implementation) in the future CSS Color Module Level 3.

A <color> is either a keyword or a numerical RGB specification.

In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors (CSS2, section 18.2).

The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, `#fb0` expands to `#ffbb00`. This ensures that white (`#ffffff`) can be specified with the short notation (`#fff`) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: `rgb(255,255,255)` = `rgb(100%,100%,100%)` = `#FFF`. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.
```

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
             | "rgb("integer, integer, integer")"
             | "rgb("integer "%", integer "%", integer "%)"
             | color-keyword
hexdigit ::= [0-9A-Fa-f]
```

where `color-keyword` matches (case insensitively) one of the color keywords listed in CSS Color Module Level 3, or one of the system color keywords listed in User preferences for colors (CSS2, section 18.2).

The corresponding SVG DOM interface definitions for <color> are defined the one defined by CSS. SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface `SVGColor`.

Coordinate
----------

<coordinate>

A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length> (en-US).

Within the SVG DOM, a <coordinate> is represented as an `SVGLength` (en-US) or an `SVGAnimatedLength` (en-US).

Frequency
---------

<frequency>

Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> (en-US) immediately followed by a frequency unit identifier. The frequency unit identifiers are:

* `Hz`: Hertz
* `kHz`: kilo Hertz

Frequency values may not be negative.

FuncIRI
-------

<FuncIRI>

Notação funcional para uma referência, a sintaxe para esta referência é a mesma que `CSS URI` (en-US)

ICCColor
--------

<icccolor>

An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a `<color-profile>` element, and one or more color component values. The grammar is as follows:
```

icccolor ::= "icc-color(" name (, number)+ ")"
```

The corresponding SVG DOM interface for <icccolor> is `SVGICCColor`.

Integer
-------

<integer>

An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":
```

integer ::= [+-]? [0-9]+
```

If the sign character is not present, the number is non-negative.

Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.

Within the SVG DOM, an <integer> is represented as a `number` or an `SVGAnimatedInteger` (en-US).

IRI
---

<IRI>

An Internationalized Resource Identifier.

On the Internet, resources are identified using \_IRI\_s (Internationalized Resource Identifiers). For example, an SVG file called someDrawing.svg located at `http://example.com` might have the following *IRI*:
```

http://example.com/someDrawing.svg
```

An *IRI* can also address a particular element within an XML document by including an *IRI* fragment identifier as part of the *IRI*. An *IRI* which includes an *IRI* fragment identifier consists of an optional base *IRI*, followed by a "#" character, followed by the *IRI* fragment identifier. For example, the following *IRI* can be used to specify the element whose ID is "Lamppost" within file someDrawing.svg:
```

http://example.com/someDrawing.svg#Lamppost
```

\_IRI\_s are used in the `xlink:href (en-US)` attribute. Some attributes allow both *IRIs* and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is simply an *IRI* delimited with a functional notation. Note: For historical reasons, the delimiters are "url(" and ")", for compatibility with the CSS specifications. The *FuncIRI* form is used in presentation attributes .

SVG makes extensive use of *IRI* references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a `<linearGradient>` element and give it an ID, as in:
```

<linearGradient xml:id="MyGradient">...</linearGradient>
```

You then reference the linear gradient as the value of the `fill` attribute for the rectangle, as in the following example:
```

<rect fill="url(#MyGradient)"/>
```

SVG supports two types of *IRI* references:

* local *IRI* references, where the IRI reference does not contain an `<absoluteIRI>` or `<relativeIRI>` and thus only contains a fragment identifier (i.e., `#<elementID>` or `#xpointer(id<elementID>)`)
* non-local *IRI* references, where the *IRI* reference does contain an `<absoluteIRI>` or `<relativeIRI>`

For the full specification of IRI references in SVG, see SVG 1.1 (2nd Edition): IRI references.

Length
------

<length>

A length is a distance measurement, given as a number along with a unit. Lengths are specified in one of two ways. When used in a stylesheet, a <length> is defined as follows:
```

length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
```

See the CSS2 specification for the meanings of the unit identifiers.

For properties defined in CSS2, a length unit identifier must be provided. For length values in SVG-specific properties and their corresponding presentation attributes, the length unit identifier is optional. If not provided, the length value represents a distance in the current user coordinate system. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the length identifier, if specified, must be in lower case.

When lengths are used in an SVG attribute, a <length> is instead defined as follows:
```

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
```

The unit identifiers in such <length> values must be in lower case.

Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are:

* when a percentage length value represents a percentage of the viewport width or height
* when a percentage length value represents a percentage of the bounding box width or height on a given object.

In the SVG DOM, <length> values are represented using `SVGLength` (en-US) or `SVGAnimatedLength` (en-US) objects.

List-of-\_T\_s
--------------

<list-of-\_T\_s>

(Quando *T* é algum tipo.) Uma lista constituida por uma sequência de valores separados. A não ser que esteja descrito explicitamente de maneira diferente, as listas de atributos XML dentro do SVG podem ser separados por vírgula ou por espaços em branco.

O espaço em branco nas listas é definido como um ou mais dos seguintes caracteres consecutivos: "espaço" (U + 0020), "tab" (U + 0009), "line feed" (U + 000A), "retorno" (U + 000D) e "form-feed" (U + 000C).

Abaixo tem um modelo para uma gramática EBNF descrevendo a sintaxe da <list-of-\_T\_s>:
```

list-of-Ts ::= T
               | T, list-of-Ts
```

Dentro do DOM do SVG, os tipo de valores da <list-of-\_T\_s> são representados por uma interface específica para o tipo particular T. Por exemplo, uma <list-of-lengths> é representada no DOM do SVG utilizando um objeto `SVGLengthList` (en-US) ou `SVGAnimatedLengthList` (en-US).

Name
----

<name>

Um nome, que é uma string, onde alguns personagens de importância sintática não são suportados.
```

name  ::= [^,()#x20#x9#xD#xA] /* qualquer caractere exceto ",", "(", ")" ou espaço em branco */
```

Number
------

<number>

Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:
```

number ::= integer
           | [+-]? [0-9]* "." [0-9]+
```

This syntax is the same as the definition in CSS (CSS2, section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
```

number ::= integer ([Ee] integer)?
           | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
```

Within the SVG DOM, a <number> is represented as a float, `SVGNumber` (en-US) or a `SVGAnimatedNumber` (en-US).

Number-optional-number
----------------------

<number-optional-number>

A pair of <number>s, where the second <number> is optional.
```

number-optional-number ::= number
                           | number, number
```

In the SVG DOM, a <number-optional-number> is represented using a pair of `SVGAnimatedInteger` (en-US) or `SVGAnimatedNumber` (en-US) objects.

Opacity value
-------------

<opacity-value>

A opacidade da cor ou do conteúdo do objeto atual é preenchida através de um <number> (en-US). Quaisquer valores fora da faixa de 0.0 (totalmente transparente) a 1.0 (totalmente opaco) será ajustada para este intervalo.

Paint
-----

<paint>

Os valores das propriedades `fill` e `stroke (en-US)` são especificações do tipo de pintura a ser utilizada quando o preenchimento ou acariciando um determinado elemento gráfico. As opções disponíveis e sintaxe para <paint> estão descritos na especificação de pintura.

Dentro do DOM do SVG, os valores do <paint> são representados usando objetos `SVGPaint`.

Percentage
----------

<percentage>

Percentages are specified as a number followed by a "%" character:
```

percentage ::= number "%"
```

Note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.

Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.

Within the SVG DOM, a <percentage> is represented using an `SVGNumber` (en-US) or `SVGAnimatedNumber` (en-US) object.

Time
----

<time>

O valor de tempo é um <number> imediatamente seguida por um indentificador de unidade de tempo. Os indicadores de unidade de tempo são:

* ms: milisegundos
* s: segundos

Transform-list
--------------

<transform-list>

A <transform-list> é utilizado para especificar uma lista de transformações das coordenadas do sistema. A descrição detalhada dos valores possíveis para a <transform-list> é dada no `transform (en-US)` atribuir definição.

Dentro do DOM do SVG, o valor <transform-list> é representado usando um objeto `SVGTransformList` (en-US) ou `SVGAnimatedTransformList` (en-US).


Primeiros passos - SVG: Gráficos Vetoriais Escaláveis

Primeiros passos
================

* « Previous (en-US)
* Next » (en-US)
Um Exemplo Simples
------------------

Vamos mergulhar direto com um exemplo simples. Dê uma olhada no código a seguir.

```xml
<svg version="1.1"
 baseProfile="full"
 width="300" height="200"
 xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>
```

Copie o código e salve-o como demo1.svg. Em seguida, abra-o no Firefox. Você o verá como visto na figura a seguir. (Usuários do Firefox: clique aqui)

![Fundo vermelho composto por um círculo verde centralizado. O texto branco centralizado dentro do círculo é SVG.](/pt-BR/docs/Web/SVG/Tutorial/Getting_Started/svgdemo1.png)

O processo de renderização inclui o seguinte:

1. Começamos com o elemento raiz do `svg`:
    * A declaração doctype conhecida em (X)HTML deve ser deixada de lado porque a validação SVG baseada em DTD leva a mais problemas do que resolve.
    * Antes do SVG 2, para identificar a versão do SVG para outros tipos de validação, os atributos `version`e `baseProfile` deveriam sempre ser usados. Ambos os atributos `version`e `baseProfile`estão obsoletos no SVG 2.
    * Como um dialeto XML, o SVG deve sempre vincular os namespaces corretamente (no atributo xmlns). Consulte a página Curso intensivo de namespaces para obter mais informações.
2. O fundo é definido como vermelho desenhando um retângulo `<rect>` que cobre toda a área da imagem.
3. Um círculo verde `<circle>`com raio de 80px é desenhado no centro do retângulo vermelho (centro do círculo deslocado 150px para a direita e 100px para baixo a partir do canto superior esquerdo).
4. O texto "SVG" é desenhado. O interior de cada letra é preenchido com branco. O texto é posicionado definindo uma âncora onde queremos que fique o ponto médio: neste caso, o ponto médio deve corresponder ao centro do círculo verde. Ajustes finos podem ser feitos no tamanho da fonte e na posição vertical para garantir que o resultado final seja esteticamente agradável.
Propriedades básicas de arquivos SVG
------------------------------------

* A primeira coisa a levar em conta é a ordem de representação dos elementos. A regra globalmente válida para arquivos SVG é que os elementos subsequentes sejam renderizados sobre os anteriores. Quanto mais baixo for um elemento, mais visível ele será.
* Na web, os arquivos SVG podem ser exibidos diretamente no navegador ou incorporados em arquivos HTML usando vários métodos:
    + Se o HTML for XHTML e entregue como application/xhtml+xml, o SVG poderá ser incorporado diretamente na fonte XML.
    + O SVG também pode ser incorporado diretamente no HTML.
    + Pode ser usado com o elemento `<img>`
    + O arquivo SVG pode ser referenciado com um elemento `object`:
     html
    ```html
    <object data="image.svg" type="image/svg+xml" />

    ```
    + Também podem ser usados com um elemento `iframe`:
     html
    ```html
    <iframe src="image.svg"></iframe>

    ```
    + Finalmente, o SVG pode ser criado dinamicamente com JavaScript e injetado no HTML DOM.
* O manuseio de tamanhos e unidades em SVG será explicado na próxima página
Tipos de arquivo SVG
--------------------

Os arquivos SVG são de dois tipos. Arquivos SVG regulares, que são arquivos de texto simples que contêm marcações SVG e têm a extensão recomendada ".svg" (todas em letras minúsculas).

Devido ao enorme tamanho que os arquivos SVG podem atingir quando usados para algumas aplicações (por exemplo, aplicações geográficas), a especificação SVG também permite arquivos SVG compactados com gzip. A extensão recomendada para esses arquivos é ".svgz" (todas em letras minúsculas). Infelizmente, é muito problemático fazer com que arquivos SVG compactados funcionem de maneira confiável em todos os agentes de usuário habilitados para SVG quando servidos a partir de um servidor Microsoft IIS, e o Firefox não pode carregar SVGs compactados do computador local. Evite arquivos SVG compactados, exceto ao publicá-los em um servidor web que você sabe que os servirá corretamente (veja abaixo).

Algumas palavras sobre servidores web para arquivos .svgz
---------------------------------------------------------

Agora que sabemos como criar arquivos SVG básicos, o próximo passo é carregá-los em um servidor web. No entanto, existem alguns problemas nesta fase. Para arquivos SVG regulares, os servidores devem enviar o cabeçalho HTTP:

```http
Content-Type: image/svg+xml
Vary: Accept-Encoding
```

Para arquivos SVG compactados, os servidores devem enviar cabeçalhos HTTP:

```http
Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding
```

Você pode verificar se o seu servidor está enviando os cabeçalhos HTTP corretos com seus arquivos SVG usando o painel Network Monitor ou um site como websniffer.cc. Envie a URL dos seus dois arquivos SVG e observe os cabeçalhos de resposta HTTP. Se você descobrir que seu servidor não está enviando os cabeçotes de dados com os valores fornecidos acima, entre em contato com seu host. Se você estiver tendo problemas para convencê-los a configurar corretamente seus servidores para SVG, pode haver maneiras de fazer isso. Consulte a página de configuração do servidor em w3.org para uma variedade de soluções simples.

A configuração incorreta do servidor é um motivo muito comum para o SVG não carregar, portanto, verifique a sua. Se o seu servidor não estiver configurado para enviar os cabeçalhos corretos com os arquivos SVG que está servindo, o Firefox provavelmente marcará os arquivos como texto ou lixo codificado, ou até mesmo pedirá ao usuário que escolha um aplicativo para abri-los.

* « Previous (en-US)
* Next » (en-US)


Introdução - SVG: Gráficos Vetoriais Escaláveis

Introdução
==========

* « Previous
* Next »

![](/pt-BR/docs/Web/SVG/Tutorial/Introduction/svg_overview.png)SVG é uma linguagem XML, similar ao XHTML, na qual pode ser usada para desenhar vetores gráficos (imagens), como os mostrados à direita. Ela pode ser usada para criar uma imagem qualquer especificando todas as linhas e formas necessárias, para modificar uma imagem raster já existente ou fazer ambas as opções. A imagem e seus componentes também podem ser transformados, compostas em conjunto, ou filtradas para mudar completamente sua aparência.

SVG surgiu em 1999 após vários outros formatos terem sido submetidos à W3C e não terem sido totalmente ratificados. Enquanto a especificação tem levado um bom tempo, a aceitação pelos navegadores têm sido lenta, e não há tanto conteúdo sobre SVG sendo utilizado na internet neste momento (2009). Even the implementations that are available often are not as fast as competing technologies like HTML5 Canvas or Adobe Flash as a full application interface. SVG does offer benefits over both implementations, some of which include having a DOM interface available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.

### Ingredientes Básicos

O HTML fornece elementos para definir cabeçalhos, parágrafos, tabelas e assim por diante. Da mesma forma, o SVG fornnece elementos para circulos,retangulos e curvas simples e complexas. Um documentos simples de SVG consiste de nada mais do que um elemento-raiz `<svg>` e várias formas básicas que juntas constroem um gráfico. Há também o elemento `<g>`, que é utilizado para agrupar várias formas básicas.

Começando daqui, o SVG em imagem pode se tornar arbitrariamente complexo. SVG suporta gradientes, rotação, filtros, efeitos, animações, interatividade com JavaScript e assim por diante. Mas todas essas ferramentas extras da linguagem dependem desse conjunto relativamente pequeno de elementos para definir a área gráfica.

### Antes de você começar

Há muitos softwares disponíveis como o Inkscape os quais são gratuitos e usam SVG como seus formatos de arquivos padrão. Entretanto, este tutorial dependerá apenas do XML ou do editor de texto da sua escolha. A ideia é ensinar o funcionamento interno do SVG para aqueles que desejam entendê-lo, e a melhor forma é "pondo a mão na masssa", escrevendo algumas marcações. Contudo você deve anotar o seu objetivo. Nenhum dos visualizadores SVG são iguais, então, há uma boa chance de você desenvolver para um aplicativo não será exibido exatamente da mesma forma que em outros, simplesmente porque eles suportam diferentes níveis da especificação SVG ou outra especificação que você está usando junto com o SVG (isto é, JavaScript ou CSS).

SVG é suportado em todos os browsers modernos em cobre algumas versões anteriores em alguns casos. Uma tabela completa de compatibilidade com browser pode ser encontrada em Can I use. O Firefox suporta alguns conteúdos SVG desde a versão 1.5, e este suporte vem crescendo a cada lançamento desde então. Espero, que com essa tradução aqui, o MDN possa ajudar os desenvolvedores a acompanhar as diferenças entre o Gecko e algumas das outras importantes implementações.

* O XML é case-sensitive (diferencia maiúsculas e minúsculas, diferentemente do HTML), ou seja, todos os exemplos devem ser escritos exatamente como mostrado aqui.
* Valores de atributos, mesmo que estes sejam números, devem ser colocados dentro de aspas.

SVG é uma especificação imensa. Este tutorial combre apenas o conteúdo básico. Uma vez que você se familiarizar você estará habilitado a usar o Element Reference e o Interface Reference (en-US) para encontrar qualquer outra coisa que precisa saber.

### Sabores do SVG

Desde que se tornou uma recomendação em 2003, a mais recente Versão SVG completa é 1.1. Ele se baseia SVG 1.0, mas adiciona mais modularização para facilitar a implementação. The second edition of SVG 1.1 tournouse uma recomendação em 2011. O SVG 1.2 completo deveria se tornar o próximo grande lançamento. Ele foi descartado para o próximo lançamento SVG 2.0, o qual está sob forte desenvolvimento agora e segue uma abordagem semelhante ao CSS 3, que divide pois divide componentes em várias especificações fracamente acopladas.

Além das recomendações completas do SVG, o grupo de trabalho do W3C introduziu o SVG Tiny e o SVG Basic em 2003. Esses dois perfis são voltados principalmente para dispositivos móveis. O primeiro, SVG Tiny, deve render primitivos gráficos para pequenos dispositivos com baixa capacidade. O SVG Basic oferece muitos recursos de SVG completo, mas não inclui aqueles que são difíceis de implementar ou pesados para renderizar (como animações). Em 2008, o SVG Tiny 1.2 tornou-se uma recomendação do W3C.

Havia planos para uma especificação de impressão SVG, que adicionaria suporte a várias páginas e gerenciamento de cores aprimorado. Este trabalho foi descontinuado.

* « Previous
* Next »


stroke-dashoffset - SVG: Gráficos Vetoriais Escaláveis

stroke-dashoffset
=================

« SVG Attribute reference home

O atributo `stroke-dashoffset` especifica a distância entre o inicio traço e o fim.

Se a <percentage> for usada, o valor representará a porcentagem do viewport atual.

O valor pode ser negativo.

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

| Categorias | Atributo de Apresentação |
| --- | --- |
| Value | <percentage> | <length> | inherit |
| Valor inicial | 0 |
| Animação | Sim |
| Documento Normativo | SVG 1.1 (2nd Edition) |

Elementos
---------

Os seguintes elementos podem utilizar o atributo `stroke-dashoffset`

* Shape elements »
* Text content elements »


class - SVG: Gráficos Vetoriais Escaláveis

class
=====

« Página inicial da referência de atributos do SVG

Atribui um nome de classe ou um conjunto de nomes de classe a um elemento. Você pode atribuir o mesmo nome ou nomes de classe para qualquer número de elementos. Se você especificar vários nomes de classe, estes devem ser separados por caracteres de espaço em branco.

O nome de classe de um elemento tem duas funções principais:

* Como um seletor de folha de estilo, para a utilização quando um autor quiser atribuir informações de estilo a um conjunto de elementos.
* Para utilizações gerais do navegador.

A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.

Utilização
----------

| Categorias | Nenhuma |
| --- | --- |
| Valor | <list-of-class-names> |
| Animável | Sim |
| Documento normativo | SVG 1.1 (2ª Edição): O atributo class |

{{ page("/pt-BR/SVG/Content\_type","List-of-Ts") }}Exemplo
-------

```html
<html>
  <body>
    <svg
 width="120"
 height="220"
 viewPort="0 0 120 120"
 version="1.1"
 xmlns="https://www.w3.org/2000/svg">
      <style type="text/css">
 <![CDATA[

 rect.rectClass {
 stroke: #000066;
 fill: #00cc00;
 }
 circle.circleClass {
 stroke: #006600;
 fill: #cc0000;
 }

 ]]>
 </style>

      <rect class="rectClass" x="10" y="10" width="100" height="100" />
      <circle class="circleClass" cx="40" cy="50" r="26" />
    </svg>
  </body>
</html>
```

Elementos
---------

Os seguintes elementos podem utilizar o atributo `class`:

* `<a>`
* `<altGlyph>`
* `<circle>`
* `<clipPath>` (en-US)
* `<defs>`
* `<desc>`
* `<ellipse>`
* `<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)
* `<filter>`
* `<font>` (en-US)
* `<foreignObject>` (en-US)
* `<g>`
* `<glyph>`
* `<glyphRef>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>`
* `<mask>`
* `<missing-glyph>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<stop>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<title>`
* `<tref>`
* `<tspan>`
* `<use>`
Compatibilidade com navegadores
-------------------------------

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


style - SVG: Gráficos Vetoriais Escaláveis

style
=====

« Página inicial de referência do atributo SVG

Este atributo especifica informação de estilo para o elemento atual. O atributo "style" especifica informação de estilo para um único elemento. As linguagem da folha de estilos para as regras de estilos em linhas é dada pelo valor do atributo `contentStyleType` no elemento the `<SVG>`.

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

| Categorias | Atributo de apresentação |
| --- | --- |
| Valor | <style> |
| Animável? | Não |
| Documento Normativo | SVG 1.1 (2ª Edição) |

<style>

A sintaxe do estilo depende de uma linguagem de folha de estilos. Por padrão, se `contentStyleType` não for definido, a linguagem da folha de estilo utilizada será a CSS.

Exemplo
-------

O exemplo a seguir mostra a estilização de um retângulo com um atributo de estilo utilizando a linguagem de folha de estilos do CSS.

```html
<svg version="1.1" viewbox="0 0 1000 500" xmlns="https://www.w3.org/2000/svg">
  <rect
 height="300"
 width="600"
 x="200"
 y="100"
 style="fill: red; stroke: blue; stroke-width: 3" />
</svg>
```

Elementos
---------

Os seguintes elementos podem utilizar o atributo `style`

* Elementos "container" »
* Elementos de filtro primitivo »
* Elementos de gradiente »
* Elementos gráficos »
* Elementos estruturais »
* Elementos de texto »
* `<clipPath>` (en-US)
* `<filter>`
* `<font>` (en-US)
* `<foreignObject>` (en-US)
* `<glyphRef>`
* `<stop>`
* `<glyph>`
Veja também
-----------

* `<style>`


preserveAspectRatio - SVG: Gráficos Vetoriais Escaláveis

preserveAspectRatio
===================

O atributo **`preserveAspectRatio`** indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.

Because the aspect ratio of an SVG image is defined by the `viewBox (en-US)` attribute, if this attribute isn't set, the `preserveAspectRatio` attribute has no effect (*with one exception, the `<image>` element, as described below*).

Example
-------

```html
<svg viewBox="-1 -1 162 92" xmlns="https://www.w3.org/2000/svg">
  <defs>
    <path
 id="smiley"
 d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

  <!-- (width>height) meet -->
  <svg
 preserveAspectRatio="xMidYMid meet"
 x="0"
 y="0"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMinYMid meet"
 x="25"
 y="0"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMaxYMid meet"
 x="50"
 y="0"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>

  <!-- (width>height) slice -->
  <svg
 preserveAspectRatio="xMidYMin slice"
 x="0"
 y="15"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMidYMid slice"
 x="25"
 y="15"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMidYMax slice"
 x="50"
 y="15"
 viewBox="0 0 100 100"
 width="20"
 height="10">
    <use href="#smiley" />
  </svg>

  <!-- (width<height) meet -->
  <svg
 preserveAspectRatio="xMidYMin meet"
 x="75"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMidYMid meet"
 x="90"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMidYMax meet"
 x="105"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>

  <!-- (width<height) slice -->
  <svg
 preserveAspectRatio="xMinYMid slice"
 x="120"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMidYMid slice"
 x="135"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>
  <svg
 preserveAspectRatio="xMaxYMid slice"
 x="150"
 y="0"
 viewBox="0 0 100 100"
 width="10"
 height="25">
    <use href="#smiley" />
  </svg>

  <!-- none -->
  <svg
 preserveAspectRatio="none"
 x="0"
 y="30"
 viewBox="0 0 100 100"
 width="160"
 height="60">
    <use href="#smiley" />
  </svg>
</svg>
```

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

```
<svg viewBox="-1 -1 162 92" xmlns="https://www.w3.org/2000/svg">
  <defs>
    <path
 id="smiley"
 d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

  <!-- (width>height) meet -->
  <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMid meet"
 x="0"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="25" y="0" width="20" height="10">
    <title>xMinYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMinYMid meet"
 x="25"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="50" y="0" width="20" height="10">
    <title>xMaxYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMaxYMid meet"
 x="50"
 y="0">
    <use href="#smiley" />
  </svg>

  <!-- (width>height) slice -->
  <rect x="0" y="15" width="20" height="10">
    <title>xMidYMin slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMin slice"
 x="0"
 y="15">
    <use href="#smiley" />
  </svg>

  <rect x="25" y="15" width="20" height="10">
    <title>xMidYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMid slice"
 x="25"
 y="15">
    <use href="#smiley" />
  </svg>

  <rect x="50" y="15" width="20" height="10">
    <title>xMidYMax slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMax slice"
 x="50"
 y="15">
    <use href="#smiley" />
  </svg>

  <!-- (width<height) meet -->
  <rect x="75" y="0" width="10" height="25">
    <title>xMidYMin meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMin meet"
 x="75"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="90" y="0" width="10" height="25">
    <title>xMidYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMid meet"
 x="90"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="105" y="0" width="10" height="25">
    <title>xMidYMax meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMax meet"
 x="105"
 y="0">
    <use href="#smiley" />
  </svg>

  <!-- (width<height) slice -->
  <rect x="120" y="0" width="10" height="25">
    <title>xMinYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMinYMid slice"
 x="120"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="135" y="0" width="10" height="25">
    <title>xMidYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMid slice"
 x="135"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="150" y="0" width="10" height="25">
    <title>xMaxYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMaxYMid slice"
 x="150"
 y="0">
    <use href="#smiley" />
  </svg>

  <!-- none -->
  <rect x="0" y="30" width="160" height="60">
    <title>none</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="160"
 height="60"
 preserveAspectRatio="none"
 x="0"
 y="30">
    <use href="#smiley" />
  </svg>
</svg>
```

```
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}
```

Syntax
------
```

preserveAspectRatio="<align> [<meetOrSlice>]"
```

Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:

Alignment value

The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the `viewBox (en-US)` doesn't match the aspect ratio of the viewport. The alignment value must be one of the following keywords:

* **none**
 Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. *Note that if* `<align>` *is* `none`*, then the optional* `<meetOrSlice>` *value is ignored*.
* **xMinYMin** - Force uniform scaling.
 Align the `<min-x>` of the element's `viewBox (en-US)` with the smallest X value of the viewport.
 Align the `<min-y>` of the element's `viewBox (en-US)` with the smallest Y value of the viewport.
* **xMidYMin** - Force uniform scaling.
 Align the midpoint X value of the element's `viewBox (en-US)` with the midpoint X value of the viewport.
 Align the `<min-y>` of the element's `viewBox (en-US)` with the smallest Y value of the viewport.
* **xMaxYMin** - Force uniform scaling.
 Align the `<min-x>+<width>` of the element's `viewBox (en-US)` with the maximum X value of the viewport.
 Align the `<min-y>` of the element's `viewBox (en-US)` with the smallest Y value of the viewport.
* **xMinYMid** - Force uniform scaling.
 Align the `<min-x>` of the element's `viewBox (en-US)` with the smallest X value of the viewport.
 Align the midpoint Y value of the element's `viewBox (en-US)` with the midpoint Y value of the viewport.
* **xMidYMid** (the default) - Force uniform scaling.
 Align the midpoint X value of the element's `viewBox (en-US)` with the midpoint X value of the viewport.
 Align the midpoint Y value of the element's `viewBox (en-US)` with the midpoint Y value of the viewport.
* **xMaxYMid** - Force uniform scaling.
 Align the `<min-x>+<width>` of the element's `viewBox (en-US)` with the maximum X value of the viewport.
 Align the midpoint Y value of the element's `viewBox (en-US)` with the midpoint Y value of the viewport.
* **xMinYMax** - Force uniform scaling.
 Align the `<min-x>` of the element's `viewBox (en-US)` with the smallest X value of the viewport.
 Align the `<min-y>+<height>` of the element's `viewBox (en-US)` with the maximum Y value of the viewport.
* **xMidYMax** - Force uniform scaling.
 Align the midpoint X value of the element's `viewBox (en-US)` with the midpoint X value of the viewport.
 Align the `<min-y>+<height>` of the element's `viewBox (en-US)` with the maximum Y value of the viewport.
* **xMaxYMax** - Force uniform scaling.
 Align the `<min-x>+<width>` of the element's `viewBox (en-US)` with the maximum X value of the viewport.
 Align the `<min-y>+<height>` of the element's `viewBox (en-US)` with the maximum Y value of the viewport.

Meet or slice reference

The meet or slice reference is optional and, if provided, must be one of the following keywords:

* **meet** (*the default*) - Scale the graphic such that:
    + aspect ratio is preserved
    + the entire `viewBox (en-US)` is visible within the viewport
    + the `viewBox (en-US)` is scaled up as much as possible, while still meeting the other criteriaIn this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the `viewBox (en-US)` (i.e., the area into which the `viewBox (en-US)` will draw will be smaller than the viewport).
* **slice** - Scale the graphic such that:
    + aspect ratio is preserved
    + the entire viewport is covered by the `viewBox (en-US)`
    + the `viewBox (en-US)` is scaled down as much as possible, while still meeting the other criteriaIn this case, if the aspect ratio of the `viewBox (en-US)` does not match the viewport, some of the `viewBox (en-US)` will extend beyond the bounds of the viewport (i.e., the area into which the `viewBox (en-US)` will draw is larger than the viewport).

Elements
--------

Seven elements are using this attribute: `<svg>`, `<symbol>`, `<image>`, `<feImage>` (en-US), `<marker>`, `<pattern>`, and `<view>`.

### feImage

For `<feImage>` (en-US), `preserveAspectRatio` defines how the referenced image should fit in the rectangle define by the `<feImage>` element.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### image

For `<image>`, `preserveAspectRatio` defines how the referenced image should fit in the rectangle define by the `<image>` element.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### marker

For `<marker>`, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### pattern

For `<pattern>`, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### svg

For `<svg>`, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### symbol

For `<symbol>`, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

### view

For `<view>`, `preserveAspectRatio` indicates if a uniform scaling must be performed to fit the element viewport.

| Value | **<align> <meetOrSlice>?** |
| --- | --- |
| Default value | `xMidYMid` `meet` |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feimage-preserveaspectratio |
| Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute |


Width - SVG: Gráficos Vetoriais Escaláveis

Width
=====

« SVG Attribute reference home

Esse atributo indica um compromimento horizontal no sistema de coordenadas do usuário. O efeito exato dessa coordenada, depende de cada elemento. Na maioria das vezes, representa a largura da região retangular do elemento de referência.

Esse atributo precisa ser especificado, exceto para o elemento `<svg>` onde o valor padrão é **100%** (com exceção do elemento root `<svg>` que contém pais HTML). e o `<filter>` e `<mask>`, elementos que o valor padrão é **120%.**

Contexto de Uso
---------------

| Categories | None |
| --- | --- |
| Value | <length> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition): foreignObject element SVG 1.1 (2nd Edition): image element SVG 1.1 (2nd Edition): pattern element SVG 1.1 (2nd Edition): rect element SVG 1.1 (2nd Edition): svg element SVG 1.1 (2nd Edition): use element SVG 1.1 (2nd Edition): Filter primitive SVG 1.1 (2nd Edition): mask element |

{{ page("/en/SVG/Content\_type","Length") }}Exemplo
-------

```xml
<?xml version="1.0"?>
<svg width="120" height="120"
 viewBox="0 0 120 120"
 xmlns="https://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>
```

Elementos
---------

Os seguintes elementos podem user o atributo witdh

* Filter primitive elements »
* `<filter>`
* `<foreignObject>` (en-US)
* `<image>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
* `<mask>`


keyTimes - SVG: Gráficos Vetoriais Escaláveis

keyTimes
========

O atributo **`keyTimes`** representa uma lista de valores de tempo usados para controlar o ritmo da animação. Cada valor corresponde a um valor na lista de atributos `values (en-US)` e define quando o valor é usado na animação. Cada valor de tempo na lista `keyTimes` é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.

Four elements are using this attribute: `<animate>`, `<animateColor>`, `<animateMotion>`, and `<animateTransform>`
```

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

```html
<svg viewBox="0 0 120 120" xmlns="https://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 repeatCount="indefinite"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 repeatCount="indefinite"
 values="10 ; 60 ; 110 ; 60 ; 10"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
  </circle>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<number>` [
 `;` `<number>` ]\* `;`?
  |
| Default value | *None* |
| Animatable | No |

The value of the `keyTimes` attribute is a semicolon-separated list of values.

There must be exactly as many values in the `keyTimes` list as in the `values` list.

Each successive time value must be greater than or equal to the preceding time value.

The `keyTimes` list semantics depends upon the interpolation mode:

* For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be `1`. The key time associated with each value defines when the value is set; values are interpolated between the key times.
* For discrete animation, the first time value in the list must be `0`. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list.

If the `calcMode (en-US)` attribute is set to `paced`, the `keyTimes` attribute is ignored.

If the duration of the animation is indefinite, any `keyTimes` specification will be ignored.

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

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

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

{{Compat}}


fill - SVG: Gráficos Vetoriais Escaláveis

fill
====

O atributo **`fill`** pode ter duas diferentes interpretações. Para formas e textos, é definido como um atributo de apresentação que define a cor (ou qualquer modelo de pintura SVG como gradientes ou padrões) utilizada para colorir um elemento; para animações ele é quem define o estado final de uma animação.
Como um atributo de apresentação, ele pode ser aplicado a qualquer elemento, mas só tem efeito nestes onze elementos seguintes: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>`, `<tref>`, e `<tspan>`.

Para animação, apenas cinco elementos utilizam este atributo, sendo elas: `<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, e `<set>`.
```

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

```html
<svg viewBox="0 0 300 100" xmlns="https://www.w3.org/2000/svg">
  <!-- Preenchimento simples com apenas uma cor -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Preenchimento do circulo com gradiente -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
 Mantendo o estado final de um círculo animado
 sendo um círculo com o raio de 40px.
 -->
  <circle cx="250" cy="50" r="20">
    <animate
 attributeType="XML"
 attributeName="r"
 from="0"
 to="40"
 dur="5s"
 fill="freeze" />
  </circle>
</svg>
```

altGlyph
--------

**Aviso:** a partir da versão SVG2, a tag `<altGlyph>` está obsoleta e não deve ser utilizada.

Para `<altGlyph>`, `fill` é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

animate
-------

Para `<animate>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateColor
------------

>
> \*\*Aviso:\*\*A partir da versão de animação para modelos SVG2 `<animateColor>` está obsoleto e não deve ser utilizado. Ao invés disso utilize `<animate>`.
>
>
>

Para `<animateColor>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateMotion
-------------

Para `<animateMotion>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateTransform
----------------

Para `<animateTransform>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

circle
------

Para `<circle>`, `fill` é o atributo de apresentação utilizado para definir a coloração de um círculo.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

ellipse
-------

Para `<ellipse>`, `fill` é o atributo de apresentação utilizado para definir a cor de uma elipse.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

path
----

Para `<path>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

polygon
-------

Para `<polygon>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

polyline
--------

For `<polyline>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

rect
----

Para `<rect>`, `fill` é o atributo de apresentação utilizado para definir a cor de um retângulo.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

set
---

Para `<set>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

text
----

Para `<text>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

textPath
--------

For `<textPath>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

tref
----

**Aviso:** a partir da versão SVG2, a tag `<tref>` está obsoleta e não deve ser utilizada.

Para `<tref>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

tspan
-----

Para `<tspan>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

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

| Specification |
| --- |
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |

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

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

**Nota:** Nota: Para obter informações do uso do `context-fill` (e do `context-stroke`) de documentos HTML, consulte a documentação da propriedade não-padrão `-moz-context-properties` .


style
=====

O elemento de estilo possibilita que folhas de estilos sejam incorporadas diretamente ao conteúdo do SVG. O elemento `style` do SVG possui os mesmos atributos que o elemento correspondente no HTML (veja o elemento no HTML `<style>`).

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

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

Exemplo
-------

```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 100 100"
 xmlns="https://www.w3.org/2000/svg">
  <style>
 /\* <![CDATA[ \*/
 circle {
 fill: orange;
 stroke: black;
 stroke-width: 10px; // Note que este valor depende do valor do pixel definido no viewBox
 }
 /\* ]]> \*/
 </style>

  <circle cx="50" cy="50" r="40" />
</svg>
```

Resultado:

Atributos
---------

### Atributos globais

* Atributos centrais »
### Atributos específicos

* `type (en-US)`
* `media (en-US)`
* `title`
Interface DOM
-------------

O elemento implementa a interface do `SVGStyleElement`.

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

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

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

* Elemento <style> no HTML


hkern - SVG: Gráficos Vetoriais Escaláveis

hkern
=====

A distância horizontal entre dois glifos podem ser bem ajustados com um elemento `hkern`. Este processo é conhecido como Kerning.

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

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

Atributos
---------

### Atributos globais

* Atributos principais »
### Atributos específicos

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

Este elemento implementa a interface do `SVGHKernElement`.

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

* `<font>` (en-US)
* `<glyph>`
* `<vkern>`
* Tutorial SVG: SVG fonts


glyphRef - SVG: Gráficos Vetoriais Escaláveis

glyphRef
========

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

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

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

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGGlyphRefElement`.

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

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

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

* `<altGlyph>`

sv


vkern - SVG: Gráficos Vetoriais Escaláveis

vkern
=====

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

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

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

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos principais »
### Atributos específicos

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

Este elemento implementa a interface do `SVGVKernElement`.

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

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


view - SVG: Gráficos Vetoriais Escaláveis

view
====

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

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

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

Attributes
----------

### Global attributes

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

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

### SVG

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

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

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

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

### Result

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

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

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

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

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

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


mask - SVG: Gráficos Vetoriais Escaláveis

mask
====

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

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

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

Exemplo
-------

» mask.svg

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGMaskElement`.

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

* `<clipPath>` (en-US)


desc - SVG: Gráficos Vetoriais Escaláveis

desc
====

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

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

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

Exemplo
-------

Atributos
---------

### Atributos globais

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

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

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

Este elemento implementa a interface `SVGDescElement`.

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

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

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

* `<title>`


text - SVG: Gráficos Vetoriais Escaláveis

text
====

O elemento SVG **`<text>`** desenha um elemento gráfico que consiste em texto. É possível aplicar um gradiente, pattern, clipping path, máscara ou filtro ao `<text>`, como qualquer outro elemento gráfico SVG.

If text is included in SVG not inside of a `<text>` element, it is not rendered. This is different than being hidden by default, as setting the `display (en-US)` property won't show the text.
```

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

```html
<svg viewBox="0 0 240 80" xmlns="https://www.w3.org/2000/svg">
  <style>
 .small {
 font: italic 13px sans-serif;
 }
 .heavy {
 font: bold 30px sans-serif;
 }

 /\* Note that the color of the text is set with the \*
 \* fill property, the color property is for HTML only \*/
 .Rrrrr {
 font: italic 40px serif;
 fill: red;
 }
 </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
```

Attributes
----------

`x (en-US)`

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

`y (en-US)`

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

`dx (en-US)`

 Shifts the text position horizontally from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`dy (en-US)`

 Shifts the text position vertically from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`rotate (en-US)`

 Rotates orientation of each individual glyph. Can rotate glyphs individually.
 *Value type*: **<list-of-number>** ; *Default value*: none; *Animatable*: **yes**

`lengthAdjust (en-US)`

 How the text is stretched or compressed to fit the width defined by the `textLength` attribute.
 *Value type*: `spacing`|`spacingAndGlyphs`; *Default value*: `spacing`; *Animatable*: **yes**

`textLength (en-US)`

 A width that the text should be scaled to fit.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

### 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)`, `dominant-baseline (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)`, `text-anchor (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 gráfico, Elemento de conteúdo textual |
| Conteúdo permitido | Dados de caracteres e qualquer número dos seguintes elementos, em qualquer ordem:Elementos de animaçãoElementos descritivosElementos filhos de conteúdo de texto`<a>` |

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

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

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

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

Related
-------

* Other SVG text related elements: **`<tspan>`**, `<tref>`, `<altGlyph>`


metadata - SVG: Gráficos Vetoriais Escaláveis

metadata
========

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

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

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

Exemplo
-------

Atributos
---------

### Atributos globais

* Atributos principais »
### Atributos específicos

*Não existem atributos específicos.*

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

Este elemento implementa a interface do `SVGMetadataElement`.

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

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


tref - SVG: Gráficos Vetoriais Escaláveis

tref
====

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

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

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

Exemplo
-------

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

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

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

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

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGTRefElement`.

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

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

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

* `<text>`


switch - SVG: Gráficos Vetoriais Escaláveis

switch
======

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

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

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

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

Exemplo
-------

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGSwitchElement`.

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

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


path - SVG: Gráficos Vetoriais Escaláveis

path
====

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

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

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

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

Exemplo
-------

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

Resultado:

Atributos
---------

### Atributos globais

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

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

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

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

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

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

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


script - SVG: Gráficos Vetoriais Escaláveis

script
======

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

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

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

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

Exemplo
-------

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

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

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

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

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

Resultado:

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGScriptElement`.

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

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

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

* Elemento `script` em HTML


circle - SVG: Gráficos Vetoriais Escaláveis

circle
======

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

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

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

Exemplo
-------

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

» circle.svg

Atributos
---------

### Atributos globais

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

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

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

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

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

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

* `<ellipse>`


linearGradient - SVG: Gráficos Vetoriais Escaláveis

linearGradient
==============

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

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

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

Example
-------

» linearGradient.svg

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface `SVGLinearGradientElement`.

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

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

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

* `<radialGradient>`
* `<stop>`


title - SVG: Gráficos Vetoriais Escaláveis

title
=====

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

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

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

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

Exemplo
-------

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

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

Atributos
---------

### Atributos globais

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

*Não existem atributos específicos.*

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

Este elemento implementa a interface do `SVGTitleElement`.

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

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

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

* `<desc>`


glyph - SVG: Gráficos Vetoriais Escaláveis

glyph
=====

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

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

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

Exemplo
-------

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

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

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

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

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGGlyphElement`.

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

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


g - SVG: Gráficos Vetoriais Escaláveis

g
=

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

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

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

Exemplo
-------

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

Atributos
---------

### Atributos globais

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

*There is no specific attributes.*

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

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

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

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


polyline - SVG: Gráficos Vetoriais Escaláveis

polyline
========

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

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

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

Exemplo
-------

» polyline.svg

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGPolylineElement`.

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

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

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

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


image - SVG: Gráficos Vetoriais Escaláveis

image
=====

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

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

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

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

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

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

Attributes
----------

### Global attributes

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

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

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

Example
-------

Basic rendering of a PNG image in SVG:

### SVG

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

### Result

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

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

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

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


radialGradient - SVG: Gráficos Vetoriais Escaláveis

radialGradient
==============

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

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

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

Exemplo
-------

» radialGradient.svg

Atributos
---------

### Atributos globais

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

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

Este elemento implementa a interface do `SVGRadialGradientElement`.

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

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

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

* `<linearGradient>`


tspan - SVG: Gráficos Vetoriais Escaláveis

tspan
=====

O elemento SVG **`<tspan>`** define um subtexto dentro de um elemento `<text>` ou outro elemento `<tspan>`. Permite o ajuste do estilo e / ou posição desse subtexto, conforme necessário.
```

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

```html
<svg viewBox="0 0 240 40" xmlns="https://www.w3.org/2000/svg">
  <style>
 text {
 font: italic 12px serif;
 }
 tspan {
 font: bold 10px sans-serif;
 fill: red;
 }
 </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>
```

Attributes
----------

`x (en-US)`

 The x coordinate of the starting point of the text baseline.
 *Value type*: **<length>**|**<percentage>** ; *Default value: none; Animatable*: **yes**

`y (en-US)`

 The y coordinate of the starting point of the text baseline.
 *Value type*: **<length>**|**<percentage>** ; *Default value: none; Animatable*: **yes**

`dx (en-US)`

 Shifts the text position horizontally from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`dy (en-US)`

 Shifts the text position vertically from a previous text element.
 *Value type*: **<length>**|**<percentage>** ; *Default value: none; Animatable*: **yes**

`rotate (en-US)`

 Rotates orientation of each individual glyph. Can rotate glyphs individually.
 *Value type*: **<list-of-number>** ; *Default value*: none; *Animatable*: **yes**

`lengthAdjust (en-US)`

 How the text is stretched or compressed to fit the width defined by the `textLength` attribute.
 *Value type*: `spacing`|`spacingAndGlyphs`; *Default value*: `spacing`; *Animatable*: **yes**

`textLength (en-US)`

 A width that the text should be scaled to fit.
 *Value type*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

### 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)`, `dominant-baseline (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)`, `text-anchor (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 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>` |

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

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

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

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