initial commit

5 files changed, 792 insertions, 0 deletions

diff --git a/files/nl/web/svg/attribute/font-size-adjust/index.html b/files/nl/web/svg/attribute/font-size-adjust/index.html
new file mode 100644
index 0000000000..6e78784148
--- /dev/null
+++ b/files/nl/web/svg/attribute/font-size-adjust/index.html
@@ -0,0 +1,54 @@
+---
+title: font-size-adjust
+slug: Web/SVG/Attribute/font-size-adjust
+tags:
+  - HeeftCompatTabelNodig
+  - HeeftVoorbeeldNodig
+  - SVG
+  - SVG attribuut
+translation_of: Web/SVG/Attribute/font-size-adjust
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribuut referentie home</a></p>
+
+<p>Het <code>font-size-adjust</code> attribuut stelt auteurs in staat om een ​​aspectwaarde te specificeren voor een element dat de x-hoogte van het eerste keuze font in een vervangende font behoudt.</p>
+
+<p>Als een presentatie attribuut, kan het ook gebruikt worden  als een property direct in een CSS stylesheet, Zie {{ cssxref("font-size-adjust","CSS font-size-adjust") }} voor verdere informatie.</p>
+
+<h2 id="Gebruik_context">Gebruik context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categorieën</th>
+   <td>Presentatie attribuut</td>
+  </tr>
+  <tr>
+   <th scope="row">Waarde</th>
+   <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a> | <strong>none</strong> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Animeerbaar</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Normatief document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontSizeAdjustProperty" title="http://www.w3.org/TR/SVG11/text.html#FontSizeAdjustProperty">SVG 1.1 (2de Editie)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voorbeeld">Voorbeeld</h2>
+
+<h2 id="Elementen">Elementen</h2>
+
+<p>De volgende elementen kunnen het <code>font-size-adjust</code> attribuut gebruiken</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elementen</a> »</li>
+</ul>
+
+<h2 id="Zie_ook">Zie ook</h2>
+
+<ul>
+ <li>{{ cssxref("font-size-adjust","CSS font-size-adjust") }}</li>
+</ul>
diff --git a/files/nl/web/svg/attribute/index.html b/files/nl/web/svg/attribute/index.html
new file mode 100644
index 0000000000..5c7a5df19f
--- /dev/null
+++ b/files/nl/web/svg/attribute/index.html
@@ -0,0 +1,481 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - Drawing
+  - Landing
+  - NeedsHelp
+  - NeedsTranslation
+  - Responsive Design
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+  - Vector Graphics
+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>
+
+<p>SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered. Below is a list of all of the attributes available in SVG along with links to reference documentation to help you learn which elements support them and how they work.</p>
+
+<h2 id="SVG_attributes_A_to_Z">SVG attributes A to Z</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("fr") }}</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("href") }}</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("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("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("tabindex") }}</li>
+ <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="SVG_attributes_by_category">SVG attributes by category</h2>
+
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="Animation_attribute_target_attributes">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") }}, {{ SVGAttr("tabindex") }}</p>
+
+<h3 id="Document_event_attributes">Document event attributes</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}</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="Style_attributes">Style attributes</h3>
+
+<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</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>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li>
+</ul>
diff --git a/files/nl/web/svg/index.html b/files/nl/web/svg/index.html
new file mode 100644
index 0000000000..fcdb4471c5
--- /dev/null
+++ b/files/nl/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 based  <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 a text-based open Web standard. 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>
+
+<p>SVG was developed by the <a href="https://www.w3.org/">World Wide Web consortium(W3C) </a>since 1999.</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="https://github.com/w3c/svgwg/wiki/Testing">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>
+</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://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/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basis_transformaties/index.html
new file mode 100644
index 0000000000..1d19dd9ffa
--- /dev/null
+++ b/files/nl/web/svg/tutorial/basis_transformaties/index.html
@@ -0,0 +1,104 @@
+---
+title: Basistransformaties
+slug: Web/SVG/Tutorial/Basis_Transformaties
+tags:
+  - Gevorderd
+  - SVG
+  - SVG Handleiding
+  - animatie
+  - transformatie
+translation_of: Web/SVG/Tutorial/Basic_Transformations
+---
+<div>{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}</div>
+
+<p>Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement {{SVGElement("g")}} aan je voorstellen. Met de groep&lt;tag&gt;, kun je eigenschappen van een hele groep elementen ineens benoemen. Dat is overigens de enige functie van de "g". Voorbeeld:</p>
+
+<div id="two_blocks">
+<pre class="brush: html">&lt;svg width="30" height="10"&gt;
+    &lt;g fill="red"&gt;
+        &lt;rect x="0" y="0" width="10" height="10" /&gt;
+        &lt;rect x="20" y="0" width="10" height="10" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}</p>
+
+<p>Transformaties voeg je eenvoudig aan het element toe met het <code>transform</code>  attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.</p>
+
+<h2 id="Verplaatsing">Verplaatsing</h2>
+
+<p>Je kunt een element verplaatsen zonder de "x" en "y" positie te veranderen. Dit is handig als je de &lt;use&gt; gebruikt of een animatie benoemt. Hiervoor gebruik je de <code>translate()</code> functie.</p>
+
+<pre class="brush: html">&lt;svg width="40" height="50" style="background-color:#bff;"&gt;
+    &lt;rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .</p>
+
+<p>{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p>
+
+<p>Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.</p>
+
+<h2 id="Rotatie">Rotatie</h2>
+
+<p>Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de <code>rotate()</code> transformatie:</p>
+
+<pre class="brush: html">&lt;svg width="31" height="31"&gt;
+    &lt;rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes <code>rotate()</code> geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.</p>
+
+<p>{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p>
+
+<h2 id="Perspectief">Perspectief</h2>
+
+<p>Om een rechthoek in een ruit te transformeren gebruik je de <code>skewX()</code> en <code>skewY()</code> transformaties. Je moet ze apart/achtereenvolgens benoemen. Tussen de haakjes vemeld je de hoek waarin je de X of de Y as wilt vervormen ten opzichte van het origineel.</p>
+
+<h2 id="Schalen">Schalen</h2>
+
+<p><code>scale()</code> verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de <em>x </em>factor schaalt en de tweede voor de <em>y</em> factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld:  <var>0.5 verkleint de x of y tot 50%.  Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.</var></p>
+
+<h2 id="Complexe_transformaties_met_matrix()">Complexe transformaties met <code>matrix()</code></h2>
+
+<p>Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook de<code>matrix(a, b, c, d, e, f)</code> transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:</p>
+
+<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{oudeCoordinaten}} = a x_{\mathrm{nieuweCoordinaten}} + c y_{\mathrm{nieuweCoordinaten}} + e \\ y_{\mathrm{oudeCoordinaten}} = b x_{\mathrm{oudeCoordinaten}} + d y_{\mathrm{nieuweCoordinaten}} + f \end{matrix} \right. </annotation></semantics></math></p>
+
+<p>Zie een <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">concreet voorbeeld van de SVG transformatie documentatie</a>. Gedetailleerde informatie over de transformatiematrix vind je in <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Aanbevelingen</a>.</p>
+
+<h2 id="Effect_voor_het_coördinaten_systeem">Effect voor het coördinaten systeem</h2>
+
+<p>Als je transformaties gebruikt, verander je het gehele coördinatensysteem van het element dat je transformeert. Dat betekent dat de  elementen die je hebt gespecificeerd en hun kinderen niet langer door de oorspronkelijke coördinaten worden gevormd, maar dat die ook worden vergroot/verkleind, vervormd, verplaatst of geroteerd .</p>
+
+<pre class="brush: html">&lt;svg width="100" height="100"&gt;
+    &lt;g transform="scale(2)"&gt;
+        &lt;rect width="50" height="50" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>De vierkant hierboven wordt 100 bij 100 pixels.  De effecten van de transformaties kunnen echter ook nog eens beïnvloed worden door het gebruik van attributen zoals <code>userSpaceOnUse</code>.</p>
+
+<p>{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}</p>
+
+<h2 id="SVG_inbedden_in_SVG">SVG inbedden in SVG</h2>
+
+<p>Anders dan in HTML kun je in SVG <code>svg</code> elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem  toepassen (op ingebedde) elementen door een <code>viewBox</code>, <code>width</code> and <code>height</code> te benoemen. </p>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"&gt;
+  &lt;svg width="100" height="100" viewBox="0 0 50 50"&gt;
+    &lt;rect width="50" height="50" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>In het voorbeeld is de viewbox zo gedefinieerd ten opzichte van de hoogte en breedte, dat het coordinatenstelsel twee keer zo groot wordt. Het effect is gelijk die in het voorgaande voorbeeld</p>
+
+<p>{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}</p>
+
+<div>{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}</div>
diff --git a/files/nl/web/svg/tutorial/index.html b/files/nl/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..bc313966be
--- /dev/null
+++ b/files/nl/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>