# 画像フォーマット**SVG**を使いこなそう:art:


SVGは「Scalable Vector Graphics」の略称で、  
Web上で使うことができる拡大縮小が可能な画像フォーマットのことを言います。   
SVGファイルは、パス・テキスト・シェイプなどの集合を画像として扱う「`ベクトル形式`」で画像を描画します

## メリット
- 拡大・縮小しても画質が損なわれない

PCでもスマートフォンでも綺麗に画像を表示させたい場合、レスポンシブデザインがよく使用されます。このような場合でSVGファイルを活用することにより、どちらの画面でも綺麗な画像をユーザーに見せることができます。


## デメリット
- 写真のように複雑で繊細な配色や輪郭の画像描画には適さない 
  
ベクトル画像は複雑な計算式で画像を描画しているため、複雑で繊細な配色や輪郭の画像描画には適していません  

## SVGとその他の画像フォーマット
ちなみに...  

GIF、JPEG、PNGなどは「`ラスタ形式`」といい、ピクセルを縦横に並べる方法で画像を描画します。

`ラスタ形式`の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになるため**編集には不向き**です。加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。


## まとめ
- ロゴ・タイトルなどの作成なら:point_right:`ベクトル形式` (SVG)
- 写真の編集なら:point_right:`ラスタ形式` (GIF, JPG, PNG)  
が適していると言えるでしょう。


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/SVG
- Permalink: https://tips.weseek.co.jp/5e393124e848c600487d69f3
- Parent: [用語集](/5e392c4be848c600487d69c9.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 30 total
  - [Bootstrap](/5e3936ebe848c600487d69f6.md)
  - [BuildKit](/5e67ad3278bd2f0048680aee.md)
  - [CSS](/5e392f36e848c600487d69e0.md)
  - [Express](/5e392db0e848c600487d69d3.md)
  - [HTML](/5e392f85e848c600487d69e3.md)
  - [HTTP レスポンスステータスコード](/5e520e333a1f5c0048d0ac90.md)
  - [Javascript](/5e392e88e848c600487d69db.md)
  - [Node.js](/5e392d51e848c600487d69cc.md)
  - [ORM](/5e42a75e5b5a0900495044bb.md)
  - [OSS](/5e397a29e848c600487d6a18.md)
  - [Object-Relational Mapping](/5e57c52d7887d10048094a0b.md)
  - [Python](/5e48bfd61ec5e4004811d4f1.md)
  - [React](/5f163c2e647aac00495efa80.md)
  - [Sass](/5e9535980804c600481af4b6.md)
  - [Svelte](/5e392e14e848c600487d69d8.md)
  - [hogeとは](/5e9e44663edc660048f48b40.md)
  - [インフラ関係](/5e86afaa1390990048058193.md)
  - [オープンリダイレクト](/5e5d34c83051ce00499cac56.md)
  - [キャレット(caret)とは](/5e967fc94d0611004855c161.md)
  - [デグレとは](/5e97bb3a76311900487c3c4e.md)
  - [ネストとは](/5e8c00a7ccdfb10048db43aa.md)
  - [ハッシュ関数](/5e5a19d81b844e0048d0c18f.md)
  - [バリデーション](/5e50e7fc839fe7004832158b.md)
  - [ブロックレベル要素とインライン要素](/5e8d2a6331511b0048ecf60f.md)
  - [マイグレーション](/5e96e93f76311900487c3c47.md)
  - [レンダリングとは](/5e8fdb1dda4e5b0048ad0ec0.md)
  - [変数名の命令規則](/5e869f7b1390990048058190.md)
  - [認証関係](/5e4dffec340a4f0049473d34.md)
  - [＆nbsp; とは](/5ea63ed8d87f08004864af52.md)
  - [＜br＞と＜br  ](/65069da24603e7ff39a6b3d3.md)
- Last updated: 2020-02-09T11:16:58.521Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e393124e848c600487d69f3