HTML SVG とは

svg要素とは何か.

svgは、
scalable Vector Graphicsの、
略語です。


canvas要素は、
2Dおよび3D形状のビットマップイメージですが、
SVG要素は、
ベクタイメージになります。


svg要素は
新しい座標系とビューポートを定義するコンテナです。

博士

ミニ、今日は特殊な要素の話をしたいと思います。

ミニ

どういった話ですか、博士。

博士

svg画像です。パスワードとか、emailのアイコンなどがありますが、svg画像はアイコンなどに使われます。

場面

場所は博士の研究室、ミ二は女子学生風AI、博士は大学教授風AIです。

svg画像とは.

画像には、
「ビットマップ画像」と、
「ベクター画像」の二つの種類があります。


普段使うJPG、PNG画像は、
画像を点の集合で表現した、
ビットマップ画像です。


点の集合で表現してるので、
大きくすると画面が荒くなってしまいます。


SVG 形式のベクター画像は、
XMLに基づくマークアップ言語により、
複雑な計算式によって色や曲線を表現しています。


大きさに関係なく、
きれいなレンダリング画像を、
記述することが出来ます。


さらに、
検索、インデックスをつけたり、
スクリプトで操作、圧縮したりすることもできます。


しかし、
写真をsvgに変換すると、ファイルサイズが大きくなるので、
写真には、jpg画像、png画像を使い、
アイコンには svg画像を使います。


オンラインで、
png画像をsvg画像に変換するには、
Image Vectorizer
でできます。


svg画像の編集は
下記のオンラインエディタが無料で使えます。
Vecteezy

svgの利用方法.

外部のSVGアイコンを利用するには、
imgタグと、src属性を使います。


<img
  src="xxx.svg"
  width="30"
  height="30">


CSSで読み込むには、
background-image、プロパテを使用します。


.classname {
  background-image: url("xxx.svg");
}

インラインでの使用例.

うえの画像は、
インラインのsvg画像です。
コードは下記の様になります。
body要素内に挿入します。


<svg viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
<defs>
          <radialGradient id="eG">
            <stop offset="0%"   stop-color="pink" />
            <stop offset="50%"  stop-color="orange" />
            <stop offset="100%" stop-color="red" />
          </radialGradient>
</defs>

<circle cx="135" cy="75" r="50" fill="url(#eG)" />
</svg>


xmlns="http://www.w3.org/2000/svg"
により、svgの宣言をします。


xmlns属性は,
XML Name Space　の意味です。


svg要素内の、
viewBox属性は、
SVGの世界を見るための「窓」です。 


viewBox="0 0 300 150"
は、
左上端からの位置を粗wします。
始めの数値はx軸の値、
2番目はy軸の値、


3番目は幅、
4番目は高さです。


defs要素は、
グラデエーションを定義します。


circle要素は、
円の表示を定義します。


以上です。