SVG 그래픽을 웹 페이지에 넣는 방법

SVG 또는 Scalable Vector Graphics 를 사용하면 훨씬 더 복잡한 이미지를 그릴 수 있고 웹 페이지에 렌더링 할 수 있습니다. 그러나 단순히 SVG 태그를 가져 와서 HTML에 넣을 수는 없습니다. 그들은 나타나지 않을 것이며 당신의 페이지는 무효가 될 것입니다. 대신 세 가지 방법 중 하나를 사용해야합니다.

객체 태그를 사용하여 SVG 삽입

HTML 태그는 웹 페이지에 SVG 그래픽을 포함시킵니다. 열려고하는 SVG 파일을 정의하기 위해 데이터 속성이있는 객체 태그를 씁니다. width 및 height 속성을 포함시켜 SVG 이미지의 너비와 높이를 정의해야합니다 (픽셀 단위).

브라우저 간 호환성을 위해 type 속성을 포함시켜야합니다.

type = "image / svg + xml"

그것을 지원하지 않는 브라우저 용 코드베이스 (Internet Explorer 8 이하). 코드베이스는 SVG를 지원하지 않는 브라우저 용 SVG 플러그인을 가리 킵니다. 가장 일반적으로 사용되는 플러그인은 Adobe의 http://www.adobe.com/svg/viewer/install/에서 제공됩니다. 그러나이 플러그인은 Adobe에서 더 이상 지원하지 않습니다. 또 다른 옵션은 http://www.savarese.com/software/svgplugin/에있는 Savarese Software Research의 Ssrc SVG 플러그인입니다.

당신의 객체는 다음과 같이 보일 것입니다 :

>

SVG에 객체 사용 팁

  • 너비와 높이가 적어도 포함 할 이미지 크기 이상인지 확인하십시오. 그렇지 않으면 이미지가 잘릴 수 있습니다.
  • 올바른 내용 유형 (type = "image / svg + xml")을 포함시키지 않으면 SVG가 제대로 표시되지 않을 수 있으므로 생략하지 않는 것이 좋습니다.
  • SVG 파일을 표시하지 않는 브라우저의 객체 태그 안에 대체 정보를 포함 할 수 있습니다.
  • SVG의 소스와 매개 변수의 내용 유형을 설정할 수도 있습니다. 이것은 IE 6 및 7에서 더 잘 작동합니다.
classid = "CLSID : 1339B54C-3453-11D2-93B9-000000000000"width = "110"height = "60"codebase = "http://www.savarese.com/software/svgplugin/">

이 기능을 사용하려면 classid가 필요합니다.

객체 태그 예제에서 SVG를 봅니다.

소스 태그로 SVG 삽입하기

SVG를 포함하는 또 다른 옵션은 태그를 사용하는 것입니다. 너비 <, 높이, 유형 및 코드베이스>를 포함하여 객체 태그와 거의 동일한 속성을 사용합니다. 유일한 차이점은 데이터 대신 src 속성에 SVG 문서 URL을 넣는 것입니다.

삽입은 다음과 같이 보입니다.

src = "http://your-domain.here/z-circle.svg"width = "210"height = "210"type = "image / svg + xml"codebase = "http://www.adobe.com / svg / viewer / install "/>

SVG에 Embed 사용 팁

  • 삽입 태그는 유효한 HTML4이지만 유효 HTML5이므로 HTML4 페이지에서 사용하는 경우 페이지가 유효하지 않음을 기억해야합니다.
  • 최상의 호환성을 위해 src 속성에 완벽하게 인증 된 도메인 이름을 사용하십시오.
  • Adobe 플러그인과 함께 embed 태그를 사용하면 Mozilla 버전 1.0에서 1.4로 충돌한다는 보고서도 있습니다.

소스 태그 예제에서 SVG보기.

SVG를 포함 시키려면 iframe을 사용하십시오.

iframe 은 웹 페이지에 SVG 이미지를 포함시키는 또 다른 쉬운 방법입니다. 평소와 같이 너비와 높이의 세 가지 속성 만 필요합니다. src는 SVG 파일의 위치를 ​​가리 킵니다.

iframe은 다음과 같습니다.