SVGで簡単に基礎的な図形を描いてみよう

ベクター系画像形式のSVGの記事

SVGとは？

SVG1.1（2011年8月）が最新版でSVG2が勧告候補（2022年11月現在）。

ベクター形式で拡縮してもギザギザしません。ペイント系ではありません。

xmlのテキストで記述されます。

すべてのブラウザで対応済みです。

SVGのデメリットは？

ペイント系の画像には適していない。写真などには使用しない。

SVGは何に使う？

図形、単純なシンボルなどの表現に適している。

Webページで使用されたり、サイトのアイコンに使用されたりします。

SVG画像の作り方は？

SVGはxml言語で書かれたテキストですのでメモ帳で作れます。メモ帳だとちょっと大変ですけどね。

ベクター系画像ソフトで作れます。

SVG画像の特徴は？

拡大しても縮小してもギザギザしません。

大きい画像でもファイルサイズが大きくなりません。

内部にCSSを保持できるので、ダークモードに対応できたりします。

名前空間

svgタグの中でのみ定義します。

xmlns属性を使用します。

<svg xmlns=”http://www.w3.org/2000/svg”>

ドキュメント内で、異なるxml発生言語を使用可能とする。タグ名が被ってもブラウザが適切に対応できるようにします。

名前空間はただの文字列です。urlでなくてもいいのですが、世界で被らないような文字列にurlが選ばれることは多いですよね。

名前空間のprefixを宣言して使用する方法もあります。名前空間接頭辞。

Sample.

svg {
    background-color: rgba(134, 175, 231, 0.7);
}
<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
    <circle cx="10" cy="20" r="8" />
    <circle cx="40" cy="20" r="20" fill="red" />
    <circle cx="90" cy="20" r="20" stroke="red" />
    <circle cx="140" cy="20" r="20" fill="transparent" stroke="black" />
    <circle cx="200" cy="20" r="30" fill="transparent" stroke="black" />
</svg>

• fill:塗りつぶし。デフォルト黒。transparent, noneなども指定できます。
• stroke:線の色。デフォルトなし

MDNの高度なSample

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="myGradient">
            <stop offset="0%" stop-color="green" />
            <stop offset="100%" stop-color="white" />
        </linearGradient>
    </defs>
    <circle cx="100" cy="100" r="90" fill="none" stroke-width="20" stroke="url(#myGradient)" />
</svg>

defsタグで再利用可能な描画オブジェクトを定義します。中身はlinearでグラデーションします。

stroke属性でそれを指定します。url()関数を使用するんですね。

線

<svg width="200" height="200">
    <path d="M10 10 H100" stroke="black" />
    <path d="M10 20 V60" stroke="green" />
    <path d="M10 70 L180 100" stroke="black" />
    <path d="M10 110 L180 110" stroke="green" stroke-width="5" />
    <path d="M10 120 L180 120 L180 150" />
</svg>

• pathタグのd属性で描画を指定します
• Mは基点座標です
• Lは指定座標まで線を引きます
• Hは水平に線を引きます
• Vは垂直に線を引きます
• 大文字の時、座標は絶対座標を示します
• strokeは指定しないと線が描画されません。デフォルトでなしです
• 3点以上になると塗りつぶされます

長方形

<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black" />
<circle cx="10" cy="10" r="2" fill="red" />

• 単純に点をつなげば多角形です。”L10 10″、で開始点に戻る線を引いています
• 大文字は絶対座標
• 赤い点はただの基点目印です

相対座標で指定

<path d="M 10 10 h80 v80 h-80 l 0 -80" fill="none" stroke="black" />
<circle cx="10" cy="10" r="2" fill="red" />

• 小文字は相対座標
• 10,10から、右に80、下に80、左に80、上に80、で線を引く

Zで基点を座標に戻る

<path d="M 10 10 h80 v80 h-80 Z" fill="transparent" stroke="black" />

塗りつぶし

fill属性で塗りつぶし色を指定します。例）fill="purple"

fillもstrokeも透過度があります。

<svg>
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8" stroke-width="10" />
</svg>

塗りつぶしをキャンセルする

fillに”none”か”transparent”を指定する。

デフォルトでは塗りつぶしになっています。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 10 H 90 V 90" stroke="black" />
    <path d="M 100 10 h 80 v 80" stroke="black" fill="none" />
</svg>

三角形の例

最後に三角形を書いてみました

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="background-color: transparent">
    <path d="M200 0 V200 H0 Z" fill="#7E2881" />
    <text x="60%" y="94%" font-size="2.2rem" fill="white">SVG</text>
</svg>
    

~おわり~