initial commit

5 files changed, 367 insertions, 0 deletions

diff --git a/files/es/web/svg/tutorial/getting_started/index.html b/files/es/web/svg/tutorial/getting_started/index.html
new file mode 100644
index 0000000000..c4a332ed02
--- /dev/null
+++ b/files/es/web/svg/tutorial/getting_started/index.html
@@ -0,0 +1,96 @@
+---
+title: Getting Started
+slug: Web/SVG/Tutorial/Getting_Started
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">Un Ejemplo Simple</h3>
+
+<p>Permitanos introducirlo con un sencillo ejemplo. Mire el siguiente codigo :</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Copie el código y guárdelo como demo1.svg. Luego ábralo en Firefox. Lo verá como se ve en la siguiente figura. (usuarios Firefox : click <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">aqui</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>El proceso de renderizado incluye lo siguiente :</p>
+
+<ol>
+ <li>Comenzamos con el elemento raiz del <code>svg</code>:
+
+  <ul>
+   <li>La declaracion de tipo de documento (doctype) usual en  (X)HTML debería dejarse de lado debido a que la  validación DTD based SVG conduce a mas problemas que soluciones.</li>
+   <li>En cambio,  los atributos <code>version</code> y <code>baseProfile </code>deberian ser usados siempre para identificar la version de SVG para otro tipo de validaciones.</li>
+   <li>Debido a SVG es una especie de dialecto de XML, SVG debe unir siempre los namespaces correctamente (en el atributo xmlns). Para mayor información, vea  <a href="/en/docs/Web/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">Namespaces Crash Course</a>.</li>
+  </ul>
+ </li>
+ <li>El fondo esta puesto en rojo dibujando un rectangulo <a href="/en/SVG/Element/rect" title="en/SVG/Element/rect"><code>&lt;rect/&gt;</code></a> que cubre el area de la imagen.</li>
+ <li>Un circulo verde <a href="/en/SVG/Element/circle" title="en/SVG/Element/circle"><code>&lt;circle/&gt;</code></a> con un radio de 80px y se dibuja en el centro del rectangulo rojo(offset 30+120px inward, and 50+50px upward).</li>
+ <li>El texto "SVG" esta dibujado. El interior de cada letra esta relleno con blanco.
+  <div id="gt-src-tools">
+  <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">El texto</span> <span class="hps">se coloca</span> <span class="hps">mediante el establecimiento de</span> <span class="hps">un ancla</span> <span class="hps">en</span> <span class="hps">donde queremos que</span> <span class="hps">el punto medio</span> <span class="hps">sea</span><span>:</span></span> en este caso, el punto medio debe corresponder al centro del circulo verde. <span id="result_box" lang="es"><span class="hps">Los ajustes finos</span> <span class="hps">se pueden hacer</span> <span class="hps">con el</span> <span class="hps">tamaño de la fuente</span> <span class="hps">y la posición</span> <span class="hps">vertical para</span> <span class="hps">garantizar</span> <span class="hps">que el resultado final sea</span> <span class="hps">estéticamente agradable.</span></span></div>
+  </div>
+ </li>
+</ol>
+
+<h3 id="Basic_properties_of_SVG_files">Basic properties of SVG files</h3>
+
+<ul>
+ <li>The first important thing to notice is the order of rendering of elements. The globally valid rule for SVG files is, that <em>later</em> elements are rendered <em>atop previous</em> elements. The further down an element is the more will be visible.</li>
+ <li>SVG files on the web can be displayed directly in the browser or embedded in HTML files via several methods:
+  <ul>
+   <li>If the HTML is XHTML and is delivered as type <code>application/xhtml+xml</code>, the SVG can be directly embedded in the XML source.</li>
+   <li>If the HTML is HTML5, and the browser is a conforming HTML5 browser, the SVG can be directly embedded, too. However, there may be syntax changes necessary to conform to the HTML5 specification</li>
+   <li>The SVG file can be referenced with an <code>object</code> element:
+    <pre>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+   </li>
+   <li>Likewise an <code>iframe</code> element can be used:
+    <pre>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+   </li>
+   <li>An <code>img</code> element can be used theoretically, too. However this technique doesn't work in Firefox before 4.0.</li>
+   <li>Finally SVG can be created dynamically with JavaScript and injected into the HTML DOM. This has the advantage, that replacement technologies for browsers, that can't process SVG, can be implemented.</li>
+  </ul>
+  See <a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">this dedicated article</a> for an in-depth dealing with the topic.</li>
+ <li>How SVG handles sizes and units will be explained <a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">on the next page</a>.</li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types">SVG File Types</h3>
+
+<p>SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).</p>
+
+<p>Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from Microsofts IIS server, and Firefox can not load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a webserver that you know will serve it correctly (see below).</p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">A Word on Webservers</h3>
+
+<p>Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP header:</p>
+
+<pre>Content-Type: image/svg+xml
+</pre>
+
+<p>For gzip-compressed SVG files, servers should send the HTTP headers:</p>
+
+<pre>Content-Type: image/svg+xml
+Content-Encoding: gzip
+</pre>
+
+<p>You can check that your server is sending the correct HTTP headers with your SVG files by using a site such as <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">server configuration page</a> on the SVG wiki for a range of simple solutions.</p>
+
+<p>Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.</p>
+
+<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>
+
+<p>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p>
diff --git a/files/es/web/svg/tutorial/index.html b/files/es/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..e1a2b9a408
--- /dev/null
+++ b/files/es/web/svg/tutorial/index.html
@@ -0,0 +1,57 @@
+---
+title: Tutorial de SVG
+slug: Web/SVG/Tutorial
+tags:
+  - Intermedio
+  - NeedsTranslation
+  - NesecitaActualizacion
+  - NesecitaAyuda
+  - NesecitaContenido
+  - SVG
+  - TopicStub
+  - Tutorial de SVG
+translation_of: Web/SVG/Tutorial
+---
+<p>Los graficos de vectores escalables, SVG , es un dialecto XML de W#C usado para describir graficos. Esta parcialente implementado en Firefox, Opera, WebKit , Internet Explorer y otros.</p>
+
+<p>Este tutorial intenta explicar SVG a profundidad y esta elaborado con detalles tecnicos. Si quieres dibujar hermosas imagenes, podras encontrar recursos mas utiles en la <a href="https://inkscape.org/en/learn/">Documentacion de Inkscape</a> . Otra buena introduccion es brindada por el W3C's <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html"> SVG Primer</a> . </p>
+
+<h5 id="Presentando_SVG_desde_cero">Presentando SVG desde cero</h5>
+
+<ul>
+ <li><a href="/en-US/SVG/Tutorial/Introduction" title="en-US/SVG/Tutorial/Introduction">Introducción</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Getting_Started" title="en-US/SVG/Tutorial/Getting_Started">Comenzando</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Positions" title="en-US/SVG/Tutorial/Positions">Posiciones</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Basic_Shapes" title="en-US/SVG/Tutorial/Basic_Shapes">Figuras básicas</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Paths" title="en-US/SVG/Tutorial/Paths">Paths</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Fills_and_Strokes" title="en-US/SVG/Tutorial/Fills_and_Strokes">Rellenos y trazos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Gradients" title="en-US/SVG/Tutorial/Gradients">Gradientes</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Patterns" title="en-US/SVG/Tutorial/Patterns">Patrones</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Texts" title="en-US/SVG/Tutorial/Texts">Textos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Basic_Transformations" title="en-US/SVG/Tutorial/Basic_Transformations">Transformaciones básicas</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Clipping_and_masking" title="en-US/SVG/Tutorial/Clipping_and_masking">Recortes y máscaras</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Other_content_in_SVG" title="en-US/SVG/Tutorial/Other content in SVG">Otros contenidos en SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Filter_effects" title="en-US/SVG/Tutorial/Filter effects">Filtros y efectos</a></li>
+ <li><a href="/en-US/SVG/Tutorial/SVG_fonts" title="en-US/SVG/Tutorial/SVG fonts">Fuentes SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/SVG_Image_Tag" title="en-US/SVG/Tutorial/SVG Image Tag">Etiquetas de imágenes SVG</a></li>
+ <li><a href="/en-US/SVG/Tutorial/Tools_for_SVG" title="en-US/SVG/Tutorial/Tools_for_SVG">Herramientas de SVG</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/SVG/Tutorial/Other_Tutorials">Otros tutoriales</a></li>
+</ul>
+
+<p>Los siguientes temas son más avanzados, por lo tanto deben tener sus propios tutoriales.</p>
+
+<h5 id="Scripting_SVG_con_JavaScript">Scripting SVG con JavaScript</h5>
+
+<p>TBD</p>
+
+<h5 id="Tutorial_filtros_SVG">Tutorial filtros SVG</h5>
+
+<p>TBD</p>
+
+<h5 id="Animaciones_con_SMIL_en_SVG">Animaciones con SMIL en SVG</h5>
+
+<p>TBD</p>
+
+<h5 id="Creación_de_fuentes_en_SVG">Creación de fuentes en SVG</h5>
+
+<p>TBD</p>
diff --git a/files/es/web/svg/tutorial/introducción/index.html b/files/es/web/svg/tutorial/introducción/index.html
new file mode 100644
index 0000000000..759ef2dbf9
--- /dev/null
+++ b/files/es/web/svg/tutorial/introducción/index.html
@@ -0,0 +1,45 @@
+---
+title: Introducción
+slug: Web/SVG/Tutorial/Introducción
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+
+<p><img alt="Ejemplo de imagenes vectoriales, una cría de leon, una curva con flechas direccionales a intervalos regulares y un texto que sigue una trayectoria ondulada" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/es/docs/Web/SVG" lang="es" title="es/docs/Web/SVG">SVG</a> es un lenguaje <a href="/es/docs/Introducción_a_XML" lang="es" title="es/docs/Introducción_a_XML">XML</a>, parecido a <a href="/es/docs/XHTML" lang="es" title="es/docs/XHTML">XHTML</a>, el cual puede ser usado para dibujar gráficos vectoriales, como los mostrados a la derecha. Puede ser usado para crear una imagen ya sea especificando todas las líneas y formas necesarias, modificando las imágenes matriciales (raster images) o una combinación de ambas. La imagen y sus componentes pueden ser transformados, compuestos o filtrados para cambiar completamente su apariencia.</p>
+
+<p>SVG surgió en 1999 después de que varios formatos compitieran y fueran propuestos a la <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a> los cuales fallaron para ser completamente ratificados. SVG es soportado por los principales <a href="https://caniuse.com/#search=svg">navegadores</a>. Un inconveniente es que cargar un SVG puede ser lento. SVG ofrecen beneficios, algunos de los cuales incluyen tener una <a href="/en-US/docs/Web/API">interfaz</a> <a href="/en-US/docs/Web/API">DOM </a>disponible para éste, y no requerir extensiones de terceros. Usarlo o no a menudo dependerá de tu caso específico de uso.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="Ingredientes_básicos">Ingredientes básicos</h3>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>  provee elementos que definen encabezados, párrafos, tablas, etc. En forma muy similar, SVG provee elementos para círculos, rectángulos, y curvas simples y complejas. Un documento SVG simple consiste de nada más que el elemento raíz {{ SVGElement('svg') }} y varias formas básicas que construyen todas juntas un gráfico. En adición está el elemento {{ SVGElement('g') }}, el cual es usado para agrupar varias formas básicas.</p>
+
+<p>Desde este punto, la imagen SVG puede volverse arbitrariamente compleja. SVG soporta gradientes, rotaciones, efectos de filtro, animaciones, interactividad con JavaScript y más. Pero todas esas características adicionales del lenguaje dependen de este conjunto relativamente pequeño de elementos para definir el area de gráficos.</p>
+
+<h3 id="Before_you_start" name="Before_you_start">Antes de empezar</h3>
+
+<p>Existe un número de programas de dibujo disponibles como <a class="external" href="http://www.inkscape.org/">Inkscape</a> los cuales son gratis y usan SVG como su formato nativo. Sin embargo, este tutorial se basará en el confiable XML o editor de texto (a tu criterio). La idea es enseñar el funcionamiento interno de SVG a aquellos que desean comprenderlo, y eso se logra mejor ensuciando tus manos con un poco de maquetado. De todos modos deberías fijarte tus objetivos. No todos los visores de SVG son iguales por lo que es posible que algo escrito para una aplicación no se verá exactamente igual en otra, simplemente porque soportan diferentes niveles de la especificación SVG u otra especificación que estés utilizando junto con SVG (es decir, <a href="/es/JavaScript" lang="es" title="es/JavaScript">JavaScript</a> o <a href="/es/CSS" lang="es" title="es/CSS">CSS</a>).</p>
+
+<p>SVG es soportado en todo navegador moderno e incluso hasta un par de versiones anteriores en algunos casos. Una tabla bastante completa de soporte por navegadores puede verse en <a href="http://caniuse.com/svg">Can I use</a>. Firefox ha soportado algo de contenido SVG desde su versión 1.5 y el nivel de soporte ha ido creciendo con cada versión desde entonces. Con algo de optimismo, junto con este tutorial, MDN puede ayudar a los desarrolladores a estar al tanto de las diferencias entre Gecko y algunas de las otras implementaciones mas importantes.</p>
+
+<p>Antes de empezar deberías tener conceptos básicos de XML u otro lenguaje de maquetado como <abbr title="HyperText Markup Language">HTML</abbr>. Si no estás del todo familiarizado con XML, aquí hay algunas máximas a tener presentes:</p>
+
+<ul>
+ <li>Los elementos SVG y sus atributos deben ser escritos en la misma capitalización mostrada ya que XML es sensible a mayúsculas (en contraposición a HTML).</li>
+ <li>Los valores de atributos en SVG deben ir entre comillas, incluso si son números.</li>
+</ul>
+
+<p>SVG es una especificación muy extensa. Este instructivo intenta cubrir lo básico. Una vez que te hayas familiarizado deberías ser capaz de usar la <a href="/es/docs/Web/SVG/Element" lang="es" title="es/docs/Web/SVG/Element">Referencia de elementos</a> y la <a href="/es/docs/DOM/DOM_Reference#SVG_interfaces" lang="es" title="es/SVG/Interface">Referencia de interface</a> para encontrar cualquier otra cosa que necesites saber.</p>
+
+<h3 id="SVG_y_sus_sabores">SVG y sus sabores</h3>
+
+<p>Desde que se volvió una recomendación en 2003, la versión "completa" mas reciente de SVG es 1.1. Se edifica sobre SVG 1.0, añadiendo mas modularización para facilitar su implementación. <a href="http://www.w3.org/TR/SVG/" lang="en">La segunda edición de SVG 1.1</a> se volvió una Recomendación en 2011. SVG 1.2 iba a ser la próxima entrega de SVG. Fue descartada en favor de la próxima <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, la cual está siendo desarrollada ahora mismo y sigue un enfoque similar a CSS 3 en que divide componentes en varias especificaciones vagamente relacionadas.</p>
+
+<p>En adición a la recomendación de SVG completo, el grupo de trabajo en W3C introdujo SVG Tiny y SVG Basic en 2003. Estos perfiles apuntan principalmente a dispositivos móviles. El primero, SVG Tiny, debería brindar primitivas de gráficos para dispositivos pequeños con capacidades bajas. SVG Basic ofrece muchas de las prestaciones del SVG completo, pero no incluye aquellas difíciles de implementar o costosas de representar (como animaciones). En 2008, SVG Tiny 1.2 se volvió una Recomendación W3C.</p>
+
+<p>Hubo planes para una especificación SVG Print, la cual habría agregado soporte para páginas múltiples y administración de color mejorada. Esta tarea fue abandonada.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
diff --git a/files/es/web/svg/tutorial/svg_in_html_introduction/index.html b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..ff4bede205
--- /dev/null
+++ b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,95 @@
+---
+title: SVG In HTML Introduction
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h2 id="Overview" name="Overview">Overview</h2>
+
+<p>This article and its associated example shows how to use inline <a href="/en-US/docs/SVG" title="SVG">SVG</a> to provide a background picture for a form. It shows how <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> and <a href="/en-US/docs/CSS" title="CSS">CSS</a> can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.</p>
+
+<h2 id="Source" name="Source">Source</h2>
+
+<p>Here is the source to <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">the example</a>:</p>
+
+<pre class="brush: html">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+&lt;title&gt;XTech SVG Demo&lt;/title&gt;
+&lt;style&gt;
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+&lt;/style&gt;
+&lt;script&gt;
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;HTML Form&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+    &lt;input type="text"/&gt;
+    &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="button" value="Activate!" onclick="signalError();" /&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+  &lt;linearGradient id="gradient"&gt;
+    &lt;stop class="begin" offset="0%"/&gt;
+    &lt;stop class="end" offset="100%"/&gt;
+  &lt;/linearGradient&gt;
+  &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+  &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+&lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Discussion" name="Discussion">Discussion</h2>
+
+<p>The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the &lt;svg&gt; element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the <code>invalid</code> attribute on the &lt;body&gt;, and a style rule changes the gradient <code>end-stop</code> color to red. (Another style rule makes an error message appear.)</p>
+
+<p>This approach has the following points in its favor:</p>
+
+<ul>
+ <li>We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background</li>
+ <li>The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them</li>
+ <li>It's very simple and performs very well</li>
+ <li>The picture dynamically sizes itself to the required size in an intelligent way</li>
+ <li>We can have declarative style rules applying to both HTML and SVG</li>
+ <li>The same script manipulates both HTML and SVG</li>
+ <li>The document is entirely standards-based</li>
+</ul>
+
+<div class="note">
+<p>To add a linked image with DOM methods to an embedded SVG element, one has to use <code>setAttributeNS</code> to set <code>href</code>. Like in the following example:</p>
+
+<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+</pre>
+</div>
+
+<h2 id="Details" name="Details">Details</h2>
+
+<p>The <code>viewBox</code> attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.</p>
+
+<p>The <code>preserveAspectRatio</code> attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.</p>
+
+<p>The <code>style</code> attribute pins the SVG element to the background of the form.</p>
+
+<h2 id="Related_Links" name="Related_Links">Related Links</h2>
+
+<ul>
+ <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
+ <li><a class="external" href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)</li>
+</ul>
diff --git a/files/es/web/svg/tutorial/tools_for_svg/index.html b/files/es/web/svg/tutorial/tools_for_svg/index.html
new file mode 100644
index 0000000000..99c50f9aed
--- /dev/null
+++ b/files/es/web/svg/tutorial/tools_for_svg/index.html
@@ -0,0 +1,74 @@
+---
+title: Tools for SVG
+slug: Web/SVG/Tutorial/Tools_for_SVG
+translation_of: Web/SVG/Tutorial/Tools_for_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p> </p>
+
+<p>Ahora que hemos cubierto los aspectos básicos de los componentes internos de SVG, analizaremos algunas herramientas para trabajar con archivos SVG.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>A partir de Internet Explorer 9, la mayoria de los navegadores soportan SVG: IE 9, Mozilla Firefox, Safari, Google Chrome y Opera. Los dispositivos mobiles que estan basado en los navegadores Webkit tambien soportan SVG. En dispositivos más antiguos o más pequeños, es probable que se admita SVG Tiny</p>
+
+<h2 id="Inkscape">Inkscape</h2>
+
+<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p>
+
+<p>Una de las herramientas más importantes para un formato de gráficos es un programa de dibujo decente. Inkscape ofrece dibujos vectoriales de última generación, y es de código abierto.</p>
+
+<p>Además, utiliza SVG como su formato de archivo nativo. Para almacenar datos específicos de Inkscape, extiende el archivo SVG con elementos y atributos en un espacio de nombres personalizado, pero también puede optar por exportar como SVG simple.</p>
+
+<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
+
+<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
+
+<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p>
+
+<h2 id="Apache_Batik">Apache Batik</h2>
+
+<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
+
+<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p>
+
+<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p>
+
+<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p>
+
+<h3 id="Other_renderers">Other renderers</h3>
+
+<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p>
+
+<h2 id="Raphael_JS">Raphael JS</h2>
+
+<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
+
+<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p>
+
+<h2 id="Snap.svg">Snap.svg</h2>
+
+<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
+
+<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p>
+
+<section id="sect1"> </section>
+
+<h2 id="Google_Docs">Google Docs</h2>
+
+<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
+
+<p>Drawings from Google Docs can be exported as SVG.</p>
+
+<h2 id="Science">Science</h2>
+
+<p>The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.</p>
+
+<p>In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See <a class="external" href="http://carto.net">carto.net</a> for details.</p>
+
+<h2 id="More_tools!">More tools!</h2>
+
+<p>The W3C offers a <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">list of programs</a> that support SVG.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>