Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 퍼블리셔 협업툴
- 레이어 가운데로
- 퍼블 업무툴
- 별자리 시전
- ios 크로스
- 프론트엔드 개발 독학
- css 퍼블 사용
- a 새창 띄우기
- 팝업 가운데로
- js 독학
- 배울때 태도
- 퍼블 면접
- 하이브리드앱 크로스브라우징
- css 사용팁
- ios 크로스브라우징
- react class
- 퍼블리셔 업무
- react className
- js a 새창 띄우기
- 연애후
- svg 사용
- 나는 언제쯤 인연을 만날수 있을까
- react sass
- 여자쳐다보는 남친
- 퍼블리셔 면접
- 관심가는 차
- 연애 후 느낀점
- 화면 가운데로 띄우기
- 경력 퍼블리셔
- 자바스크립트 독학
Archives
- Today
- Total
코딩룸*◡*
[HTML] SVG(Scalable Vector Graphic)이미지 본문
*SVG (Scalable Vector Graphic)이미지란?
: 확장이 가능한 백터 그래픽 즉, 확대를 해도 깨지지 않는 이미지입니다.
*SVG 장점
- 스타일 수정이 쉽습니다.
- XML 기반의 문서여서 사용하기 편리합니다.
- 애니메이션이나 CSS효과를 적용할 수 있습니다.
*SVG 사용법
사용법은 크게 3가지가 있습니다.
1) SVG 파일 다운 후 이미지 태그를 사용해서 넣어주는 방법
ex) <img src="love.svg" width="300" height="300">
2) SVG 소스를 그대로 웹 문서에 삽입해주는 방법
ex)
<body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve"> <path style="fill:#D59F63;" d="M384.534,63.196L384.534,63.196L384.534,63.196L384.534,63.196L384.534,63.196 c52.058,0,94.259,42.201,94.259,94.259l0,0c0,59.983,8.569,119.966,8.569,119.966s-42.845,25.707-102.828,34.276 c-59.983-8.569-102.828-34.276-102.828-34.276s8.569-59.983,8.569-119.966l0,0C290.276,105.397,332.477,63.196,384.534,63.196 L384.534,63.196L384.534,63.196L384.534,63.196L384.534,63.196z"/> <path style="fill:#CD915A;" d="M350.259,148.886v-25.707c0-29.129,20.769-53.389,48.302-58.826 c-4.588-0.686-9.246-1.156-14.026-1.156h-0.001c-52.058,0-94.259,42.201-94.259,94.259c0,59.983-8.569,119.966-8.569,119.966 s42.845,25.707,102.828,34.276V183.162L350.259,148.886z"/> <path style="fill:#FAD7A5;" d="M488.341,339.508l-58.757-23.503c-6.507-2.603-10.773-8.904-10.773-15.912v-31.242h-68.552v31.242 c0,7.008-4.266,13.309-10.773,15.912l-58.757,23.503c-9.76,3.904-16.159,13.356-16.159,23.868v34.01 c0,4.733,3.836,8.569,8.569,8.569l0,0v77.121h222.793v-77.121l0,0c4.733,0,8.569,0,8.569,0v-42.579 C504.5,352.865,498.1,343.412,488.341,339.508z"/> <g> . . . </svg> </body> |
3) SVG 이미지를 더블클릭해서 F12번 누르면 나오는 <sgv>태그를 복사해 붙이는 방법
html의 원하는곳에 붙여넣기 하면 됩니다.
*SVG 스타일 수정법
- 색상은 "fill:#fff;"
- 원하는 부분에 클래스를 지정해주어서 변경도 가능 (hover시 색상 변경 가능)
-
*SVG 유의점
- 익스플로러 8이하 또는 안드로이드 2.3이하 버전에서는 SVG파일을 표시할 수 없기때문에 png로 대체 해주어야 합니다.
- 브라우저에서 지원하는지 여부를 알려면 Modernizer 이라는 스크립트를 사이트에서 다운받아 폴더에 넣어서 사용하면 됩니다.
*SVG 다운로드 하는곳
*포토샵이나 일러스트레이터에서 저장한 SVG 최적화 사이트
반응형
'공부좀 하자 > HTML, CSS' 카테고리의 다른 글
| [CSS]반드시 알아야하는 CSS 사용 tip! (0) | 2019.04.30 |
|---|---|
| [CSS] table 테두리 간격 없애기 (2) | 2019.04.04 |
| [CSS] transition 속성 (0) | 2019.03.19 |
| UI (User Interface) / UX (User Experience) (0) | 2019.03.12 |
| min 파일 풀기 / 압축하기 (0) | 2019.03.07 |
'공부좀 하자/HTML, CSS' Related Articles
more
Comments