🍋

SVGとは

2023/02/28に公開

SVG (Scalable Vector Graphics)は、
XMLベースのベクターグラフィックスのフォーマットで
Web上で利用される静的な画像形式の1つ

アイコン、ロゴ、グラフなどの静的な画像の作成に適しており、
さまざまなWebサイトやアプリケーションで使用されている！！

ブラウザ以外でも、Adobe IllustratorやInkscapeなどの
ベクターグラフィックスソフトウェアで編集することができる🙆🏻‍♀️

XMLベースとは

XML (Extensible Markup Language)ベースとは、
XMLと呼ばれるテキストベースのデータ記述言語を基盤として、
データを構造化する手法のこと

解像度の維持
SVGはベクターベースの画像形式であるため、拡大縮小などの変換によって画質が劣化することがない。そのため、異なる解像度の画面上でも、常にクリアな画像を表示することができる。
ファイルサイズの小ささ
SVGは、テキストベースのフォーマットであるため、ファイルサイズが非常に小さいです。これにより、Webサイトやアプリケーションのパフォーマンスを向上させることができる。
スタイルのカスタマイズ
SVGにはCSSを適用することができ、そのため、色や線の太さ、透明度などのスタイルを簡単に変更することができる。
直感的な編集
SVGは、ベクターベースの画像形式であるため、イラストレーションソフトウェアで編集することができる。また、テキストエディタでも編集が可能であり、直感的な編集が可能。
直接的なアニメーション
SVGには、JavaScriptを使用して直接アニメーションを作成することができます。これにより、Webサイトやアプリケーションのインタラクティブ性を高めることができる。

SVGの作成
Illustrator、Inkscapeなどのベクターグラフィックスソフトウェアを使用して、SVG画像を作成する。
SVGの埋め込み
HTMLファイル内に、SVGファイルのコードを記述して埋め込める。この際、imgタグを使用する方法と、SVGタグを使用する方法がある
CSSの適用
SVGにはCSSを適用することができます。SVG内の要素に対して、クラスやIDを割り当てて、CSSでスタイルを適用することができる。
JavaScriptの適用
SVGにはJavaScriptを適用することができる。JavaScriptを使用して、SVGの要素を操作したり、アニメーションを作成することができる。
ブラウザで表示
HTMLファイルをブラウザで開くことで、SVG画像を表示することができる。

以上のように、SVGは、HTMLファイルと同じようにテキストベースで
記述することができるため、Web開発者にとって非常に扱いやすい画像形式の1つ

作って調べて作って調べて
知らない言葉が無限に出てくる！

基本的なことを詰められる時間は今しかないから、
わからないことを蔑ろにしないで
しっかり理解していきたい！！