반응형
그래픽 : SVG (생활코딩)
SVG는 CSS가 아니지만, CSS를 이용할 때 다양한 효과를 SVG를 활용하는 경우가 많음.
SVG는 벡터(vector) 이미지를 표현하기 위한 포맷임.
w3c에서 만든 백터 이미지 국제 표준.
vector vs bitmap
벡터는 이미지가 깨지지 않는다. -> 형태의 곡선으로 (그림) 기억 SVG
비트맵은 이미지가 깨진다. -> 격자 형식으로 기억 PNG
thenounproject.com --> icon (다운 PNG, SVG)
svg 만드는 방법.
예제 - svg_2.html
1 2 3 4 5 6 7 8 9 10 11 | <!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 |
댓글