SVGを表示 - Web白描

SVG

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）
XMLベースの、2次元ベクターイメージ用の画像形式の1つ
アニメーションやユーザインタラクションもサポートしている
SVGの仕様はW3Cによって開発され、オープン標準として勧告されている

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGファイルの表示</title>
<style>
.svgImg {
  width: 400px;
}
</style>
</head>
<body>
<h1>ミツバチのイラスト</h1>
<p><img src="img/bee.svg" alt="ミツバチ" class="svgImg"></p>
</body>
</html>

表示されない場合

サーバー環境によってはブラウザー側で「.svg」「.svgz」を画像として認識してくれず、表示されない場合があります

表示するための記述例（１）

<embed src="img/bee.svg" type="image/svg+xml" alt="" class="svgImg">

表示するための記述例（2）

<object data="img/bee.svg" type="image/svg+xml" alt="" class="svgImg"></object>

このままでは、リンクが効かないため書き換えます。

<p><a href="#"><object style="pointer-events: none;" onload="if (this.getSVGDocument) this.getSVGDocument().documentElement.style.cursor='pointer';" data="img/bee.svg" type="image/svg+xml" alt="" class="svgImg"></object></a></p>

もしくは、SVGのソースコードに「リンク」を記述します。

.htaccessの設定に変更を加える場合

［.htaccess］ファイルに変更を加える

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

描画

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGで図形を表示</title>
<style>
.shape {
  width: 400px;
  height: 300px;
}
</style>
</head>
<body>
<h1>長方形と円の描画</h1>
<svg class="shape">
  <rect x="50" y="50" width="300" height="200" fill="#C7E38F"></rect>
  <circle cx="100" cy="100" r="100" fill="#FFDFF9"></circle>
</svg>
</body>
</html>

マスク

丸く切り抜く

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGで画像を切り抜き</title>
<style>
#area {
  width: 600px;
  height: 600px;
}
</style>
</head>
<body>
<h1>画像を丸く切り抜いて表示</h1>
<svg id="area">
  <defs>
    <clipPath id="cut">
      <circle cx="300" cy="300" r="300">
    </clipPath>
  </defs>
  <image xlink:href="img/cat.svg" x="0" y="0" width="600" height="600" clip-path="url(#cut)">
</svg>
</body>
</html>

JavaScriptで制御

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでアニメーション</title>
</head>
<body>
<h1>アニメーションの基本</h1>
<svg id="svg1" width="700" height="300">
  <circle id="c1" cx="50" cy="150" r="50" fill="orange">
</svg>
<script>
  var element = document.getElementById( 'c1' );
  var c1x = 50;
  element.addEventListener( 'click', function(){
    move = setInterval(function(){
      c1x++;
      element.setAttribute( 'cx', c1x);
      if (c1x > 600) {clearInterval(move);}
    }, 5);
  },false);
</script>
</body>
</html>