SVG | 「な」のblog

【SVG】WordPressでSVG形式を使う方法

WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。「複製を保存」または「別名で保存」をクリック。形式をSVG形式にして保 […]

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #f00;
    }

  #svg01 .loading01{
      animation: 1s infinite load01;
  }

  @keyframes load01 {
      0%,
      100%{ /* 1秒のとき */
          r: 3;
      }
      50%{ /* 0.5秒のとき */
          r: 10;
      }
  }

  #svg01 .loading02{
      animation: 1s infinite .2s load02;
  }

  @keyframes load02 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }

  #svg01 .loading03{
      animation: 1s infinite .4s load03;
  }

  @keyframes load03 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }
  </style>
</head>
 
<body>
<svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
    <circle cx="110" cy="150" r="10" class="loading01" fill="rgba(255,255,255,1)" />
    <circle cx="140" cy="150" r="10" class="loading02" fill="rgba(255,255,255,1)" />
    <circle cx="170" cy="150" r="10" class="loading03" fill="rgba(255,255,255,1)" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #f00;

}

#svg01 .loading01{

animation: 1s infinite load01;

}

@keyframes load01 {

0%,

100%{ /* 1秒のとき */

r: 3;

}

50%{ /* 0.5秒のとき */

r: 10;

}

#svg01 .loading02{

animation: 1s infinite .2s load02;

}

@keyframes load02 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

#svg01 .loading03{

animation: 1s infinite .4s load03;

}

@keyframes load03 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

</style>

</head>

<body>

</svg>

</body>

</html>

CSSのinfiniteは無限ループです。デュレーションの値（infiniteの後）を書くことで３つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]

SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #ddd;
    }
   </style>
</head>
 
<body>
  <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
   <defs><!-- symbolをdefsで囲むと画面に描画されない -->
      <symbol id="lamp"><!-- symbol要素で使いまわすことが簡単になる -->
        <circle cx="100" cy="200" r="40" />
      </symbol>
    </defs>
    <rect x="100" y="200" width="300" height="100" rx="50" ry="50" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="150" y="50" fill="rgba(255,255,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="60" y="50" fill="rgba(0,0,255,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="240" y="50" fill="rgba(255,0,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #ddd;

}

</style>

</head>

<body>

</symbol>

</defs>

</svg>

</body>

</html>

信号機を描くコードをサンプルとして載せました。ぞれぞれ解説します。 […]