SVG(エスブイジー)って何(なに)？

2023年2月2日 13:00

SVGエスブイジーとは何なにか。簡単かんたんに説明せつめいしようと思おもいます。

SVG はベクトル画像がぞうのフォーマットです。ベクトル画像がぞうは線せんや図形ずけいで表あらわされたもので、ブラウザなどのアプリがラスター画像がぞうと呼よばれる点てん（ピクセル）の集あつまりに変換へんかん（レンダリング）して表示ひょうじされます。カメラやスクリーンショットで撮とった画像がぞうはラスター画像がぞうになります。ベクトル画像がぞうとラスター画像がぞうの比較ひかく表ひょうを以下いかに示しめします。

ベクトル画像がぞうを拡大かくだいしたときとラスター画像がぞうを拡大かくだいしたときの差さを示しめします。

ロケットの絵えの SVG を以下いかに示しめします。ホームページなどのハイパーテキストを作つくるために使つかわれている HTMLエイチティーエムエルのようにタグと呼よばれる形式けいしきで構成こうせいされたテキストファイルです。svg タグ、polygonポリゴンタグ、rectレクトタグ、ellipseエリプスタグで構成こうせいされています。

<svg xmlns="http://www.w3.org/2000/svg" width="598" height="428" style="border: solid 1px lightgray">
<polygon points="92,0 22,96 162,96" style="fill:#752424;stroke:#000000;stroke-width:2"/>
<polygon points="21,194 0,273 42,273" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="162,193 142,273 183,273" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="93,189 52,259 134,259" style="fill:#1f1f1f;stroke:#000000;stroke-width:2"/>
<rect x="22" y="97" width="141" height="142" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="93,192 73,273 114,273" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="93" cy="145" rx="41" ry="43" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="93" cy="145" rx="33" ry="34" style="fill:#217dbb;stroke:#000000;stroke-width:2"/>
<ellipse cx="37" cy="220" rx="7" ry="8" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="64" cy="221" rx="7" ry="7" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="122" cy="221" rx="6" ry="7" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="146" cy="220" rx="5" ry="6" style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
</svg>

polygon は多角形たかくけい、rect は長方形ちょうほうけい、ellipse は楕円だえんです。SVG のロケットはこれらの図形ずけいを組くみ合あわせて作つくられています。

SVG のそれぞれのタグについての説明せつめいは下記かきのサイトで簡単かんたんに説明せつめいされています。

この記事が気に入ったらサポートをしてみませんか？