HTML5 SVG 2D 소개 1 - SVG(확장 가능한 벡터 그래픽) 개요_html5 튜토리얼 팁
2d
svg
비트맵과 벡터 그래픽
이전에는 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>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 달 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775336.html" title="R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 달 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>핫 AI 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>무료로 이미지를 벗다</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI 옷 제거제</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>AI Hentai를 무료로 생성하십시오.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 달 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775336.html" title="R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 달 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>뜨거운 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
<h3>메모장++7.3.1</h3>
</a>
<p>사용하기 쉬운 무료 코드 편집기</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 중국어 버전</h3>
</a>
<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
<h3>스튜디오 13.0.1 보내기</h3>
</a>
<p>강력한 PHP 통합 개발 환경</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
<h3>드림위버 CS6</h3>
</a>
<p>시각적 웹 개발 도구</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac 버전</h3>
</a>
<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>뜨거운 주제</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7396</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1630</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1358</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1268</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1217</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/faq/zt">더보기</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/495551.html" title="SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6310212f7b12b873.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다." />
</a>
<a href="https://www.php.cn/ko/faq/495551.html" title="SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다." class="phphistorical_Version2_mids_title">SVG를 사용하여 이미지 모자이크 효과를 얻는 방법에 대해 이야기해 보겠습니다.</a>
<span class="Articlelist_txts_time">Sep 01, 2022 am 11:05 AM</span>
<p class="Articlelist_txts_p">Javascript를 사용하지 않고 SVG를 사용하여 이미지 모자이크 효과를 얻는 방법은 무엇입니까? 다음 기사는 귀하에게 자세한 이해를 제공할 것이며, 귀하에게 도움이 되기를 바랍니다!</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/630655.html" title="svg를 jpg 형식으로 변환하는 방법" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202311/24/2023112409453734131.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="svg를 jpg 형식으로 변환하는 방법" />
</a>
<a href="https://www.php.cn/ko/faq/630655.html" title="svg를 jpg 형식으로 변환하는 방법" class="phphistorical_Version2_mids_title">svg를 jpg 형식으로 변환하는 방법</a>
<span class="Articlelist_txts_time">Nov 24, 2023 am 09:50 AM</span>
<p class="Articlelist_txts_p">svg는 이미지 처리 소프트웨어, 온라인 변환 도구, Python 이미지 처리 라이브러리를 사용하여 jpg 형식으로 변환할 수 있습니다. 자세한 소개: 1. 이미지 처리 소프트웨어에는 Adobe Illustrator, Inkscape 및 GIMP가 포함됩니다. 2. 온라인 변환 도구에는 CloudConvert, Zamzar, Online Convert 등이 포함됩니다. 3. Python 이미지 처리 라이브러리 등</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/491444.html" title="vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/626a0043e5a72935.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석" />
</a>
<a href="https://www.php.cn/ko/faq/491444.html" title="vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석" class="phphistorical_Version2_mids_title">vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석</a>
<span class="Articlelist_txts_time">Apr 28, 2022 am 10:48 AM</span>
<p class="Articlelist_txts_p">svg 이미지는 프로젝트에서 널리 사용됩니다. 다음 기사에서는 vue3 + vite에서 svg 아이콘을 사용하는 방법을 소개하겠습니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/646343.html" title="북경대학교 제작: 텍스처 품질과 멀티뷰 일관성을 갖춘 최신 SOTA로 2분 안에 하나의 이미지를 3D 변환할 수 있습니다." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/170489939751963.gif?x-oss-process=image/resize,m_fill,h_207,w_330" alt="북경대학교 제작: 텍스처 품질과 멀티뷰 일관성을 갖춘 최신 SOTA로 2분 안에 하나의 이미지를 3D 변환할 수 있습니다." />
</a>
<a href="https://www.php.cn/ko/faq/646343.html" title="북경대학교 제작: 텍스처 품질과 멀티뷰 일관성을 갖춘 최신 SOTA로 2분 안에 하나의 이미지를 3D 변환할 수 있습니다." class="phphistorical_Version2_mids_title">북경대학교 제작: 텍스처 품질과 멀티뷰 일관성을 갖춘 최신 SOTA로 2분 안에 하나의 이미지를 3D 변환할 수 있습니다.</a>
<span class="Articlelist_txts_time">Jan 10, 2024 pm 11:09 PM</span>
<p class="Articlelist_txts_p">사진을 3D로 변환하는 데 단 2분밖에 걸리지 않습니다! 또한 다양한 시야각에서 질감 품질이 높고 일관성이 높은 종류입니다. 어떤 종이든 입력 시 단일 보기 이미지는 여전히 다음과 같습니다. 2분 후 3D 버전이 완료됩니다. △ Upper, Repaint123(NeRF); Lower, Repaint123(GS) 새로운 방법을 Repaint123이라고 합니다. 핵심 아이디어는 2D를 결합하는 것입니다. 확산 모델의 강력한 이미지 생성 기능은 다시 그리기 전략의 텍스처 정렬 기능과 결합되어 여러 보기에 걸쳐 고품질의 일관된 이미지를 생성합니다. 또한, 이 연구에서는 중첩 영역에 대한 가시성 인식 적응형 다시 그리기 강도 방법도 소개합니다. Repaint123은 큰 멀티뷰 편차, 텍스처 저하, 느린 생성 등 이전 방법의 문제점을 단번에 해결합니다. 현재 항목</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/560726.html" title="VUE3 입문 튜토리얼: Vue.js 플러그인을 사용하여 SVG로 플레이" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/168688014075017.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="VUE3 입문 튜토리얼: Vue.js 플러그인을 사용하여 SVG로 플레이" />
</a>
<a href="https://www.php.cn/ko/faq/560726.html" title="VUE3 입문 튜토리얼: Vue.js 플러그인을 사용하여 SVG로 플레이" class="phphistorical_Version2_mids_title">VUE3 입문 튜토리얼: Vue.js 플러그인을 사용하여 SVG로 플레이</a>
<span class="Articlelist_txts_time">Jun 16, 2023 am 09:48 AM</span>
<p class="Articlelist_txts_p">최신 웹 프런트 엔드 개발이 지속적으로 발전함에 따라 실제 개발에 점점 더 많은 기술이 널리 사용됩니다. 그중 Vue.js는 현재 가장 널리 사용되는 JavaScript 프레임워크 중 하나입니다. MVVM 모델을 기반으로 하며 풍부한 API와 구성 요소 라이브러리를 제공하므로 반응성이 뛰어나고 재사용 가능하며 효율적인 웹 애플리케이션을 보다 쉽게 개발할 수 있습니다. Vue.js3의 최신 버전은 이전 버전보다 더 나은 성능과 풍부한 기능을 갖추고 있어 광범위한 관심과 연구를 불러일으켰습니다. 이 기사에서는 다음을 소개합니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/495737.html" title="파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/631802263715b383.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명" />
</a>
<a href="https://www.php.cn/ko/faq/495737.html" title="파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명" class="phphistorical_Version2_mids_title">파비콘에 로고를 추가하기 위해 SVG를 사용하는 방법에 대한 자세한 설명</a>
<span class="Articlelist_txts_time">Sep 07, 2022 am 10:30 AM</span>
<p class="Articlelist_txts_p">SVG를 사용하여 파비콘에 로고를 추가하는 방법은 무엇입니까? 다음 기사에서는 SVG를 사용하여 로고가 포함된 파비콘을 생성하는 방법을 소개합니다. 도움이 되길 바랍니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/536436.html" title="vue3+vue-cli4에서 svg를 사용하는 방법" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/168379908822961.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="vue3+vue-cli4에서 svg를 사용하는 방법" />
</a>
<a href="https://www.php.cn/ko/faq/536436.html" title="vue3+vue-cli4에서 svg를 사용하는 방법" class="phphistorical_Version2_mids_title">vue3+vue-cli4에서 svg를 사용하는 방법</a>
<span class="Articlelist_txts_time">May 11, 2023 pm 05:58 PM</span>
<p class="Articlelist_txts_p">一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev 2、src/comComponents/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/608983.html" title="HTML5 캔버스에 SVG 파일 그리기" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169476174860922.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5 캔버스에 SVG 파일 그리기" />
</a>
<a href="https://www.php.cn/ko/faq/608983.html" title="HTML5 캔버스에 SVG 파일 그리기" class="phphistorical_Version2_mids_title">HTML5 캔버스에 SVG 파일 그리기</a>
<span class="Articlelist_txts_time">Sep 15, 2023 pm 03:09 PM</span>
<p class="Articlelist_txts_p">캔버스 요소에 HTMLImageElements를 그리려면 drawImage() 메서드를 사용하세요. 이 메소드는 src="mySVG.svg"를 사용하여 Image 변수를 정의하고 로드 시 drawImage를 사용합니다. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";</p>
</div>
</div>
<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1743945463"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</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 그래픽을 삽입하면 됩니다.
코드 복사
코드는 다음과 같습니다.