svgで遊ぼう

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <text x="100" y="100" font-size="32" fill="white" stroke="black" stroke-width="2" rotate="20">
          Google
      <text>
    </svg>

transform

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <rect width="100" height="100" fill="green" transform="translate(50,50)" />
      <rect width="100" height="100" fill="green" transform="skewX(30)" />
      <rect width="100" height="100" fill="white" opacity="0.2" />
    </svg>

アニメーション

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <circle cx="100" cy="100" r="20" fill="white">
          <animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite">
      </circle>
      <circle cx="200" cy="200" r="20" fill="blue">
          <animate attributeName="r" from="40" to="120" dur="2s" begin="1s" repeatCount="indefinite">
      </circle>
    </svg>