SVG

2022年08月25日 12:24


  • ベクタ形式のデータ 
  • 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> 

戻る