SVG入門
SVGを使うとエディタとブラウザがあれば、特に環境を準備することなく図形を描くことができます。
目次
基本
次のようにすると図形（この場合、赤い丸）が描画されます。
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
</body>
</html>
SVGファイル
次のようにして「.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で線の太さを指定します。
<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」を使います。
<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とします。
<rect x="10" y="10" width="380" height="80" fill="silver" stroke="blue" stroke-width="3" />
</svg>
円
「circle」を使います。
cxとcyで中心、rで半径を指定します。
<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
</svg>
テキスト
テキストの描画には「text」を使います。
font-sizeでフォントサイズ、text-anchorで位置を指定します。
<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>
上下の位置は、dominant-baselineで指定します。
上下中央は、英語と日本語で異なります。
英語の場合、middleで真ん中になりますが、日本語の場合、centralで真ん中になります。
<text x="100" y="50" fill="red" dominant-baseline="auto" font-size="20">下揃え</text>
<text x="100" y="100" fill="red" dominant-baseline="central" font-size="20">上下中央</text>
<text x="100" y="150" fill="red" dominant-baseline="hanging" font-size="20">上揃え</text>
</svg>
全種類を上から順に並べてみます。色々ありますが結局三種類しか使わないでしょう。
矢印
次のようにすると矢印を描くことができます。
<marker viewBox="0 -5 10 10" markerWidth="5" markerHeight="5" id="mk" orient="auto">
<polygon points="10,0 0,5 0,-5" />
</marker>
<line x1="50" y1="100" x2="150" y2="100" stroke="black" stroke-width="3" marker-end="url(#mk)" />
<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="3" marker-end="url(#mk)" />
</svg>
markerで描いた図形をlineなどの線に付ける感じです。
通常は三角形ですが四角形でも星型でも何でもいいです。
ただ三角形が一番見やすいです。
[ 2021年2月15日 | カテゴリー: デジタル | タグ: SVG , 入門 ]
« iPhoneでGoogleドキュメントのページを指定して印刷する方法 | Googleスプレッドシートから連続でGmail送信する方法 »
コメントを残す