HTML svg 튜토리얼

SVG 튜토리얼

HTML svg 태그 사용

HTML svg 태그 튜토리얼

1 예시 1: circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="brown" stroke-width="4" fill="orange" />
</svg>

2 예시 2: rect

<svg width='30px' height='30px' viewBox='0 0 30 30'>
  <rect width='30' height='6' />
  <rect y='12' width='30' height='6' />
  <rect y='24' width='30' height='6' />
</svg>

3 예시 3: path

<svg viewBox="0 -0.5 5 5" style="width:50px">
  <path stroke="blue" d="M0 0h5M0 2h5M0 4h5" />
</svg>

<style>
  a svg {
    width: 40px;
  }
</style>

<a href="#">
  <svg viewBox="0 0 24 24">
    <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"></path>
  </svg>
</a>

4 같이 보기

• 웹에서 SVG 사용
• CSS svg 색상 지정
• 데이터URI data:image/svg
• HTML canvas 튜토리얼
• HTML img 태그
• SVG