확장 가능한 SVG 요소

<svg>

확장가능한 벡터 그래픽(SVG)은 2차원의 벡터 그래픽을 기술하기 위한 XML 마크업 언어이다.

• <SVG> 요소는 내용이 상당히 방대하다

• 이미지를 직접적으로 삽입하는 것과 svg요소를 사용하여 그림을 삽입하는 것 차이

  • 이미지를 svg에 연결시키는 경우는 CSS 코드를 이용해서 디자인을 변경 할 수 없다

  • 직접적으로 코드를 따라서 그래픽에 있는 디자인을 변경하려면 svg를 문서내에 직접 삽입을 해야한다.

    [예시 코드]
    <img src="svgfile.svg" alt="SVG File" />
    
    <svg width="150" height="150" viewBox="0 0 150 150">
      <circle
        r="50"
        cx="75"
        cy="75"
        fill="#333"
        stroke="#900"
        stroke-width="4"
        ;
      />
    </svg>