SVG 가이드

SVG 元素

SVG 아이콘 SVG 간단한 예제

SVG 웹에서 표시

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过浏览器指向SVG文件的URL，将SVG嵌入HTML页面，使用iframe元素，使用img元素等方法

在Web浏览器（例如Chrome，Firefox和Internet Explorer）中显示SVG可以通过以下几种方式完成：

浏览器指向SVG文件的URL.
将SVG嵌入HTML页面

您可以通过以下几种方法将SVG图像嵌入HTML文件中：

使用iframe元素
使用img元素
使用SVG图像作为背景图像.
使用svg元素
使用嵌入元素

iframe框架

如果您输入SVG图片的URL，由于浏览器可以显示SVG图片，因此您也可以使用来在HTML页面iframe中包含SVG图片。这是一个示例：

<iframe　src="mySvgImage.svg"　width="200"　height="200"　>

img

img就像使用任何其他类型的图像一样，使用元素嵌入SVG图像也是如此。您可以在img元素的src属性中写入SVG图片的URL，如下所示：

<img　src="/svg/circle-element-1.jsp">

SVG 이미지는 다른 어떤 이미지와도 마찬가지로 HTML 페이지에 표시됩니다.

SVG로 배경 이미지

브라우저는 SVG 이미지를 비트맵 이미지와 같이 다루기 때문에, CSS를 사용하여 SVG 이미지를 배경 이미지로 사용할 수 있습니다. 예제를 보세요:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
}

SVG 이미지에 배경 크기를 설정해야 할 수 있습니다. 이는 브라우저가 SVG를 어떻게 줄이거나 확대할지를 알려줍니다. 내 블로그에서 더 알아보세요:CSS 배경 이미지 튜토리얼에서 배경 이미지에 대해 더 알아보세요.

HTML 내 svg 요소

SVG 요소를 사용하여 SVG 이미지를 삽입할 수 있습니다. 예를 들어:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

여기서 div 요소는 svg 요소가 HTML에 직접 삽입될 수 있음을 설명하기 위해 사용되었습니다. 그러나 svg 요소는 div 요소에 삽입되지 않아도 됩니다.

SVG 요소를 사용하면 SVG를 HTML 페이지에 직접 삽입할 수 있습니다. SVG 이미지를 자신의 파일에 두는 대신. SVG 이미지의 너비와 높이를 설정할 수 있는 방법은 SVG 요소에 width와 height 높이 속성을 추가하는 것입니다.

svg 요소를 사용하면 브라우저에서 JavaScript를 통해 직접 SVG를 생성할 수 있습니다. D3 JavaScript API는 이 점에서 매우 능숙합니다. jQuery JavaScript API도 이를 할 수 있습니다.

svg 요소를 사용하면 svg 및 자식 요소에 CSS 스타일을 설정할 수 있습니다. 다른 어떤 HTML과도 마찬가지로. 주의하십시오, SVG 요소의 일부 CSS 속성 이름은 HTML 요소의 이름과 다를 수 있습니다.

embed

SVG의 초기에는 embed 요소를 사용하여 SVG 이미지를 삽입할 수 있었습니다. 그때는 모든 브라우저가 SVG를 지원하지 않았습니다. 오늘날에는 img 또는 svg 요소를 사용하는 것을 추천합니다. 여기는 인서트 요소의 역사적 이유를 설명하는 예제입니다:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image"/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

SVG 이미지가 표시되는 위치에 이 요소를 두세요. src 속성은 SVG 이미지의 URL을 지정해야 합니다.

pluginspage 속성에 주의하세요. SVG를 원본으로 표시할 수 없는 오래된 브라우저에서는 필수적입니다. 이러한 브라우저는 Adobe의 SVG 브라우저 플러그인을 통해 이미지를 표시해야 합니다. Internet Explorer에서는 7와 Firefox 3.0.5중에서, 이 속성은 필요하지 않지만 포함해도 괜찮습니다.

Width 및 Height 속성

img, svg, embed 요소를 사용하여 SVG 이미지를 삽입하든지 상관없이, width와 height 속성을 사용하여 이미지의 너비와 높이를 설정할 수 있습니다. SVG 파일에 있는 이미지가 이 숫자보다 더 넓거나 더 높다면, SVG 이미지의 일부만 표시됩니다. 전체 SVG 이미지(또는 표시하고자 하는 너비)를 표시할 수 있도록 설정한 너비와 높이가 충분히 크게 설정되었는지 확인하세요.

SVG를 HTML 요소의 배경 이미지로 사용

CSS background를 사용할 수 있습니다-image 속성은 SVG 이미지를 HTML 요소의 배경 이미지로 사용합니다. SVG 이미지 파일을 다른 이미지 파일과 같이 지정하면 됩니다. 모든 브라우저가 이를 완전히 지원하지는 않으므로, 지원 계획하는 브라우저에서 테스트하세요. 다음은 예제입니다:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
}

브라우저 지원 호환성

Internet Explorer 9그리고 이후 버전에서는 로컬로 SVG를 표시할 수 있습니다. 이 글을 쓰는 동안, Firefox, Chrome, Safari, Opera, Android 브라우저는 SVG를 원본으로 표시할 수 있게 되었으니까요. iOS 버전의 Safari, Opera의 미니 및 모바일 브라우저, Android 버전의 Chrome도 마찬가지입니다.

Content Type

브라우저의 URL이 .svg로 끝나면, 브라우저는 SVG 파일의 mime 유형을 추측할 수 있습니다. 그러나 servlet, JSP, PHP, ASP.NET 페이지 또는 다른 웹 애플리케이션 구성 요소에서 SVG를 생성할 때, URL이 항상 .svg로 끝나지 않습니다.
브라우저가 파일을 SVG 파일로 해석할 수 있도록 하려면, 응답의 Content를 설정해야 합니다.-Type HTTP 헤더

image/svg+xml

이전 <embed> 요소를 확인하면 type 속성에서도 이렇게 한 것을 알 수 있습니다. <embed> 요소에서 내용 유형을 설정하는 것은 Internet Explorer에게는 충분하지만, Firefox에게는 충분하지 않습니다. 또한 HTTP 응답의 내용 유형에서도 설정해야 합니다.

또한, 브라우저가 서버에 있는 SVG 파일을 직접 지정하는 경우, 이 작업을 수행할 수 있는 <embed> 태그가 없습니다. 그런 다음, HTTP 응답에서 내용 유형을 본인이 설정해야 합니다.
이것은 JSP에서 완료하는 방법입니다:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

이것은 servlet에서 실행하는 것과 매우 유사합니다. Java와 다른 기술을 사용하는 경우, HTTP 응답에서 내용 유형을 설정하는 예제를 구글에서 검색하세요. 많은 예제가 있습니다.

SVG 아이콘 SVG 간단한 예제