3 files changed, 185 insertions, 0 deletions
diff --git a/files/vi/web/svg/index.html b/files/vi/web/svg/index.html
new file mode 100644
index 0000000000..b342e1ceb9
--- /dev/null
+++ b/files/vi/web/svg/index.html
@@ -0,0 +1,94 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - 2D Graphics
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - SVG
+  - TopicStub
+  - Web
+  - 'l10n:priority'
+translation_of: Web/SVG
+---
+<div class="callout-box"><strong><a href="/en-US/docs/SVG/Tutorial">Getting Started</a></strong><br>
+This tutorial will help get you started using SVG.</div>
+
+<p><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML">XML</a>-based markup language for describing two-dimensional <a class="external" href="https://en.wikipedia.org/wiki/Vector_graphics">vector graphics</a>.</span> SVG is essentially to graphics what <a href="/en-US/docs/Web/HTML">HTML</a> is to text.</p>
+
+<p>SVG is similar to Adobe's proprietary Flash technology, but it is a text-based open Web standard instead of a closed binary format. It is explicitly designed to work with other web standards such as <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, and <a href="/en-US/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt>
+ <dd>Details about each SVG element.</dd>
+ <dt><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt>
+ <dd>Details about each SVG attribute.</dd>
+ <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt>
+ <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt>
+ <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p>
+
+<h2 class="Community" id="Community">Community</h2>
+
+<ul>
+ <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
+</ul>
+
+<h2 class="Tools" id="Tools">Tools</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
+ <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li>
+ <li><a href="/en-US/docs/tag/SVG:Tools">More Tools...</a></li>
+ <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="Examples">Examples</h2>
+
+<ul>
+ <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) &amp; <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li>
+ <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li>
+ <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li>
+ <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li>
+ <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li>
+ <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li>
+ <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li>
+ <li>More samples (<a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
+</ul>
+
+<h3 id="Animation_and_interactions">Animation and interactions</h3>
+
+<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p>
+
+<ul>
+ <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li>
+ <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li>
+ <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li>
+ <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li>
+</ul>
+
+<h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games &amp; 3D experiments</h3>
+
+<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p>
+
+<ul>
+ <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li>
+ <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li>
+ <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li>
+ <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> &amp; <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li>
+ <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li>
+ <li><a href="http://jointjs.com">JointJS</a> (JavaScript diagramming library)</li>
+</ul>
+</div>
+</div>
diff --git a/files/vi/web/svg/tutorial/index.html b/files/vi/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..bc313966be
--- /dev/null
+++ b/files/vi/web/svg/tutorial/index.html
@@ -0,0 +1,59 @@
+---
+title: SVG Tutorial
+slug: Web/SVG/Tutorial
+tags:
+  - Intermediate
+  - NeedsContent
+  - NeedsHelp
+  - NeedsTranslation
+  - NeedsUpdate
+  - SVG
+  - 'SVG:Tutorial'
+  - TopicStub
+translation_of: Web/SVG/Tutorial
+---
+<p>Scalable Vector Graphics, <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.</p>
+
+<p>This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at <a class="external" href="https://inkscape.org/en/learn/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>. Another good introduction to SVG is provided by the W3C's <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p>
+
+<div class="note">The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!</div>
+
+<h5 id="Introducing_SVG_from_Scratch">Introducing SVG from Scratch</h5>
+
+<ul>
+ <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG Image tag</a></li>
+ <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG and CSS</a></li>
+</ul>
+
+<p>The following topics are more advanced and hence should get their own tutorials.</p>
+
+<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5>
+
+<p>TBD</p>
+
+<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5>
+
+<p>TBD</p>
+
+<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5>
+
+<p>TBD</p>
+
+<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5>
+
+<p>TBD</p>
diff --git a/files/vi/web/svg/tutorial/svg_image_tag/index.html b/files/vi/web/svg/tutorial/svg_image_tag/index.html
new file mode 100644
index 0000000000..9b5c077b20
--- /dev/null
+++ b/files/vi/web/svg/tutorial/svg_image_tag/index.html
@@ -0,0 +1,32 @@
+---
+title: SVG image element
+slug: Web/SVG/Tutorial/SVG_Image_Tag
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
+
+<p>Element SVG {{ SVGElement("image") }} cho phép bạn hiển thị hình ảnh bên trong một object SVG:</p>
+
+<p>TRong ví dụ đơn giản này, một ảnh jpg được tham chiếu bởi một thuộc tính {{ SVGAttr("href") }} sẽ hiển thị bên trong một object SVG:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+	&lt;image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Đây là một vài điều quan trọng bạn cần lưu ý (được tham khảo từ <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a>):</p>
+
+<ul>
+ <li>
+  <p>Nếu bạn không đặt giá trị cho thuộc tính x hoặc y thì chúng sẽ có giá trị mặc định là 0.</p>
+ </li>
+ <li>
+  <p>Nếu bạn không đặt giá trị cho thuộc tính height hoặc width thì chúng sẽ có giá trị mặc định là 0.</p>
+ </li>
+ <li>Nếu thuộc tính height hoặc width có có giá trị là 0, image sẽ không được render(không hiển thị).</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>