---
title: SVG教本
slug: Web/SVG/Tutorial
tags:
  - MDC Project
  - NeedsContent
  - SVG
  - 'SVG:Tutorial'
translation_of: Web/SVG/Tutorial
---
<p><strong>変倍ベクタ図形</strong> (Scalable Vector Graphics; <a href="/ja/docs/SVG" title="SVG">SVG</a>) は図形をタグ付けするW3CのXML派生言語です。SVGは，Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。</p>

<p>本教本はSVGの内部構造の説明を目的としており，また技術的詳細が目白押しです。美しい画像を描きたいだけなら，より有用な資料は<a href="https://inkscape.org/learn/">Inkscapeの文書郡</a>にて見付かるでしょう。他に，W3Cの<a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG入門</a>も，良いSVG概説を提供しています。</p>

<div class="note">このチュートリアルは執筆の非常に早い段階にあります。もしあなたが可能なら、力を貸し、1 つまたは 2 つのパラグラフを書いて手助けしてください。ページ全体を書いていただければ、なお良いです。</div>

<h5 id="ゼロから始める_SVG_の紹介">ゼロから始める SVG の紹介</h5>

<ul>
 <li><a href="/ja/docs/SVG/Tutorial/Introduction" title="SVG/Tutorial/Introduction">概要</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Getting_Started" title="SVG/Tutorial/Getting_Started">始めましょう</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Positions" title="SVG/Tutorial/Positions">配置</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Basic_Shapes" title="SVG/Tutorial/Basic_Shapes">基本的な図形</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">パス</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Fills_and_Strokes" title="SVG/Tutorial/Fills_and_Strokes">塗りつぶしとストローク</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Gradients" title="SVG/Tutorial/Gradients">階調</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Patterns" title="SVG/Tutorial/Patterns">模様</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Texts" title="SVG/Tutorial/Texts">テキスト</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Basic_Transformations" title="SVG/Tutorial/Basic_Transformations">基本的なトランスフォーム</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Clipping_and_masking" title="SVG/Tutorial/Clipping_and_masking">クリッピングとマスキング</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Other_content_in_SVG" title="SVG/Tutorial/Other content in SVG">他の SVG コンテンツ</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Filter_effects" title="SVG/Tutorial/Filter effects">フィルタ効果</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/SVG_Fonts" title="SVG/Tutorial/SVG fonts">SVG フォント</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/SVG_Image_Tag" title="SVG/Tutorial/SVG Image Tag">SVG image 要素</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Tools_for_SVG" title="SVG/Tutorial/Tools_for_SVG">SVG のツール</a></li>
 <li><a href="/ja/docs/SVG/Tutorial/Other_Tutorials" title="SVG/Tutorial/Other_Tutorials">他のチュートリアル</a></li>
</ul>

<p>続く話題はより発展的であり、従って各々自身の教本を習得すべきです。</p>

<h5 id="JavaScript_による_SVG_のスクリプティング">JavaScript による SVG のスクリプティング</h5>

<p>未定</p>

<h5 id="SVG_フィルタのチュートリアル">SVG フィルタのチュートリアル</h5>

<p>未定</p>

<h5 id="SMIL_を用いた_SVG_のアニメーション">SMIL を用いた SVG のアニメーション</h5>

<p>未定</p>

<h5 id="SVG_によるフォント作成">SVG によるフォント作成</h5>

<p>未定</p>