그래픽 : SVG (생활코딩)

SVG는 CSS가 아니지만, CSS를 이용할 때 다양한 효과를 SVG를 활용하는 경우가 많음.

SVG는 벡터(vector) 이미지를 표현하기 위한 포맷임.

w3c에서 만든 백터 이미지 국제 표준.

vector vs bitmap

벡터는 이미지가 깨지지 않는다. -> 형태의 곡선으로 (그림) 기억 SVG

비트맵은 이미지가 깨진다. -> 격자 형식으로 기억 PNG

thenounproject.com --> icon (다운 PNG, SVG)

svg 만드는 방법.

예제 - svg_2.html

<!doctype html>
<html>
<body>
  <h1>file</h1>
  <img src="svg_sample.svg" alt="">
  <h1>htmls</h1>
  <svg width="210" height="210">
  <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect>
</svg>
</body>
</html>

'코딩' 카테고리의 다른 글

유지보수 : link와 import (0)	2017.02.24
모션그래픽 : 전환(transition) (0)	2017.02.23
그래픽 : 변형(transform) (0)	2017.02.23
그래픽 : 혼합(blend) (0)	2017.02.23
그래픽 : 필터(filter) (0)	2017.02.23