HTML5

 

* SVG(Scalable Vector Graphics)

- XML-벡터 기반의 이미지 포맷

- 1999년에 표준 규격 발표

- 픽셀로 구성된 raster(래스터) 그래픽 방식의 단점인 확대/축소시에 품질이 나빠지는 단점을 보완

- 벡터 그래픽은 그리는데 시간이 많이 걸리지만 확대/축소시에 품질 저하가 없음

- html5에서는 인라인 svg를 지원함

raster graphics에 대한 이미지 검색결과

vector graphics에 대한 이미지 검색결과

 

 

=>https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg?uselang=ko

 

=> https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/

 

=>http://www.freepik.com/

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<img src="https://ssl.pstatic.net/tveta/libs/1156/1156600/20170508113328-dPaNzPZw.jpg"  usemap="#favorites">

<map name="favorites">
	<area shape="rect" coords="10,10, 160, 200" href="http://google.com">
	<area shape="rect" coords="220,10, 380, 200" href="http://daum.net">
</map>


<div>
<a href="">

<img src="https://4.bp.blogspot.com/-IepFUbnlpXQ/WRLOkcDqdzI/AAAAAAAADV8/-a71XH-GhwsSwyvllRlxdk8NPwoRb2zqQCLcB/s1600/raster.jpg">
</a>
</div>

<a href='http://www.freepik.com/free-vector/social-networking-icons-on-wood_1014144.htm'>Designed by Freepik</a>


<!--
 벡터 이미지

xml ns : namespace(태그의 규격에 대한 설명)
fill 색상을 채움
rgb(red, green, blue ) 빛의 3원색
0~255
 -->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px; background:yellow" >
<circle cx="100" cy="100" r="50" stroke="pink" stroke-width="3" fill="blue"/>

	<rect width="300" height="100" x="100" y="300" style="fill:rgb(255, 255,255); stroke=width:3;"/>
</svg>


</body>
</html>








 

 

=>

 

Designed by Freepik 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

일이 되면 입도 되다 , 일이 많으면 먹을 것도 많이 생기게 된다는 말.

댓글 ( 0)

댓글 남기기

작성