생활코딩

Coding Everybody

SVG

토픽 생활코딩 > 클라이언트 > CSS > CSS 수업

소개

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. 곤비
    0219
  2. 새콤달콤
    완료
  3. 덕자
    완료!
  4. DreamBoy
    2023.09.23. CSS - 그래픽 - SVG 파트를 시작합니다.
  5. AgainstartJH
    2022년 11월 29일 화요일 학습완료!
  6. INJE
    22/03/18
  7. 임앤강
    2022-01-28 수강완료.
  8. 드림보이
    2021.11.19. SVG 파트 수강완료
  9. 위키백터
    위키백과 나무위키에서 현재는 백터 이미지를 올리고 있는 업로더 입니다.
    SVG는 3개월 전부터 관심이 있어서 지금까지 백터를 잉크스케이프나 일러스트레이터로
    작업해서 올리고 있습니다.
    하지만 이 생활코딩을 보니 백터 작업이 힘들다는걸 알았습니다.
    이 내용을 보며 많은 도움이 되었습니다.
  10. choi
    완료
  11. jeisyoon
    2021.06.24 SVG - OK
  12. 따뜻한츄르
    210101
  13. 201222 며칠 쉬다 왔습니다!
  14. lia318
    xmlns에 있는 URL은 그저 네임스페이스일 분 오프라인이여도 svg 사용이 가능한 건가요??
  15. 박병진
    완료
  16. 김성곤
    20200729 감사합니다!
  17. 한강
    svg - vector, png - bitmap
    오늘도 감사합니다~~^^!
    200612
  18. 강고루
    안녕하세요. 이고잉님.
    svg file 표시하는법 구글링하니까 이 페이지가 뜨네요^^
  19. Blanc
    2020.01.06
  20. jinxiong
    clear
  21. 다나가
    190807 수강완료~~!!!!!
  22. FIRE
    20190731 완료
  23. lygon
    2019-03-10 완료
  24. 하늘바람
    목소리좋은 쌤~^^감사합니당.
    좋은 수업이였습니다. 코드팬과 svg 검색해서 더 찾아봐야겠습니다.ㅎ
  25. 초보코더
    확실히...좋네요...감사합니다
  26. 박경아
    CSS 강의 지금까지 잘 들었습니다. 어려운 내용인데 안가르쳐 주셨으면 어려운 길 돌아갈 뻔 했어요... 이제까지 와서 감사 드립니다^^
  27. 숨이
    완료햇습니당
  28. 투키
    SVG가 미래다..
    기술소개 감사합뉘당......
  29. 김민영
    완료
  30. 스페이스몽키
    감사합니다! 이건 제가 할 수 있는 부분이 아니군요..
  31. type="image/svg+xml" <img> 테그 안에 넣어보세요.
    대화보기
    • 김계승
      width="300"으로 해보시겠어요?
      대화보기
      • 나래
        4:07 에서 4:08로 넘어가는게 매끄럽지 못한 게 그냥 편집이 그렇게 됐나보다 하고 진행을 하는데, 코드가 달라서 당황했어요 ㅠ
      • 홍넘끼
        FTP 프로그램에서 SVG 파일 넣어서<body><img src="logo.svg" alt="" width="300px"></body> 이렇게 했는데도 나오지 않습니다. <body><svg>~~~~~~~</svg></body>이렇게 하면 나오는데요. 원인 무엇인가요?ㅠ0ㅠ


        <!doctype html>
        <html lang="ko">
        <head>
        <meta charset="enu-kr">
        <meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
        <title>Web Flavor</title>
        </head>
        <body>
        <img src="logo.svg" alt="" width="300px">
        </body>
        </html>
      • Karoid
        놀라운 것은, 포토샵 일러스트레이터 결과물을 svg로 내보낼 수 있다는 것입니다. 그래서 일러스트레이터로 만들어진 그래프를 svg로 디자이너에게 받아서 그 상태 그대로 개발자가 편집/수정/기능추가가 가능합니다
        대화보기
        • 박신우
          와...
        • 푸른하늘
          12일차 공부 감사합니다
        • 오빠는다르다
          감사합니다~!!!!!
        • jimmyzip
          이 수업을 진작에 알고 진작에 듣고 공부했더라면 하는 생각이 듭니다....
          아는 분에게로부터, 자기 회사 홈페이지에 그래프가 많은데, 그래프 내용물 하이라이트 표시 색상을 바꾸고싶다고 해서
          제가 보고 해드립죠~ 했다가 보니까 전부 svg로 그린 그림이었더군요......
          그때는 "어....저.....이건 몰라요"했었더랬죠....
          svg를 자유자재로 잘 다루면, 기업형 홈페이지 같은거 할 때 정말 세련되게 구현할 수 있을 것 같다는 생각입니다.
          예를 들어 우리의 세계 시장 점유율은 ~~~~~이런거 글로 쓰는 것보다
          깨지지 않는 벡터이미지로 세계지도 간략하게 그려놓고,
          그 위에 그래프도 그리고,
          숫자 띡띡 써놓으면
          텍스트 주저리주저리 쓴 것 보다 훠어어어얼씬 세련되겠죠..
          저걸 svg를 못쓴다면 포토샵 일러스트로 그려서 통으로된 이미지로 넣어야 한다는(아직 많은 회사들이 그런 것 같습니다.)......
          이번 시청을 계기로 svg 맹연습 들어갑니다.
        • 걱정금지
          감사합니다!!
        • nevertoolate
          SVG 대단하네요.
          몰랐어용.... 넘 감사합니다.
        • 오 꿀팁 감사합니다. 일러스트로 일일이 그러야하나 고민고민였는데.. ㄳㄳ
        • 아리시마
          SVG는 어렵네요 ..

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