initial commit

12 files changed, 2225 insertions, 0 deletions

diff --git a/files/pt-br/web/svg/attribute/class/index.html b/files/pt-br/web/svg/attribute/class/index.html
new file mode 100644
index 0000000000..55fd46c6a0
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/class/index.html
@@ -0,0 +1,195 @@
+---
+title: class
+slug: Web/SVG/Attribute/class
+tags:
+  - Atributos SVG
+  - Classe
+  - Referencia
+  - SVG
+translation_of: Web/SVG/Attribute/class
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial da referência de atributos do SVG</a></p>
+
+<p>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.</p>
+
+<p>O nome de classe de um elemento tem duas funções principais:</p>
+
+<ul>
+ <li>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.</li>
+ <li>Para utilizações gerais do navegador.</li>
+</ul>
+
+<p>A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.</p>
+
+<h2 id="Utilização">Utilização</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorias</th>
+   <td>Nenhuma</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;list-of-class-names&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2ª Edição): O atributo class</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/pt-BR/SVG/Content_type","List-of-Ts") }}</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: html">&lt;html&gt;
+    &lt;body&gt;
+  &lt;svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;style type="text/css" &gt;
+      &lt;![CDATA[
+
+        rect.rectClass {
+           stroke: #000066;
+           fill:   #00cc00;
+        }
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]&gt;
+    &lt;/style&gt;
+
+      &lt;rect class="rectClass" x="10" y="10" width="100" height="100"/&gt;
+     &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+&lt;/svg&gt;
+&lt;/body&gt;&lt;/html&gt;</pre>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>Os seguintes elementos podem utilizar o atributo <code>class</code>:</p>
+
+<div class="threecolumns">
+<ul>
+ <li>{{ SVGElement("a") }}</li>
+ <li>{{ SVGElement("altGlyph") }}</li>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("defs") }}</li>
+ <li>{{ SVGElement("desc") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("feBlend") }}</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+ <li>{{ SVGElement("feComponentTransfer") }}</li>
+ <li>{{ SVGElement("feComposite") }}</li>
+ <li>{{ SVGElement("feConvolveMatrix") }}</li>
+ <li>{{ SVGElement("feDiffuseLighting") }}</li>
+ <li>{{ SVGElement("feDisplacementMap") }}</li>
+ <li>{{ SVGElement("feFlood") }}</li>
+ <li>{{ SVGElement("feGaussianBlur") }}</li>
+ <li>{{ SVGElement("feImage") }}</li>
+ <li>{{ SVGElement("feMerge") }}</li>
+ <li>{{ SVGElement("feMorphology") }}</li>
+ <li>{{ SVGElement("feOffset") }}</li>
+ <li>{{ SVGElement("feSpecularLighting") }}</li>
+ <li>{{ SVGElement("feTile") }}</li>
+ <li>{{ SVGElement("feTurbulence") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("g") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("line") }}</li>
+ <li>{{ SVGElement("linearGradient") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+ <li>{{ SVGElement("missing-glyph") }}</li>
+ <li>{{ SVGElement("path") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("polygon") }}</li>
+ <li>{{ SVGElement("polyline") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("switch") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("text") }}</li>
+ <li>{{ SVGElement("textPath") }}</li>
+ <li>{{ SVGElement("title") }}</li>
+ <li>{{ SVGElement("tref") }}</li>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+</ul>
+</div>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>(yes)</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte à animação</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("5") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/web/svg/attribute/contentstyletype/index.html b/files/pt-br/web/svg/attribute/contentstyletype/index.html
new file mode 100644
index 0000000000..2de26d899b
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/contentstyletype/index.html
@@ -0,0 +1,46 @@
+---
+title: contentStyleType
+slug: Web/SVG/Attribute/contentStyleType
+tags:
+  - Atributo SVG
+  - Obsoleto
+  - SVG
+translation_of: Web/SVG/Attribute/contentStyleType
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial de referência do atributo SVG</a></p>
+
+<p>Este atributo especifica a linguagem da folha de estilo do fragmento do documento especificado. O contentStyleType é definido no elemento {{ SVGElement("svg") }}. Caso não seja definido, o valor padrão assumido será <code>text/css</code>.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorias</th>
+   <td><em>Nenhuma</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor</th>
+   <td>&lt;content-type&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animável?</th>
+   <td>Não</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ContentStyleTypeAttribute" title="http://www.w3.org/TR/SVG/styling.html#ContentStyleTypeAttribute">SVG 1.1 (2ª Edição)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Uma vez que o CSS é a única linguagem de folha de estilos amplamente implementada para estilização online, bem como já está definida como valor padrão se o <code>contentStyleType</code> não estiver definido, o atributo não é bem suportado em motores de renderização. Se outra linguagem de folha de estilos se tornar mais popular, ela não poderá utilizar o atributo {{ SVGAttr("style") }}, ao invés disso, poderá ser facilmente declarada qual a linguagem de estilo está sendo utilizada através do atributo type da <code>tag</code> {{ SVGElement("style") }}.</p>
+
+<p>Portanto, a utilização de <code>contentStyleType</code> está obsoleto.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ SVGElement("style") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+</ul>
diff --git a/files/pt-br/web/svg/attribute/fill/index.html b/files/pt-br/web/svg/attribute/fill/index.html
new file mode 100644
index 0000000000..55e63023a9
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/fill/index.html
@@ -0,0 +1,461 @@
+---
+title: fill
+slug: Web/SVG/Attribute/fill
+tags:
+  - Atributo SVG
+  - SVG
+translation_of: Web/SVG/Attribute/fill
+---
+<div>{{SVGRef}}</div>
+
+<div>O atributo <strong><code>fill</code></strong> 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.</div>
+
+<div></div>
+
+<p>Como um atributo de apresentação, ele pode ser aplicado a qualquer elemento, mas só tem efeito nestes onze elementos seguintes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, e {{SVGElement('tspan')}}.</p>
+
+<p>Para animação, apenas cinco elementos utilizam este atributo, sendo elas: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, e {{SVGElement('set')}}.</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css notranslate">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Preenchimento simples com apenas uma cor --&gt;
+  &lt;circle cx="50" cy="50" r="40" fill="pink" /&gt;
+
+
+  &lt;!-- Preenchimento do circulo com gradiente --&gt;
+  &lt;defs&gt;
+    &lt;radialGradient id="myGradient"&gt;
+      &lt;stop offset="0%"   stop-color="pink" /&gt;
+      &lt;stop offset="100%" stop-color="black" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="150" cy="50" r="40" fill="url(#myGradient)" /&gt;
+
+
+  &lt;!--
+   Mantendo o estado final de um círculo animado
+   sendo um círculo com o raio de 40px.
+  --&gt;
+  &lt;circle cx="250" cy="50" r="20"&gt;
+    &lt;animate attributeType="XML"
+             attributeName="r"
+             from="0" to="40" dur="5s"
+             fill="freeze" /&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="altGlyph">altGlyph</h2>
+
+<p class="warning"><strong>Aviso</strong>: a partir da versão SVG2, a tag {{SVGElement('altGlyph')}} está obsoleta e não deve ser utilizada.</p>
+
+<p>Para {{SVGElement('altGlyph')}}, <code>fill</code> é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota</strong>: Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="animate">animate</h2>
+
+<p>Para {{SVGElement('animate')}}, o atributo <code>fill</code> define o estado final de uma animação.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Não</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateColor">animateColor</h2>
+
+<p class="warning"><strong>Aviso: </strong>A partir da versão de animação para modelos SVG2 {{SVGElement('animateColor')}} está obsoleto e não deve ser utilizado. Ao invés disso utilize {{SVGElement('animate')}}.</p>
+
+<p>Para {{SVGElement('animateColor')}}, o atributo <code>fill</code> define o estado final de uma animação.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Não</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateMotion">animateMotion</h2>
+
+<p>Para {{SVGElement('animateMotion')}}, o atributo <code>fill</code> define o estado final de uma animação.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Não</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateTransform">animateTransform</h2>
+
+<p>Para {{SVGElement('animateTransform')}}, o atributo <code>fill</code> define o estado final de uma animação.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Não</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="circle">circle</h2>
+
+<p>Para {{SVGElement('circle')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a coloração de um círculo.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Para {{SVGElement('ellipse')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de uma elipse.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="path">path</h2>
+
+<p>Para {{SVGElement('path')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="polygon">polygon</h2>
+
+<p>Para {{SVGElement('polygon')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="polyline">polyline</h2>
+
+<p>For {{SVGElement('polyline')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="rect">rect</h2>
+
+<p>Para {{SVGElement('rect')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um retângulo.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="set">set</h2>
+
+<p>Para {{SVGElement('set')}}, o atributo <code>fill</code> define o estado final de uma animação.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Não</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="text">text</h2>
+
+<p>Para {{SVGElement('text')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="textPath">textPath</h2>
+
+<p>For {{SVGElement('textPath')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="tref">tref</h2>
+
+<p class="warning"><strong>Aviso</strong>: a partir da versão SVG2, a tag {{SVGElement('tref')}} está obsoleta e não deve ser utilizada.</p>
+
+<p>Para {{SVGElement('tref')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="tspan">tspan</h2>
+
+<p>Para {{SVGElement('tspan')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valor</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valor Padrão</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animável</th>
+   <td>Sim</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Nota</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Definição para animações</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definição para formas e textos.<br>
+    Adiciona <code style="white-space: nowrap;">context-fill</code> e <code style="white-space: nowrap;">context-stroke</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definição inicial para animações</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definição inicial para formas e textos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade dos Browsers</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de pull.</div>
+
+<p>{{Compat("svg.attributes.presentation.fill")}}</p>
+
+<p class="note">Nota: Para obter informações do uso do <code style="white-space: nowrap;">context-fill</code> (e do <code style="white-space: nowrap;">context-stroke</code>) de documentos HTML, consulte a documentação da propriedade não-padrão <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span> .</p>
diff --git a/files/pt-br/web/svg/attribute/index.html b/files/pt-br/web/svg/attribute/index.html
new file mode 100644
index 0000000000..2d55d41922
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/index.html
@@ -0,0 +1,462 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - NeedsHelp
+  - NeedsTranslation
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p>
+
+<h2 id="SVG_Attributes">SVG Attributes</h2>
+
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("autoReverse") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("decelerate") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("onzoom") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("path") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("speed") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Animation_timing_attributes">Animation timing attributes</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Animation_value_attributes">Animation value attributes</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p>
+
+<h3 id="Animation_addition_attributes">Animation addition attributes</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Core_attributes">Core attributes</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p>
+
+<h3 id="Document_event_attributes">Document event attributes</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+
+<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Graphical_event_attributes">Graphical event attributes</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Presentation_attributes">Presentation attributes</h3>
+
+<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Transfer_function_attributes">Transfer function attributes</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="XLink_attributes">XLink attributes</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/pt-br/web/svg/attribute/keytimes/index.html b/files/pt-br/web/svg/attribute/keytimes/index.html
new file mode 100644
index 0000000000..5d2e3a2e46
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/keytimes/index.html
@@ -0,0 +1,95 @@
+---
+title: keyTimes
+slug: Web/SVG/Attribute/keyTimes
+translation_of: Web/SVG/Attribute/keyTimes
+---
+<div>{{SVGRef}}</div>
+
+<p>O atributo <code><strong>keyTimes</strong></code> 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 {{SVGAttr("values")}} e define quando o valor é usado na animação. Cada valor de tempo na lista <code>keyTimes</code> é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.</p>
+
+<p>Four elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, and {{SVGElement("animateTransform")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html, body, svg {
+  height: 100%;
+}</pre>
+</div>
+
+<pre class="brush: html; highlight[4,6]">&lt;svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="60" cy="10" r="10"&gt;
+    &lt;animate attributeName="cx" dur="4s" repeatCount="indefinite"
+        values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/&gt;
+    &lt;animate attributeName="cy" dur="4s" repeatCount="indefinite"
+        values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("topExample", "200", "200")}}</p>
+</div>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td>{{cssxref("number")}} [ <code>;</code> {{cssxref("number")}} ]* <code>;</code>?</td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The value of the <code>keyTimes</code> attribute is a semicolon-separated list of values.</p>
+
+<p>There must be exactly as many values in the <code>keyTimes</code> list as in the <code>values</code> list.</p>
+
+<p>Each successive time value must be greater than or equal to the preceding time value.</p>
+
+<p>The <code>keyTimes</code> list semantics depends upon the interpolation mode:</p>
+
+<ul>
+ <li>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 <code>1</code>. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li>
+ <li>For discrete animation, the first time value in the list must be <code>0</code>. 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.</li>
+</ul>
+
+<p>If the {{SVGAttr("calcMode")}} attribute is set to <code>paced</code>, the <code>keyTimes</code> attribute is ignored.</p>
+
+<p>If the duration of the animation is indefinite, any <code>keyTimes</code> specification will be ignored.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#KeyTimesAttribute", "keyTimes")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#KeyTimesAttribute", "keyTimes")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.animate.keyTimes")}}</p>
diff --git a/files/pt-br/web/svg/attribute/preserveaspectratio/index.html b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html
new file mode 100644
index 0000000000..ee9351ad58
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html
@@ -0,0 +1,420 @@
+---
+title: preserveAspectRatio
+slug: Web/SVG/Attribute/preserveAspectRatio
+translation_of: Web/SVG/Attribute/preserveAspectRatio
+---
+<div>{{SVGRef}}</div>
+
+<p>O atributo <code><strong>preserveAspectRatio</strong></code> indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.</p>
+
+<p>Because the aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute, if this attribute isn't set, the <code>preserveAspectRatio</code> attribute has no effect (<em>with one exception, the {{SVGElement('image')}} element, as described below</em>).</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;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" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;svg preserveAspectRatio="none"           x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<div class="hidden">
+<h6 id="topExample">topExample</h6>
+
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;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" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;rect x="0" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid meet" x="0" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMinYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMinYMid meet" x="25" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMaxYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMaxYMid meet" x="50" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;rect x="0" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMin slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMin slice" x="0" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid slice" x="25" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMax slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMax slice" x="50" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;rect x="75" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMin meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMin meet" x="75" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="90" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid meet" x="90" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="105" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMax meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMax meet" x="105" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;rect x="120" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMinYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMinYMid slice" x="120" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="135" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid slice" x="135" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="150" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMaxYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMaxYMid slice" x="150" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;rect x="0" y="30" width="160" height="60"&gt;
+    &lt;title&gt;none&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="160" height="60"
+       preserveAspectRatio="none" x="0" y="30"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">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;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">preserveAspectRatio="&lt;align&gt; [&lt;meetOrSlice&gt;]"</pre>
+
+<p>Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:</p>
+
+<dl>
+ <dt>Alignment value</dt>
+ <dd>The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the {{ SVGAttr("viewBox") }} doesn't match the aspect ratio of the viewport. The alignment value must be one of the following keywords:
+ <ul>
+  <li><strong>none</strong><br>
+   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. <em>Note that if </em><code>&lt;align&gt;</code><em> is </em><code>none</code><em>, then the optional </em><code>&lt;meetOrSlice&gt;</code><em> value is ignored</em>.</li>
+  <li><strong>xMinYMin</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMidYMin</strong> - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMaxYMin</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMinYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMaxYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMinYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMidYMax</strong> - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMaxYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+ </ul>
+ </dd>
+ <dt>Meet or slice reference</dt>
+ <dd>The meet or slice reference is optional and, if provided, must be one of the following keywords:
+ <ul>
+  <li><strong>meet</strong> (<em>the default</em>) - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In 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 {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li>
+  <li><strong>slice</strong> - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Elements">Elements</h2>
+
+<p>Seven elements are using this attribute: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p>
+
+<h3 id="feImage">feImage</h3>
+
+<p>For {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;feImage&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="image">image</h3>
+
+<p>For {{SVGElement('image')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code>&lt;image&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="marker">marker</h3>
+
+<p>For {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="pattern">pattern</h3>
+
+<p>For {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="svg">svg</h3>
+
+<p>For {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="symbol">symbol</h3>
+
+<p>For {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="view">view</h3>
+
+<p>For {{SVGElement('view')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html
new file mode 100644
index 0000000000..cbc2224c56
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html
@@ -0,0 +1,52 @@
+---
+title: stroke-dashoffset
+slug: Web/SVG/Attribute/stroke-dashoffset
+tags:
+  - Animação SVG
+  - Atributo SVG
+  - SVG
+translation_of: Web/SVG/Attribute/stroke-dashoffset
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>O atributo <code>stroke-dashoffset</code> especifica a distância entre o inicio traço e o fim.</p>
+
+<p>Se a <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> for usada, o valor representará a porcentagem do viewport atual.</p>
+
+<p>O valor pode ser negativo.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorias</th>
+   <td>Atributo de Apresentação</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor inicial</th>
+   <td>0</td>
+  </tr>
+  <tr>
+   <th scope="row">Animação</th>
+   <td>Sim</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento Normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>Os seguintes elementos podem utilizar o atributo <code>stroke-dashoffset</code></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
diff --git a/files/pt-br/web/svg/attribute/stroke/index.html b/files/pt-br/web/svg/attribute/stroke/index.html
new file mode 100644
index 0000000000..a930fb5f9e
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/stroke/index.html
@@ -0,0 +1,93 @@
+---
+title: stroke
+slug: Web/SVG/Attribute/stroke
+tags:
+  - Atributo SVG
+  - SVG
+translation_of: Web/SVG/Attribute/stroke
+---
+<div>{{SVGRef}}</div>
+
+<p>O atributo <code><strong>stroke</strong></code> é um atributo de apresentação que define a cor <em>(ou qualquer SVG</em> <em>paint servers, como gradientes ou </em> <em>patterns</em><em>)</em> usado para pintar o contorno da forma;</p>
+
+<p class="note"><strong>Note:</strong> As a presentation attribute <code>stroke</code> can be used as a CSS property.</p>
+
+<p>As a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Simple color stroke --&gt;
+  &lt;circle cx="5" cy="5" r="4" fill="none"
+          stroke="green" /&gt;
+
+  &lt;!-- Stroke a circle with a gradient --&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="myGradient"&gt;
+      &lt;stop offset="0%"   stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="15" cy="5" r="4" fill="none"
+          stroke="url(#myGradient)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for shapes and texts.<br>
+    Adds <code style="white-space: nowrap;">context-fill</code> and <code style="white-space: nowrap;">context-stroke</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for shapes and texts</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.stroke")}}</p>
+
+<p class="note"><strong>Note:</strong> For information on using the <code style="white-space: nowrap;">context-stroke</code> (and <code style="white-space: nowrap;">context-fill</code>) values from HTML documents, see the documentation for the non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span> property.</p>
diff --git a/files/pt-br/web/svg/attribute/style/index.html b/files/pt-br/web/svg/attribute/style/index.html
new file mode 100644
index 0000000000..f52028b64e
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/style/index.html
@@ -0,0 +1,75 @@
+---
+title: style
+slug: Web/SVG/Attribute/style
+tags:
+  - Atributo SVG
+  - SVG
+translation_of: Web/SVG/Attribute/style
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial de referência do atributo SVG</a></p>
+
+<p>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 {{ SVGAttr("contentStyleType") }} no elemento the {{ SVGElement("SVG") }}.</p>
+
+<h2 id="Contexto_de_uso">Contexto de uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorias</th>
+   <td>Atributo de apresentação</td>
+  </tr>
+  <tr>
+   <th scope="row">Valor</th>
+   <td>&lt;style&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animável?</th>
+   <td>Não</td>
+  </tr>
+  <tr>
+   <th scope="row">Documento Normativo</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ª Edição)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;style&gt;</dt>
+ <dd>A sintaxe do estilo depende de uma linguagem de folha de estilos. Por padrão, se {{ SVGAttr("contentStyleType") }} não for definido, a linguagem da folha de estilo utilizada será a CSS.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>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.</p>
+
+<pre class="brush: html">&lt;svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect height="300" width="600" x="200" y="100"
+     style="fill: red; stroke: blue; stroke-width: 3"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>Os seguintes elementos podem utilizar o atributo <code>style</code></p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Elementos "container"</a> »</li>
+ <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Elementos de filtro primitivo</a> »</li>
+ <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Elementos de gradiente</a> »</li>
+ <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Elementos gráficos</a> »</li>
+ <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Elementos estruturais</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Elementos de texto</a> »</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ SVGElement("style") }}</li>
+</ul>
diff --git a/files/pt-br/web/svg/attribute/version/index.html b/files/pt-br/web/svg/attribute/version/index.html
new file mode 100644
index 0000000000..f1ff5c1b8c
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/version/index.html
@@ -0,0 +1,58 @@
+---
+title: version
+slug: Web/SVG/Attribute/version
+translation_of: Web/SVG/Attribute/version
+---
+<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div>
+
+<p>The <strong><code>version</code></strong> attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root {{SVGElement("svg")}} element. It is purely advisory and has no influence on rendering or processing.</p>
+
+<p>While it is specified to accept any number, the only two valid choices are currently <code>1.0</code> and <code>1.1</code>.</p>
+
+<pre class="brush: html; highlight[1]">&lt;svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="10" y="10" width="80" height="80"/&gt;
+&lt;/svg&gt;</pre>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><code><a href="/en-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#SVGElementVersionAttribute", "version")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.svg.version")}}</p>
diff --git a/files/pt-br/web/svg/attribute/viewbox/index.html b/files/pt-br/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..ae6afe273f
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,200 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+translation_of: Web/SVG/Attribute/viewBox
+---
+<div>{{SVGRef}}</div>
+
+<p>O atributo <code><strong>viewBox</strong></code> define a posição e a dimensão, no espaço do usuário, de uma viewport SVG.</p>
+
+<p>The value of the <code>viewBox</code> attribute is a list of four numbers: <code><var>min-x</var></code>, <code><var>min-y</var></code>, <code><var>width</var></code> and <code><var>height</var></code>. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the <a href="/en-US/docs/Glossary/viewport">browser viewport</a>).</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+svg:not(:root) { display: inline-block; }</pre>
+</div>
+
+<pre class="brush: xml">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  with relative unit such as percentage, the visual size
+  of the square looks unchanged regardless of the viewBox
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  with a large viewBox the circle looks small
+  as it is using user units for the r attribute:
+  4 resolved against 100 as set in the viewBox
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  with relative unit such as percentage, the visual size
+  of the square looks unchanged regardless of the viewBox`
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  with a small viewBox the circle looks large
+  as it is using user units for the r attribute:
+  4 resolved against 10 as set in the viewBox
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;
+
+&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  The point of coordinate 0,0 is now in the center of the viewport,
+  and 100% is still resolve to a width or height of 10 user units so
+  the rectangle looks shifted to the bottom/right corner of the viewport
+  --&gt;
+  &lt;rect x="0" y="0" width="100%" height="100%"/&gt;
+
+  &lt;!--
+  With the point of coordinate 0,0 in the center of the viewport the
+  value 50% is resolve to 5 which means the center of the circle is
+  in the bottom/right corner of the viewport.
+  --&gt;
+  &lt;circle cx="50%" cy="50%" r="4" fill="white"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<p>The exact effect of this attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.</p>
+
+<p class="note"><strong>Note:</strong> Values for <code><var>width</var></code> or <code><var>height</var></code> lower or equal to <code>0</code> disable rendering of the element.</p>
+
+<p>Five elements are using this attribute: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, and {{ SVGElement("view") }}.</p>
+
+<h2 id="marker">marker</h2>
+
+<p>For {{SVGElement('marker')}}, <code>viewBox</code> defines the position and dimension for the content of the <code>&lt;marker&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="pattern">pattern</h2>
+
+<p>For {{SVGElement('pattern')}}, <code>viewBox</code> defines the position and dimension for the content of the pattern tile.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="svg">svg</h2>
+
+<p>For {{SVGElement('svg')}}, <code>viewBox</code> defines the position and dimension for the content of the <code>&lt;svg&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="symbol">symbol</h2>
+
+<p>For {{SVGElement('symbol')}}, <code>viewBox</code> defines the position and dimension for the content of the <code>&lt;symbol&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="view">view</h2>
+
+<p>For {{SVGElement('view')}}, <code>viewBox</code> defines the position and dimension for the content of the <code>&lt;view&gt;</code> element.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "coords.html#ViewBoxAttribute", "viewBox")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "coords.html#ViewBoxAttribute", "viewBox")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/svg/attribute/width/index.html b/files/pt-br/web/svg/attribute/width/index.html
new file mode 100644
index 0000000000..8ad4954e83
--- /dev/null
+++ b/files/pt-br/web/svg/attribute/width/index.html
@@ -0,0 +1,68 @@
+---
+title: Width
+slug: Web/SVG/Attribute/width
+translation_of: Web/SVG/Attribute/width
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>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.</p>
+
+<p>Esse atributo precisa ser especificado, exceto para o elemento {{ SVGElement("svg") }} onde o valor padrão é <strong>100% </strong>(com exceção do elemento root {{ SVGElement("svg") }} que contém pais HTML). e o {{ SVGElement("filter") }} e {{ SVGElement("mask") }}, elementos que o valor padrão é <strong>120%.</strong></p>
+
+<h2 id="Contexto_de_Uso">Contexto de Uso</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","Length") }}</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Elementos">Elementos</h2>
+
+<p>Os seguintes elementos podem user o atributo witdh</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+</ul>