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