644
No
* SVG(Scalable Vector Graphics)
- XML-벡터 기반의 이미지 포맷
- 1999년에 표준 규격 발표
- 픽셀로 구성된 raster(래스터) 그래픽 방식의 단점인 확대/축소시에 품질이 나빠지는 단점을 보완
- 벡터 그래픽은 그리는데 시간이 많이 걸리지만 확대/축소시에 품질 저하가 없음
- html5에서는 인라인 svg를 지원함
=>https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg?uselang=ko
=> https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/
<!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>
=>
댓글 ( 4)
댓글 남기기