SVG

스케일러블 벡터 그래픽스(Scalable Vector Graphics,SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.

Sample : Rect

<style>
  .block1 {width: 200px; height: 200px;margin: 40px;float: left;}
</style>

<h2>Sample : Rect</h2>
<div class="well clearfix">
  <div class="block1">
    <svg width="200" height="200" style="background:#ffebee;">
      <rect x="30" y="30" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="0"/>
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#ffebee;">
      <rect x="30" y="30" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="5"/>
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#ffebee;">
      <rect x="30" y="30" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="10"/>
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#ffebee;">
      <rect x="30" y="30" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="20"/>
    </svg>
  </div>
</div>

Sample : Rect : border-radius

  <style>
    .block1 {width: 200px; height: 200px;margin: 40px;float: left;}
  </style>

  <div class="well clearfix">
    <div class="block1">
      <svg width="200" height="200" style="background:#ffebee;">
        <rect x="30" y="30" rx="5" ry="5" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="5"/>
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#ffebee;">
        <rect x="30" y="30" rx="20" ry="20" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="5"/>
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#ffebee;">
        <rect x="30" y="30" rx="40" ry="40" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="5"/>
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#ffebee;">
        <rect x="30" y="30" rx="60" ry="60" width="140" height="140" fill="#f48fb1" stroke="#880e4f" stroke-width="5"/>
      </svg>
    </div>
  </div>

Sample3 : circle

<div class="well clearfix">
  <div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="0" fill="#bbdefb" />
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="5" fill="#bbdefb" />
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="10" fill="#bbdefb" />
    </svg>
  </div>
  <div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="20" fill="#bbdefb" />
    </svg>
  </div>
</div>

Sample4 : ellipse

Sample5 : polygon

Sample6 : Line

Sample7 : PolyLine

Sample8 : Path

Sample9 : stroke-linecap / stroke-dasharray

Sample10 : linearGradient

Sample11 : radialGradient

Sample12 : Clip-path

Sample13 : Clip-path

Sample14 : blur

Sample15 : animation