• ベクタ形式のデータ 
  
• XMLに準拠しており、テキストエディタで編集することも可能 
  
• CSSやJavaScript、動画作成ソフトなどを使ってアニメーションを表示 
  
• 透過も利用可能 
  
• SVGは内部にJPEGやPNGなどのビットマップ画像データを保持することも可能 

　　　ホバーした時に色を変えたい！といった時でも、<svg>タグ内に、<script>をかくことができるため、イベントと紐づけて色を変えることも可能

　　　サンプル：https://codepen.io/satsuki/pen/oNqRqWP

<svg>HTMLに直接埋め込む場合

動作環境：https://codepen.io/satsuki/pen/ExEzYxV

<svg 

  <defs>　//後で再利用できるよう描画オブジェクトを定義するためのタグ

    <style> //svgファイル内にCSSを設定できる

      #wrap_all path {

        fill: #111;　　//オブジェクトの塗りつぶし

        stroke: #111; //オブジェクトのアウトライン（線）の色

        stroke-width: 2px; //オブジェクトのアウトライン（線）の太

        animation: svg 5s ease-in both infinite;　//animationを設定できる

      }

   @keyframes svg { //アニメーションを指定

     0% {

       fill: transparent;

       stroke-dasharray: 2000px; //オブジェクトのアウトライン（線）の間隔

       stroke-dashoffset: 2000px;//オブジェクトのアウトライン（線）の開始位置

     }

     20%{

       stroke-dashoffset: 0;

     }

     30%{

       fill: transparent;

     }

     50%{

       fill: #111;

     }

   }

       </style>

  </defs>

     xmlns="https://www.w3.org/2000/svg"   　　　　//SVG名前空間宣言

　　 viewBox="0 0 1740 577"> //（左上のx座標）, （左上のy座標）, （画像の幅）, （画像の高さ）"

  <g id="wrap_all" data-name="SVG全体をグループ"> //オブジェクトをグループ化

    <path 　　　　　　　　　　　　　　　　　　　　　//d属性の中のパスデータを基に図形を描画するタグ

　　　　data-name="ロゴパーツ 下" 

　　　　d="M299～"/>

    <path ～ 


～

  </g>

</svg>

<img>ファイルとして読み込む

<img src="top_icon.svg" width="100" height="100">

        Objectとして読み込む

<object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object> 

        CSSのbackground-imageプロパティで背景画像として指定

<div style="width:32px; height:32px; background-image:url(logomark.svg); background-size:100%;"></div>