수색…
소개
SVG는 Scalable Vector Graphics의 약자입니다. SVG는 웹용 그래픽 정의에 사용됩니다.
HTML <svg> 요소는 SVG 그래픽의 컨테이너입니다.
SVG에는 경로, 상자, 원, 텍스트 및 그래픽 이미지를 그리는 여러 가지 방법이 있습니다.
비고
SVG는 확장 가능한 벡터 이미지를 만들기위한 XML 기반 언어입니다. HTML 문서에 직접 작성하거나 외부 SVG 파일에서 임베드 할 수 있습니다. 인라인 SVG는 각각 CSS와 JavaScript를 사용하여 스타일을 변경하고 수정할 수 있습니다.
SVG에 대한 브라우저 지원은 다양하지만 여기에서 확인할 수 있습니다.
보다 포괄적 인 정보는 SVG 문서를 참조하십시오.
외부 SVG 파일을 HTML에 임베드하기
<img> 또는 <object> 요소를 사용하여 외부 SVG 요소를 포함 할 수 있습니다. 높이와 너비를 설정하는 것은 선택 사항이지만 적극 권장됩니다.
이미지 요소 사용하기
<img src="attention.svg" width="50" height="50">
<img> 사용하면 CSS를 사용하여 SVG의 스타일을 지정하거나 자바 스크립트를 사용하여 SVG를 조작 할 수 없습니다.
object 요소 사용하기
<object type="image/svg+xml" data="attention.svg" width="50" height="50">
<img> 와 달리 <img> <object> 는 SVG를 문서로 직접 가져 오므로 자바 스크립트와 CSS를 사용하여 조작 할 수 있습니다.
인라인 SVG
SVG는 HTML 문서에 직접 작성 될 수 있습니다. 인라인 SVG는 CSS와 JavaScript를 사용하여 스타일을 지정하고 조작 할 수 있습니다.
<body>
<svg class="attention" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
<path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z" />
</svg>
</body>
위의 인라인 SVG는 해당 CSS 클래스를 사용하여 스타일을 지정할 수 있습니다.
.attention {
fill: red;
width: 50px;
height: 50px;
}
결과는 다음과 같습니다.
CSS를 사용하여 SVG 삽입하기
다른 이미지와 마찬가지로 background-image 속성을 사용하여 외부 SVG 파일을 추가 할 수 있습니다.
HTML :
<div class="attention"></div>
CSS :
.attention {
background-image: url(attention.svg);
background-size: 100% 100%;
width: 50px;
height: 50px;
}
데이터 url을 사용하여 이미지를 CSS 파일에 직접 포함시킬 수도 있습니다.
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A%3Cpath%20id%3D%22attention%22%20d%3D%22m571%2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7%2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12%2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10%2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C-6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17%2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
