SVGについて
SVGについて試してみます。
SVGは Scalavle Vector Grapthics の略です。
画像ファイルには、ラスター形式(jpg、gif、png等)と、ベクター形式があり、SVGはベクター情報になります。
大きな特徴としては、SVGは拡大縮小しても描画精度には影響しません。
ラスター画像の場合は、拡大するとピクセル単位の表示が拡大され、画像の精度が荒くなります。
ここではSVGで表現できる方法を一つ一つ試してみようと思います。
下記に簡単なサンプルを用意しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300"> <defs> <linearGradient id="test1"> <stop offset="0%" stop-color="#ccc" /> </linearGradient> </defs> <rect x="10" y="10" width="300" height="200" stroke="#fff" storoke-width="20" fill="url(#test1)"/> </svg> </body> </html>
画面にアクセスすると、rectタグで指定したサイズの長方形が表示されます。
画面の大きさを変えた場合でも、長方形が拡大縮小されることがわかります。
ただし、この長方形は単色で塗りつぶしただけなので、SVGの特徴はわかりにくいです。
本来、ラスター画像なので、座標情報を元に画像が描画されているので、そのサンプルは別な投稿で試します。
「http://www.w3.org/2000/svg」という文字列は慣習的に決められており、この後のサンプルでも同じように記述します。
また、linearGradient要素に複数の色情報を記述すると、グラデーションで表示されます。
下記サンプルを試してみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300"> <defs> <linearGradient id="test1"> <stop offset="0%" stop-color="#cccccc" /> <stop offset="50%" stop-color="#ffffff" /> <stop offset="70%" stop-color="#b1d0d5" /> <stop offset="90%" stop-color="#8eb5df" /> </linearGradient> </defs> <rect x="10" y="10" width="300" height="200" stroke="#fff" storoke-width="20" fill="url(#test1)"/> </svg> </body> </html>
画面にアクセスすると、linearGradientタグ内に記載した値でグラデーションされた長方形が表示されます。
このサンプルも先程と同様、単純な長方形なので、まだSVGの特徴がつかめていません。
ここでは、SVGを出力する方法を試す程度にしておきます。
SVGの出力方法について
上記のサンプルは、あらかじめHTMLドキュメント内にSVG用のタグと、SVGの出力内容を記載する方法でした。
ここでは、別な方法としてjavascript内からSVGを生成して出力する方法を試します。
まず、HTMLドキュメント内にSVG描画用のDIVタグを記載し、その後にjavascriptでSVGを定義し、DIVタグに出力する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="svgtest"></div>
<script type="text/javascript">
let test1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
test1.setAttribute("width" , "600");
test1.setAttribute("height" , "400");
test1.setAttribute("viewbox", "0 0 600 400");
test1.setAttribute("style" , "background-color:#e1e1e1;");
let line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
line.setAttribute('x1' , '30');
line.setAttribute('y1' , '50');
line.setAttribute('x2' , '300');
line.setAttribute('y2' , '200');
line.setAttribute('stroke', '#000000');
test1.appendChild(line);
let svgtest_dom = document.getElementById("svgtest");
svgtest_dom.appendChild(test1);
</script>
</body>
</html>
画面にアクセスすると、横600、縦400の長方形に、SVG用を動的に生成したline要素が表示されます。
サンプルの中で「createElementNS」というメソッドが出てきましたが、
これは名前空間URIと修飾名(第二引数)の要素を生成する命令です。(第三引数はここでは省略しています)
修飾名には
svg line rect circle ellipse path polygon
等があり、svg領域にどんな描画出力をするかを決定します。