SVG 튜토리얼
SVG 시작하기

비고

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

버전

인라인 SVG

인라인 SVG를 사용하면 HTML로 작성된 SVG 마크 업을 사용하여 브라우저에서 그래픽을 생성 할 수 있습니다.

SVG 인라인을 사용할 때, DOCTYPE은 꼭 필요한 것은 아닙니다. 대신 <svg> 열기 및 닫기 태그와 함께 viewBox 또는 width 및 height 속성 만 있으면 충분합니다.

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

위의 <svg> 단편은 컨테이너와 구조 요소의 역할을합니다. 이 프래그먼트는 자체 좌표계를 설정합니다.

다음은 일부 내용으로 SVG 조각을 렌더링 한 예입니다. "Hello World!"라는 사각형이 생성됩니다. 그 안에있는 텍스트.

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>

결과:

SVG를

<img> 태그를 사용하여 SVG 파일의 내용을 HTML 문서 내의 이미지로 렌더링 할 수 있습니다. 예 :

<img src="my_svg_file.svg" alt="Image description">

기본적으로 이미지의 크기는 src 속성에서 참조 된 SVG 파일에 지정된 width 및 height 속성에 따라 표시됩니다.

이 접근 방식에는 다양한 한계점이 있습니다.

• 브라우저 지원에는 Internet Explorer 8 및 이전 버전, Android 2.3 및 이전 버전은 포함되지 않습니다.
• SVG 파일 외부에있는 CSS를 사용하여 SVG 파일에 포함 된 개별 요소의 스타일을 지정할 수 없습니다. 모든 CSS는 이미지 파일 자체 내에 있어야합니다.
• 자바 스크립트가 실행되지 않습니다.
• 이미지는 하나의 파일로 완성되어야합니다. 예를 들어, SVG 파일에 래스터 이미지가 포함되어 있으면 이러한 내부 이미지를 데이터 URL로 인코딩해야합니다.

SVG를 배경 이미지로 사용

SVG 파일을 CSS의 배경 이미지로 지정하여 HTML 문서 내에 SVG 파일을 표시 할 수 있습니다. 예 :

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}

SVG 파일에 지정된 크기가 HTML 요소의 크기보다 큰 경우 background-size 속성을 지정하여 해당 요소 내에 맞도록 SVG의 background-size 를 조정하는 것이 좋습니다.

SVG를 <img> 로 사용하는 것과 마찬가지로,이 접근법에 대한 몇 가지 한계점을 지적 할 가치가 있습니다.

• 브라우저 지원에는 Internet Explorer 8 및 이전 버전 또는 Android 2.3 및 이전 버전이 포함되지 않습니다.
• SVG 파일 외부에있는 CSS를 사용하여 SVG 파일에 포함 된 개별 요소의 스타일을 지정할 수 없습니다. 모든 CSS는 이미지 파일 자체 내에 있어야합니다.