SVG入門
SVGを使うとエディタとブラウザがあれば、特に環境を準備することなく図形を描くことができます。
基本
次のようにすると図形（この場合、赤い丸）が描画されます。
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
</body>
</html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
</body>
</html>
SVGファイル
次のようにして「.svg」として保存すると画像ファイルとして扱えます。
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 400 300"
width="400"
height="300">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 400 300"
width="400"
height="300">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
線
「line」を使う。strokeで線の色、stroke-widthで線の太さを指定する。
<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="70" stroke="red" stroke-width="1" />
<line x1="10" y1="20" x2="190" y2="80" stroke="green" stroke-width="2" />
<line x1="10" y1="30" x2="190" y2="90" stroke="blue" stroke-width="3" />
</svg>
<line x1="10" y1="10" x2="190" y2="70" stroke="red" stroke-width="1" />
<line x1="10" y1="20" x2="190" y2="80" stroke="green" stroke-width="2" />
<line x1="10" y1="30" x2="190" y2="90" stroke="blue" stroke-width="3" />
</svg>
折れ線の場合は「polyline」を使う。
<svg width="200" height="100">
<polyline points="10,10 50,80 100,50 150,20 190,90" stroke="red" fill="white" stroke-width="3" />
</svg>
<polyline points="10,10 50,80 100,50 150,20 190,90" stroke="red" fill="white" stroke-width="3" />
</svg>
長方形
「rect」を使う。fillで塗りつぶし、strokeで線の色、stroke-widthで線の太さを指定する。
fill-opacityで透過度を指定する。「1」だと不透明、「0」だと透明。
塗りつぶしを透明にするときはfill=noneとする。
<svg width="400" height="100">
<rect x="10" y="10" width="380" height="80" fill="silver" stroke="blue" stroke-width="3" />
</svg>
<rect x="10" y="10" width="380" height="80" fill="silver" stroke="blue" stroke-width="3" />
</svg>
円
「circle」を使う。cxとcyで中心、rで半径を指定する。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
</svg>
<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
</svg>
テキスト
テキストの描画には「text」を使う。font-sizeでフォントサイズ、text-anchorで位置などを指定する。
<svg height="200" width="200">
<text x="100" y="50" fill="red" text-anchor="start" font-size="20">左揃え</text>
<text x="100" y="100" fill="red" text-anchor="middle" font-size="20">中央揃え</text>
<text x="100" y="150" fill="red" text-anchor="end" font-size="20">右揃え</text>
</svg>
<text x="100" y="50" fill="red" text-anchor="start" font-size="20">左揃え</text>
<text x="100" y="100" fill="red" text-anchor="middle" font-size="20">中央揃え</text>
<text x="100" y="150" fill="red" text-anchor="end" font-size="20">右揃え</text>
</svg>
[ 2021年2月15日 | カテゴリー: デジタル | タグ: SVG , 入門 ]
« iPhoneでGoogleドキュメントのページを指定して印刷する方法 | Googleスプレッドシートから連続でGmail送信する方法 »
コメントを残す