svg要素の基本的な使い方まとめ

記事についての著作権はdefghi1977に帰属しますが，svgの学習目的であれば"間違いがあることを前提に"自由に利用してもらって構いません．またsvgのサンプルコードは自由に使って下さい．どしどし使ってsvgを盛り上げていきましょう

文書構造

ないものもある

TODO

変換

リンク

<b>

<s>

インラインコード

箇条書き

code:js

{

const section = document.querySelector("section");

const title = section.querySelector("h1").textContent;

const articles = Array.from(section.getElementsByTagName("article"))

.map((dom) => {

const article = { title, nodes: [], subsections: [], }; // 初期タイトルはH1を使う

let subsection;

for (const child of Array.from(dom.children)) {

switch(child.tagName) {

case "H2":

article.title = child.textContent;

break;

case "H3":

if (subsection) {

article.subsections.push(subsection);

}

subsection = { title: child.textContent, nodes: [] };

break;

case "DIV":

if (child.classList.contains("svg")) {

const code = child.querySelector("code").innerText;

(subsection ?? article).nodes.push([

"code:svg",

"",

].join("\n"));

break;

}

// fall throughさせる

case "P":

case "DL":

case "UL":

(subsection ?? article).nodes.push(child.innerText);

break;

case "OBJECT":

break;

default:

break;

}

}

if (subsection) {

article.subsections.push(subsection);

}

return article;

});

console.log({title, articles});

}

目次

svgの基礎知識

svgを取り扱うにあたっての心構えや，取り巻く環境について説明する．

svg要素とsvg文書

svg文書の基本となる事項について説明し，htmlでの取扱いについて説明する．

svg要素

入れ子になったsvg要素

図形の描画と図形のグループ化

svgで図形を描く上で最も基本となる要素について説明する．

path，line，rect，circle，ellipse，polyline，polygon，g要素，stroke属性，fill属性，color属性

図形の変形

図形の変形について説明する．

transform属性

図形の定義と再利用

svgのモジュール化と画像の読み込みについて説明する．

defs，use，symbol，image要素

スタイル設定

svgにおけるスタイルの指定とxslによるsvgの生成法について解説する．

style要素

マーカーの定義と設定

線要素の端点図形について説明する．

marker要素

文字列の挿入

svgにおけるテキストの取扱いについて説明する．

text，tspan，tref，textPath，altGryph要素

グラデーションとパターン

図形の塗りつぶし方法について説明する．

linearGradient，radialGradient，pattern要素

画像の合成

図形の描画領域の制限や重ね合わせについての説明を行う．

clip，clipPath，mask要素

画像効果

svgのもつ様々な画像効果について説明する．

filter要素，原始フィルター要素

アニメーション

svgのもつアニメーション機構について説明する

animate，set，animateMotion，mPath，animateColor，animateTransform要素

連携・拡張

svgの文書としての様々な外部連携機能について説明する．

a，foreignObject，metadata要素

図形の表示とカーソルイベント

図形の表示とカーソルイベントの発生の関わりについて説明する．

cursor要素，display，visibility，pointer-events属性

スクリプティング

svgにおけるjavascriptの実装法について説明する．

script要素

フォント定義

svgフォントの構成について概説する．

font，font-face，glyph，missing-glyph要素

その他の要素と属性

上記の説明から漏れた要素について説明する．

switch，view，color-profile要素

svg tinyで定義されているその他の要素について概説する．

Raphaëlを用いたベクタグラフィックの描き方について説明する．

D3.jsを用いて実際にグラフを描いて基本的な使い方を学ぶ．

sieを用いてieを含めたクロスブラウザでのsvgの描画をさせる方法を解説する．

canvgを用いてsvgとcanvas要素との連携を紹介する．

目的別リンク

svgで実現したい機能をリストアップした．