CSS

SVG

소개

svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많기 떄문에 여기서는 SVG에 대해서 간략하게 언급만하겠습니다. (사실은 어렵게 수업을 만들고 나니까 이건 CSS가 아니잖아라는 생각을 나중에 하게 되었습니다. 만들어진 수업을 버릴까하다가 못 버리고 포함시켰습니다. 보셔도 좋고 안보셔도 좋습니다. ^^;; )

예제 - svg_1.html

<!doctype html>
<html>
<head>
  <style>
    img{
      width:400px;
    }
    .svg{
      height:400px;
      background-image: url(sample_vector.svg)
    }
  </style>
</head>
<body>
  <h1>Bitmap(png)</h1>
  <img src="sample_bitmap.png" alt="">
  <h1>Vector(svg)</h1>
  <img src="sample_vector.svg" alt="">
  <h1>background svg</h1>
  <div class="svg"></div>
</body>
</html>

SVG로 그림 그리기

예제 - svg_sample.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210" height="210">
  <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect>
</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>

참고

댓글

댓글 본문
작성자
비밀번호
  1. jimmyzip
    이 수업을 진작에 알고 진작에 듣고 공부했더라면 하는 생각이 듭니다....
    아는 분에게로부터, 자기 회사 홈페이지에 그래프가 많은데, 그래프 내용물 하이라이트 표시 색상을 바꾸고싶다고 해서
    제가 보고 해드립죠~ 했다가 보니까 전부 svg로 그린 그림이었더군요......
    그때는 "어....저.....이건 몰라요"했었더랬죠....
    svg를 자유자재로 잘 다루면, 기업형 홈페이지 같은거 할 때 정말 세련되게 구현할 수 있을 것 같다는 생각입니다.
    예를 들어 우리의 세계 시장 점유율은 ~~~~~이런거 글로 쓰는 것보다
    깨지지 않는 벡터이미지로 세계지도 간략하게 그려놓고,
    그 위에 그래프도 그리고,
    숫자 띡띡 써놓으면
    텍스트 주저리주저리 쓴 것 보다 훠어어어얼씬 세련되겠죠..
    저걸 svg를 못쓴다면 포토샵 일러스트로 그려서 통으로된 이미지로 넣어야 한다는(아직 많은 회사들이 그런 것 같습니다.)......
    이번 시청을 계기로 svg 맹연습 들어갑니다.
  2. 걱정금지
    감사합니다!!
  3. nevertoolate
    SVG 대단하네요.
    몰랐어용.... 넘 감사합니다.
  4. 오 꿀팁 감사합니다. 일러스트로 일일이 그러야하나 고민고민였는데.. ㄳㄳ
  5. 아리시마
    SVG는 어렵네요 ..

    나중에 필요해지면 제대로 공부해봐야겠습니다 ㅎㅎ
  6. php가 첫취업?
    재미있는 효과들이 다양무진하네요
  7. 임지호
    .svg : 벡터 이미지를 저장하는 포멧
    - vector vs bitmap : 확대했을때 깨지지 않음 vs 깨짐(.svg , .png)
  8. 알려주신 svg codepen사이트 샘플 중 하나로 공부하고 있습니다,,
    근데 JS만 적용이 안돼서 도움 요청드려요...ㅠ
  9. feel5
    너무 재밌어요!! 수업 올려주셔서 감사합니다 ㅠㅠ
  10. 선비
    svg 폰트를 많이 애용하는중이라.. 달갑네요 ㅋ
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기