HTML5 SVG 2D 소개 1 - SVG(확장 가능한 벡터 그래픽) 개요_html5 튜토리얼 팁
- WBOY원래의
- 2016-05-16 15:50:071540검색
비트맵과 벡터 그래픽
이전에는 jpeg, gif 등 브라우저에 표시되는 그래픽은 모두 비트맵이었으며 이러한 이미지 형식은 래스터 기반이었습니다. 래스터 이미지에서 이미지 파일은 이미지에 있는 각 픽셀의 색상 값을 정의합니다. 브라우저는 이 값을 읽고 그에 따라 행동해야 합니다. 이런 종류의 이미지의 재현 능력은 상대적으로 강력하지만 일부 상황에서는 부족하게 보일 수 있습니다. 예를 들어, 브라우저가 서로 다른 크기로 이미지를 표시하는 경우 가장자리가 들쭉날쭉해지며 브라우저는 원본 이미지에 존재하지 않는 픽셀에 대한 값을 보간하거나 추측해야 하며 이로 인해 이미지가 왜곡됩니다. 또한 비트맵 애니메이션은 기껏해야 개별 이미지가 빠르게 연속해서 표시되는 "플립북" 유형의 애니메이션을 생성하는 것으로 제한됩니다.
벡터 그래픽은 값 자체를 지정하는 대신 각 픽셀의 값을 결정하는 데 필요한 지침을 지정하여 이러한 어려움 중 일부를 극복합니다. 예를 들어, 벡터 그래픽은 직경 1인치의 원에 대한 픽셀 값을 제공하는 대신 브라우저에 직경 1인치의 원을 만들고 브라우저(또는 플러그인)가 나머지 작업을 수행하도록 지시합니다. 이는 래스터 그래픽의 많은 제한 사항을 제거합니다. 벡터 그래픽을 사용하면 브라우저는 원을 그려야 한다는 것만 알 수 있습니다. 이미지를 일반 크기의 3배로 표시해야 하는 경우 브라우저는 래스터 이미지의 일반적인 보간을 수행할 필요 없이 올바른 크기로 원을 그립니다. 마찬가지로, 브라우저는 애플리케이션 및 데이터베이스와 같은 외부 정보 소스에 더 쉽게 연결될 수 있는 지침을 받습니다. 이미지를 애니메이션화하기 위해 브라우저는 단순히 반경이나 색상과 같은 속성을 조작하는 방법에 대한 지침을 받습니다.
HTML 시스템에서 벡터 그래픽을 그리는 데 가장 일반적으로 사용되는 기술은 SVG와 HTML5에 새로 추가된 캔버스 요소입니다. 두 기술 모두 드로잉 벡터 및 래스터 이미지를 지원합니다.
SVG 개요
스케일러블 벡터 그래픽(줄여서 SVG)은 XML을 사용하여 2차원 그래픽을 설명하는 언어입니다(SVG는 XML 구문을 엄격하게 따릅니다). SVG에서는 벡터 그래픽 모양(직선과 곡선으로 구성된 경로 등), 이미지, 텍스트 등 세 가지 유형의 그래픽 개체를 허용합니다. 그래픽 개체(텍스트 포함)는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 개체로 결합될 수 있습니다. SVG 기능 세트에는 중첩된 변환, 클리핑 경로, 알파 마스크 및 템플릿 개체가 포함됩니다.
SVG 그림은 상호 작용적이고 역동적입니다. 예를 들어 스크립트를 사용하여 애니메이션을 정의하고 트리거할 수 있습니다. 이는 Flash에 비해 매우 강력합니다. 플래시는 바이너리 파일이므로 동적으로 생성하고 수정하기 어렵습니다. SVG는 텍스트 파일이므로 동적 조작이 매우 쉽습니다. 게다가 SVG는 애니메이션을 완성하기 위한 관련 요소를 직접 제공하므로 조작이 매우 편리합니다.
SVG는 다른 웹 표준과 호환되며 Document Object Model DOM을 직접 지원합니다. 이는 HTML5의 캔버스와 비교할 때 매우 강력한 점이기도 합니다(SVG도 SVG 그래픽을 표시하기 위해 내부적으로 유사한 캔버스를 사용한다는 점에 유의하세요. 나중에 많은 기능이 HTML5의 캔버스와 다소 유사하다는 것을 알게 될 것입니다. SVG의 캔버스라고 명시적으로 명시되어 있지 않으며 HTML5의 캔버스 요소를 나타냅니다.) 따라서 SVG의 많은 고급 응용 프로그램을 스크립트를 사용하여 쉽게 구현할 수 있습니다. 또한 SVG 그래픽 요소는 기본적으로 DOM의 표준 이벤트를 지원합니다. 다양한 이벤트 핸들러(예: "onmouseover" 및 "onclick")를 모든 SVG 그래픽 객체에 할당할 수 있습니다. SVG의 렌더링 속도는 캔버스 요소만큼 빠르지는 않지만 DOM 작업이 매우 유연하다는 장점이 있습니다. 이러한 장점은 속도의 단점을 완전히 보완할 수 있습니다.
SVG는 프로토콜이자 언어라고 할 수 있으며 HTML의 표준 요소이자 이미지 형식입니다.
SVG는 HTML5의 내용은 아니지만 널리 사용되는 웹 기술 중 하나로 간주되므로 당분간 이 주제에 포함하겠습니다.
SVG와 기타 이미지 형식 비교
다른 이미지 형식과 비교하여 SVG에는 많은 장점이 있습니다(많은 장점은 벡터 그래픽의 장점에서 비롯됩니다).
• SVG 파일은 순수 XML이며 다양한 도구(예: 메모장)로 읽고 수정할 수 있습니다.
• SVG는 JPEG 및 GIF 이미지보다 작고 압축률이 높습니다.
• SVG는 확장 가능하고, 이미지 품질 저하 없이 확대할 수 있으며, 모든 해상도에서 고품질로 인쇄할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합).
• SVG는 Java 기술로 실행될 수 있습니다.
• SVG는 개방형 표준입니다.
SVG와 플래시 비교
SVG의 주요 경쟁자는 플래시입니다. 플래시에 비해 SVG의 가장 큰 장점은 다른 표준(XSL, DOM 등)과 호환되고 조작이 쉽다는 점인데 비해 플래시는 오픈소스가 아닌 독자적인 기술이다. 저장 형식 및 동적으로 생성된 그래픽과 같은 다른 측면에서도 SVG는 큰 장점을 가지고 있습니다.
SVG가 표현되는 방식
여기서 HTML5와 SVG를 지원하는 브라우저는 논의의 초점이 아닙니다. 사용자는 IE9만 설치하시기 바랍니다. IE9 이전 버전의 경우 SVG 플러그인을 설치해야 하며 여기서는 건너뜁니다. SVG를 직접 지원하는 브라우저의 경우 SVG는 주로 양면에서 두 가지 표시 방법을 사용합니다.
HTML에 인라인
SVG는 HTML에 직접 작성할 수 있는 표준 HTML 요소입니다. 다음 예를 참조하세요.
🎜>
;/svg>해당 텍스트 파일을 sun.svg와 같은 svg 확장자를 가진 파일로 저장하거나 다른 파일에 참조로 포함할 수 있습니다. 페이지. 2.HTML은 외부 SVG 파일을 참조합니다.
코드 복사
코드는 다음과 같습니다.
</u> </head> </span><body> </div><object data="sun.svg" type="image/svg xml" </div>width="300px" height="300px"> ; <div class="msgborder" id="phpcode65"><!-- 여기에 대체 코드를 구현하거나 다음 메시지를 표시하세요. --> <br><p>귀하의 브라우저는 SVG를 지원하지 않습니다. 최신 브라우저로 업그레이드하세요.</p> 🎜></object> <br><img src="sun.svg" alt="svg는 지원되지 않습니다!" /> <br></html> <br> <br>사실 SVG는 다른 XML 문서에도 들어갈 수 있고, 다른 XML 문서와 마찬가지로 XML 관련 기술을 사용해 포맷하고 검증할 수도 있습니다. <br><br><br>SVG의 렌더링 순서<br> <br>SVG는 정의된 요소의 순서에 따라 엄격하게 렌더링되는데, 이는 z-index 값을 사용하여 레이어링을 제어하는 HTML과 다릅니다. . SVG에서는 앞에 쓰여진 요소가 먼저 렌더링되고, 뒤에 쓰여진 요소가 마지막에 렌더링됩니다. 나중에 렌더링되는 요소는 이전 요소를 덮게 됩니다. 투명도 효과로 인해 가려지지 않는 것처럼 보일 때도 있지만 실제로는 SVG가 엄격한 순서로 렌더링됩니다. <br>참고: SVG는 XML로 정의되므로 HTML과 달리 대소문자를 구분합니다. <br><br><br>실용 참조<br>: </div>공식 문서: <br>http://www.w3.org/TR/SVG11/<br><br>스크립트 색인: <strong> http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx</strong><br>개발 센터: <br>https://developer.mozilla.org/en/ SVG<br><br>인기 참고 자료:<strong>http://www.chinasvg.com/</strong></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="html5 캔버스 그리기 튜토리얼(10) - 표면을 선으로 분할하여 둥근 직사각형을 시뮬레이션합니다.html5 튜토리얼 기술" href="http://m.php.cn/ko/faq/6438.html">html5 캔버스 그리기 튜토리얼(10) - 표면을 선으로 분할하여 둥근 직사각형을 시뮬레이션합니다.html5 튜토리얼 기술</a></span><span>다음 기사：<a class="dBlack" title="html5 캔버스 그리기 튜토리얼(10) - 표면을 선으로 분할하여 둥근 직사각형을 시뮬레이션합니다.html5 튜토리얼 기술" href="http://m.php.cn/ko/faq/6440.html">html5 캔버스 그리기 튜토리얼(10) - 표면을 선으로 분할하여 둥근 직사각형을 시뮬레이션합니다.html5 튜토리얼 기술</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348281.html" title="AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성" class="aBlack">AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348372.html" title="HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)" class="aBlack">HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348373.html" title="HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명" class="aBlack">HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348374.html" title="정규 표현식과 새로운 HTML5 요소" class="aBlack">정규 표현식과 새로운 HTML5 요소</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348469.html" title="NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법" class="aBlack">NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
이전에는 jpeg, gif 등 브라우저에 표시되는 그래픽은 모두 비트맵이었으며 이러한 이미지 형식은 래스터 기반이었습니다. 래스터 이미지에서 이미지 파일은 이미지에 있는 각 픽셀의 색상 값을 정의합니다. 브라우저는 이 값을 읽고 그에 따라 행동해야 합니다. 이런 종류의 이미지의 재현 능력은 상대적으로 강력하지만 일부 상황에서는 부족하게 보일 수 있습니다. 예를 들어, 브라우저가 서로 다른 크기로 이미지를 표시하는 경우 가장자리가 들쭉날쭉해지며 브라우저는 원본 이미지에 존재하지 않는 픽셀에 대한 값을 보간하거나 추측해야 하며 이로 인해 이미지가 왜곡됩니다. 또한 비트맵 애니메이션은 기껏해야 개별 이미지가 빠르게 연속해서 표시되는 "플립북" 유형의 애니메이션을 생성하는 것으로 제한됩니다.
벡터 그래픽은 값 자체를 지정하는 대신 각 픽셀의 값을 결정하는 데 필요한 지침을 지정하여 이러한 어려움 중 일부를 극복합니다. 예를 들어, 벡터 그래픽은 직경 1인치의 원에 대한 픽셀 값을 제공하는 대신 브라우저에 직경 1인치의 원을 만들고 브라우저(또는 플러그인)가 나머지 작업을 수행하도록 지시합니다. 이는 래스터 그래픽의 많은 제한 사항을 제거합니다. 벡터 그래픽을 사용하면 브라우저는 원을 그려야 한다는 것만 알 수 있습니다. 이미지를 일반 크기의 3배로 표시해야 하는 경우 브라우저는 래스터 이미지의 일반적인 보간을 수행할 필요 없이 올바른 크기로 원을 그립니다. 마찬가지로, 브라우저는 애플리케이션 및 데이터베이스와 같은 외부 정보 소스에 더 쉽게 연결될 수 있는 지침을 받습니다. 이미지를 애니메이션화하기 위해 브라우저는 단순히 반경이나 색상과 같은 속성을 조작하는 방법에 대한 지침을 받습니다.
HTML 시스템에서 벡터 그래픽을 그리는 데 가장 일반적으로 사용되는 기술은 SVG와 HTML5에 새로 추가된 캔버스 요소입니다. 두 기술 모두 드로잉 벡터 및 래스터 이미지를 지원합니다.
SVG 개요
스케일러블 벡터 그래픽(줄여서 SVG)은 XML을 사용하여 2차원 그래픽을 설명하는 언어입니다(SVG는 XML 구문을 엄격하게 따릅니다). SVG에서는 벡터 그래픽 모양(직선과 곡선으로 구성된 경로 등), 이미지, 텍스트 등 세 가지 유형의 그래픽 개체를 허용합니다. 그래픽 개체(텍스트 포함)는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 개체로 결합될 수 있습니다. SVG 기능 세트에는 중첩된 변환, 클리핑 경로, 알파 마스크 및 템플릿 개체가 포함됩니다.
SVG 그림은 상호 작용적이고 역동적입니다. 예를 들어 스크립트를 사용하여 애니메이션을 정의하고 트리거할 수 있습니다. 이는 Flash에 비해 매우 강력합니다. 플래시는 바이너리 파일이므로 동적으로 생성하고 수정하기 어렵습니다. SVG는 텍스트 파일이므로 동적 조작이 매우 쉽습니다. 게다가 SVG는 애니메이션을 완성하기 위한 관련 요소를 직접 제공하므로 조작이 매우 편리합니다.
SVG는 다른 웹 표준과 호환되며 Document Object Model DOM을 직접 지원합니다. 이는 HTML5의 캔버스와 비교할 때 매우 강력한 점이기도 합니다(SVG도 SVG 그래픽을 표시하기 위해 내부적으로 유사한 캔버스를 사용한다는 점에 유의하세요. 나중에 많은 기능이 HTML5의 캔버스와 다소 유사하다는 것을 알게 될 것입니다. SVG의 캔버스라고 명시적으로 명시되어 있지 않으며 HTML5의 캔버스 요소를 나타냅니다.) 따라서 SVG의 많은 고급 응용 프로그램을 스크립트를 사용하여 쉽게 구현할 수 있습니다. 또한 SVG 그래픽 요소는 기본적으로 DOM의 표준 이벤트를 지원합니다. 다양한 이벤트 핸들러(예: "onmouseover" 및 "onclick")를 모든 SVG 그래픽 객체에 할당할 수 있습니다. SVG의 렌더링 속도는 캔버스 요소만큼 빠르지는 않지만 DOM 작업이 매우 유연하다는 장점이 있습니다. 이러한 장점은 속도의 단점을 완전히 보완할 수 있습니다.
SVG는 프로토콜이자 언어라고 할 수 있으며 HTML의 표준 요소이자 이미지 형식입니다.
SVG는 HTML5의 내용은 아니지만 널리 사용되는 웹 기술 중 하나로 간주되므로 당분간 이 주제에 포함하겠습니다.
SVG와 기타 이미지 형식 비교
다른 이미지 형식과 비교하여 SVG에는 많은 장점이 있습니다(많은 장점은 벡터 그래픽의 장점에서 비롯됩니다).
• SVG 파일은 순수 XML이며 다양한 도구(예: 메모장)로 읽고 수정할 수 있습니다.
• SVG는 JPEG 및 GIF 이미지보다 작고 압축률이 높습니다.
• SVG는 확장 가능하고, 이미지 품질 저하 없이 확대할 수 있으며, 모든 해상도에서 고품질로 인쇄할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합).
• SVG는 Java 기술로 실행될 수 있습니다.
• SVG는 개방형 표준입니다.
SVG와 플래시 비교
SVG의 주요 경쟁자는 플래시입니다. 플래시에 비해 SVG의 가장 큰 장점은 다른 표준(XSL, DOM 등)과 호환되고 조작이 쉽다는 점인데 비해 플래시는 오픈소스가 아닌 독자적인 기술이다. 저장 형식 및 동적으로 생성된 그래픽과 같은 다른 측면에서도 SVG는 큰 장점을 가지고 있습니다.
SVG가 표현되는 방식
여기서 HTML5와 SVG를 지원하는 브라우저는 논의의 초점이 아닙니다. 사용자는 IE9만 설치하시기 바랍니다. IE9 이전 버전의 경우 SVG 플러그인을 설치해야 하며 여기서는 건너뜁니다. SVG를 직접 지원하는 브라우저의 경우 SVG는 주로 양면에서 두 가지 표시 방법을 사용합니다.
HTML에 인라인
SVG는 HTML에 직접 작성할 수 있는 표준 HTML 요소입니다. 다음 예를 참조하세요.
코드 복사
코드는 다음과 같습니다: 🎜>
;/svg>
다음과 같은 작은 예와 같이 object 또는 img 요소를 사용하여 SVG 그래픽을 삽입하면 됩니다.
코드 복사
코드는 다음과 같습니다.